0
嗨，我實際上沒有在這裏剔除部分？有人可以解釋爲什麼我的對象不混合？我需要應用在物體上加上照明Webgl中的混合和剔除
下面勾兌是我的腳本
頂點着色器的代碼：
<script type="x-shader/x-vertex" id="vshader">
attribute vec3 aPosition;
attribute vec4 aColor;
uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProjection;
varying vec4 vColor;
attribute vec3 aNormal;
uniform mat4 uNormal;
uniform vec3 uLightDiffuse;
uniform vec3 uLightDirection;
void main() {
gl_Position = uProjection * uView * uModel * vec4(aPosition,1.0);
float lambertCoefficient = max(dot(-normalize(uLightDirection),normalize(vec3(uNormal * vec4(aNormal,1.0)))),0.0);
vec3 diffuseColor = uLightDiffuse * aColor.rgb * lambertCoefficient;
vColor = vec4(diffuseColor,1.0);
}
</script>
片段着色器
<script type="x-shader/x-fragment" id="fshader">
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
</script>
<script type="text/javascript" src="initUtils.js"></script>
<script type="text/javascript" src="gl-matrix-min.js"></script>
主要代碼：
<script>
function main() {
var canvas = document.getElementById("c");
var gl = initializeWebGL(canvas);
var vertexShader = initializeShader(gl,"vshader");
var fragmentShader = initializeShader(gl, "fshader");
var program = initializeProgram(gl,vertexShader,fragmentShader);
gl.useProgram(program);
var cube_vertices = [ // 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, //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, //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, //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, //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, //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 //back
];
//buffer creation
var cubeVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube_vertices), gl.STATIC_DRAW);
//attribute variable mapping to buffer
var aPosition = gl.getAttribLocation(program,"aPosition");
gl.vertexAttribPointer(aPosition,3,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aPosition);
//unbind buffer to ARRAY_BUFFER POINTER
gl.bindBuffer(gl.ARRAY_BUFFER, null);
var cube_color = [ // Coordinates
1.0,0.0,0.0,0.5, 1.0,0.0,0.0,0.5, 1.0,0.0,0.0,0.5, 1.0,0.0,0.0,0.5, //front red
0.0,1.0,0.0,0.5, 0.0,1.0,0.0,0.5, 0.0,1.0,0.0,0.5, 0.0,1.0,0.0,0.5, //right green
0.0,0.0,1.0,0.5, 0.0,0.0,1.0,0.5, 0.0,0.0,1.0,0.5, 0.0,0.0,1.0,0.5, //up blue
1.0,1.0,0.0,0.5, 1.0,1.0,0.0,0.5, 1.0,1.0,0.0,0.5, 1.0,1.0,0.0,0.5, //left yellow
0.0,1.0,1.0,0.5, 0.0,1.0,1.0,0.5, 0.0,1.0,1.0,0.5, 0.0,1.0,1.0,0.5, //down cyan
1.0,0.0,1.0,0.5, 1.0,0.0,1.0,0.5, 1.0,0.0,1.0,0.5, 1.0,0.0,1.0,0.5 //back magenta
];
//buffer creation
var cubeColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube_color), gl.STATIC_DRAW);
//attribute variable mapping to buffer
var aColor = gl.getAttribLocation(program,"aColor");
gl.vertexAttribPointer(aColor,4,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aColor);
//unbind buffer to ARRAY_BUFFER POINTER
gl.bindBuffer(gl.ARRAY_BUFFER, null);
var normals = [ // Normal of each vertex
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // 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, // 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, // 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, // 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, // 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 // back
];
//buffer creation
var normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
//attribute variable mapping to buffer
var aNormal = gl.getAttribLocation(program,"aNormal");
gl.vertexAttribPointer(aNormal,3,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(aNormal);
//unbind buffer to ARRAY_BUFFER POINTER
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// Indices of the vertices
var indices = [
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
];
//buffer creation
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
//unbind buffer to gl.ELEMENT_ARRAY_BUFFER POINTER
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
var modelMatrix = mat4.create();
var uModel = gl.getUniformLocation(program,"uModel");
gl.uniformMatrix4fv(uModel,false,modelMatrix);
//add normal matrix
var normalMatrix = mat4.create();
var uNormal = gl.getUniformLocation(program,"uNormal");
mat4.invert(normalMatrix,modelMatrix);
mat4.transpose(normalMatrix,normalMatrix);
gl.uniformMatrix4fv(uNormal,false,normalMatrix);
var viewMatrix = mat4.create();
var uView = gl.getUniformLocation(program,"uView");
mat4.lookAt(viewMatrix,[3,3,7],[0,0,0],[0,1,0]);
gl.uniformMatrix4fv(uView,false,viewMatrix);
var projectionMatrix = mat4.create();
var uProjection = gl.getUniformLocation(program,"uProjection");
mat4.perspective(projectionMatrix,glMatrix.toRadian(30),canvas.width/canvas.height,1,100);
gl.uniformMatrix4fv(uProjection,false,projectionMatrix);
var uLightDiffuse = gl.getUniformLocation(program,"uLightDiffuse");
gl.uniform3f(uLightDiffuse,1.0,1.0,1.0);
var uLightDirection= gl.getUniformLocation(program,"uLightDirection");
gl.uniform3f(uLightDirection,-1.0,-2.5,-5.0);
//draw scene
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.FRONT);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);
}