Webgl中的混合和剔除

时间:2014-02-11 19:10:10

标签: javascript 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);

    }

1 个答案:

答案 0 :(得分:0)

下面的着色器语句表示您正在编写Alpha = 1.0的像素,并且它是不透明的。

  
    

vColor = vec4(diffuseColor,1.0);

  

要使其透明,您需要将其设为非1.0值,可能是从纹理本身计算或传入的吗?

剔除与混合无关。它表示GL HW根据它们是正面还是背面丢弃某些图元的能力。