Question

我是webgl的新手，此时我可以创建一个三角形和正方形。

我发现很难理解如何使用任何外部脚本或库创建一个圆圈。

Answer 1

    var vertexShaderText =
    [
    'uniform vec2 u_resolution;',
    '',
    'attribute vec2 a_position;',
    '',
    'void main()',
    '{',
    '',
    'vec2 clipspace = a_position / u_resolution * 1.0 ;',
    '',
    'gl_Position = vec4(clipspace * vec2(2.5, 2.0), 0, 1);',
    '}'
    ].join("\n");
    var fragmentShaderText =
    [
    'precision mediump float;',
    '',
    'void main(void)',
    '{',
    '',
    'gl_FragColor = vec4(0, 0, 0, 1.0);',
    '',
    '}'

    ].join("\n");
var uni = function(){
    var canvas = document.getElementById("game-surface");
    var gl = canvas.getContext("webgl");
    console.log("This is working");

    gl.clearColor(0.412,0.412,0.412,1);
    gl.clear(gl.COLOR_BUFFER_BIT);


    var vertextShader = gl.createShader(gl.VERTEX_SHADER);
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertextShader,vertexShaderText);
    gl.shaderSource(fragmentShader,fragmentShaderText);

    gl.compileShader(vertextShader);
    gl.compileShader(fragmentShader);

    if(!gl.getShaderParameter(vertextShader,gl.COMPILE_STATUS)){
        console.error("Error with vertexshader",gl.getShaderInfoLog(vertextShader));
        return;
    }
    if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)){
        console.error("Error with fragmentShader",gl.getShaderInfoLog(fragmentShader));
        return;
    }



    var program =gl.createProgram();
    gl.attachShader(program,vertextShader);
    gl.attachShader(program,fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    if(!gl.getProgramParameter(program,gl.LINK_STATUS)){
        console.error("Error linking program",gl.getProgramInfoLog(program));
        return;
    }
    gl.validateProgram(program);
    if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS)){
        console.error("Error validating",gl.getProgramInfoLog(program));
    }

    var circle = {x: 0, y:0, r: 75};
    var ATTRIBUTES = 2;
    var numFans = 64;
    var degreePerFan = (2* Math.PI) / numFans;
    var vertexData = [circle.x, circle.y];

    for(var i = 0; i <= numFans; i++) {
      var index = ATTRIBUTES * i + 2; // there is already 2 items in array
      var angle = degreePerFan * (i+0.1);
      vertexData[index] = circle.x + Math.cos(angle) * circle.r;
      vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
    }

    var vertexDataTyped = new Float32Array(vertexData);

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);

    var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
    gl.uniform2f(resolutionLocation, canvas.width, canvas.height);

    gl.enableVertexAttribArray(positionLocation);

    var positionLocation = gl.getAttribLocation(program, "a_position");
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
    gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);




};

Webgl Circle不使用extrernal库

1 个答案: