首页 > 代码库 > 着色器传值,控制点的位置和大小

着色器传值,控制点的位置和大小

function main(){
    var canvas = document.getElementById("webgl");
    var gl = getWebGLContext(canvas)
    if (!gl){
        console.log("Fail to get WebGL context");
        return;
    }else{
        ;
    }
    var VSHADER_SOURCE = function(){
        /*
         attribute vec4 a_Position;
         attribute float a_PointSize;
         void main(){
         gl_Position = a_Position;
         gl_PointSize = a_PointSize;
         }
         */
    }.toString().match(/\/\*([^]*)\*\//)[1];

    var FSHADER_SOURCE = function(){
        /*
         void main(){
         gl_FragColor = vec4(1.0,0.0,0.0,1.0);
         }
         */
    }.toString().match(/\/\*([^]*)\*\//)[1];

    if (!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
        console.log(‘Fail to init shaders‘);
        return;
    }
    var a_Position = gl.getAttribLocation(gl.program,"a_Position");
    if (a_Position < 0){
        console.log("Fail to get the storage location.");
        return;
    }
    var a_PointSize = gl.getAttribLocation(gl.program,"a_PointSize");
    if (a_PointSize < 0){
        console.log("Fail to get the storage location.");
        return;
    }
    gl.clearColor(0.0,0.0,0.0,0.8);
    gl.clear(gl.COLOR_BUFFER_BIT);

    for (var i=0;i<10;i++){
        gl.vertexAttrib3f(a_Position,(i+1)*0.1,(i+1)*0.1,0.0);
        gl.vertexAttrib1f(a_PointSize, Math.random()*10);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}

 技术分享

 

着色器传值,控制点的位置和大小