webgl中点光源需在js中传入光源位置及颜色，在着色器中计算光的反射颜色
有两种方案，逐顶点计算和逐片元计算，也就是在哪个着色器中计算颜色
对比图如下：
左边逐顶点，右边逐片元
逐顶点计算代码：
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script id="vertex" type="text/v-shader">
precision mediump float;
attribute vec4 a_position;
attribute vec4 a_color;
attribute vec4 a_normal;
uniform mat4 u_viewMatrix;
uniform mat4 u_projMatrix;
uniform mat4 u_modelMatrix;
uniform vec3 u_lightColor;
uniform vec3 u_lightPosition;
uniform vec3 u_ambientLight;
varying vec4 v_color;
void main(){
gl_Position = u_projMatrix * u_viewMatrix * u_modelMatrix * a_position;
vec3 normal = normalize(a_normal.xyz);
vec4 vertexPosition = u_projMatrix * u_viewMatrix * u_modelMatrix * a_position;
vec3 lightDirection = normalize(u_lightPosition - vec3(vertexPosition));
float nDotlL = max(dot(lightDirection, normal), 0.0);
vec3 diffuse = u_lightColor * a_color.rgb * nDotlL;
vec3 ambient = u_ambientLight * a_color.rgb;
v_color = vec4(diffuse + ambient, a_color.a);
}
</script>
<script id="fragment" type="text/f-shader">
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_color;
void main(){
gl_FragColor = v_color;
}
</script>
<script>
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var vertex = gl.createShader(gl.VERTEX_SHADER);
var fragment = gl.createShader(gl.FRAGMENT_SHADER);
var program = gl.createProgram();
gl.shaderSource(vertex, document.getElementById("vertex").text);
gl.shaderSource(fragment, document.getElementById("fragment").text);
gl.compileShader(vertex);
gl.compileShader(fragment);
// 错误检测
if (!gl.getShaderParameter(vertex, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(vertex));
}
if (!gl.getShaderParameter(fragment, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(fragment));
}
//链接程序
gl.attachShader(program, vertex);
gl.attachShader(program, fragment);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(program);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//开启深度检测
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var vertices = new Float32Array([ // Coordinates
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
]);
var colors = new Float32Array([ // Colors
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // v4-v7-v6-v5 back
]);
var normals = new Float32Array([ // Normal
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back
]);
var indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9, 10, 8, 10, 11, // up
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // down
20, 21, 22, 20, 22, 23 // back
]);
//视点位置
var viewMatrix = new Matrix4();
viewMatrix.setPerspective(30, 1, 1, 100);
viewMatrix.setLookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
var u_viewMatrix = gl.getUniformLocation(program, "u_viewMatrix");
gl.uniformMatrix4fv(u_viewMatrix, false, viewMatrix.elements);
//透视变换
var projMatrix = new Matrix4();
projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
var u_projMatrix = gl.getUniformLocation(program, "u_projMatrix");
gl.uniformMatrix4fv(u_projMatrix, false, projMatrix.elements);
//图形偏移
var modelMatrix = new Matrix4();
modelMatrix.setTranslate(0, 0, 0);
var u_modelMatrix = gl.getUniformLocation(program, "u_modelMatrix");
gl.uniformMatrix4fv(u_modelMatrix, false, modelMatrix.elements);
//索引缓冲区
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
var n = indices.length;
//点光源位置
var u_lightPosition = gl.getUniformLocation(program, "u_lightPosition");
gl.uniform3f(u_lightPosition, 0.0, 3.0, 5.0);
//光线颜色
var u_lightColor = gl.getUniformLocation(program, "u_lightColor");
gl.uniform3f(u_lightColor, 1.0, 1.0, 1.0);
//环境光
var u_ambientLight = gl.getUniformLocation(program, "u_ambientLight");
gl.uniform3f(u_ambientLight, 0.2, 0.2, 0.2);
// Write the vertex property to buffers (coordinates, colors and normals)
initArrayBuffer(gl, 'a_position', vertices, 3, gl.FLOAT);
initArrayBuffer(gl, 'a_color', colors, 3, gl.FLOAT);
initArrayBuffer(gl, 'a_normal', normals, 3, gl.FLOAT);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
function initArrayBuffer(gl, attribute, data, num, type) {
var buffer = gl.createBuffer();
if (!buffer) {
console.log('Failed to create the buffer object');
return false;
}
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
var a_attribute = gl.getAttribLocation(program, attribute);
if (a_attribute < 0) {
console.log('Failed to get the storage location of ' + attribute);
return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
gl.enableVertexAttribArray(a_attribute);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return true;
}
</script>
</body>
逐片元计算代码：
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script id="vertex" type="text/v-shader">
precision mediump float;
attribute vec4 a_position;
attribute vec4 a_color;
attribute vec4 a_normal;
uniform mat4 u_viewMatrix;
uniform mat4 u_projMatrix;
uniform mat4 u_modelMatrix;
varying vec4 v_position;
varying vec4 v_normal;
varying vec4 v_color;
void main(){
gl_Position = u_projMatrix * u_viewMatrix * u_modelMatrix * a_position;
v_position = gl_Position;
v_normal = a_normal;
v_color = a_color;
}
</script>
<script id="fragment" type="text/f-shader">
#ifdef GL_ES
precision mediump float;
#endif
uniform vec3 u_lightColor;
uniform vec3 u_lightPosition;
uniform vec3 u_ambientLight;
varying vec4 v_position;
varying vec4 v_normal;
varying vec4 v_color;
void main(){
vec3 normal = normalize(v_normal.xyz);
vec3 lightDirection = normalize(u_lightPosition - vec3(v_position));
float nDotlL = max(dot(lightDirection, normal), 0.0);
vec3 diffuse = u_lightColor * v_color.rgb * nDotlL;
vec3 ambient = u_ambientLight * v_color.rgb;
gl_FragColor = vec4(diffuse + ambient, v_color.a);
}
</script>
<script>
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var vertex = gl.createShader(gl.VERTEX_SHADER);
var fragment = gl.createShader(gl.FRAGMENT_SHADER);
var program = gl.createProgram();
gl.shaderSource(vertex, document.getElementById("vertex").text);
gl.shaderSource(fragment, document.getElementById("fragment").text);
gl.compileShader(vertex);
gl.compileShader(fragment);
// 错误检测
if (!gl.getShaderParameter(vertex, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(vertex));
}
if (!gl.getShaderParameter(fragment, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(fragment));
}
//链接程序
gl.attachShader(program, vertex);
gl.attachShader(program, fragment);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(program);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//开启深度检测
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var vertices = new Float32Array([ // Coordinates
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
]);
var colors = new Float32Array([ // Colors
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // v4-v7-v6-v5 back
]);
var normals = new Float32Array([ // Normal
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back
]);
var indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9, 10, 8, 10, 11, // up
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // down
20, 21, 22, 20, 22, 23 // back
]);
//视点位置
var viewMatrix = new Matrix4();
viewMatrix.setPerspective(30, 1, 1, 100);
viewMatrix.setLookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
var u_viewMatrix = gl.getUniformLocation(program, "u_viewMatrix");
gl.uniformMatrix4fv(u_viewMatrix, false, viewMatrix.elements);
//透视变换
var projMatrix = new Matrix4();
projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
var u_projMatrix = gl.getUniformLocation(program, "u_projMatrix");
gl.uniformMatrix4fv(u_projMatrix, false, projMatrix.elements);
//图形偏移
var modelMatrix = new Matrix4();
modelMatrix.setTranslate(0, 0, 0);
var u_modelMatrix = gl.getUniformLocation(program, "u_modelMatrix");
gl.uniformMatrix4fv(u_modelMatrix, false, modelMatrix.elements);
//索引缓冲区
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
var n = indices.length;
//点光源位置
var u_lightPosition = gl.getUniformLocation(program, "u_lightPosition");
gl.uniform3f(u_lightPosition, 0.0, 4.0, 6.0);
//光线颜色
var u_lightColor = gl.getUniformLocation(program, "u_lightColor");
gl.uniform3f(u_lightColor, 1.0, 1.0, 1.0);
//环境光
var u_ambientLight = gl.getUniformLocation(program, "u_ambientLight");
gl.uniform3f(u_ambientLight, 0.2, 0.2, 0.2);
// Write the vertex property to buffers (coordinates, colors and normals)
initArrayBuffer(gl, 'a_position', vertices, 3, gl.FLOAT);
initArrayBuffer(gl, 'a_color', colors, 3, gl.FLOAT);
initArrayBuffer(gl, 'a_normal', normals, 3, gl.FLOAT);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
function initArrayBuffer(gl, attribute, data, num, type) {
var buffer = gl.createBuffer();
if (!buffer) {
console.log('Failed to create the buffer object');
return false;
}
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
var a_attribute = gl.getAttribLocation(program, attribute);
if (a_attribute < 0) {
console.log('Failed to get the storage location of ' + attribute);
return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
gl.enableVertexAttribArray(a_attribute);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return true;
}
</script>
</body>
网友评论