Question

我在网上找到了这个节目。每次用户点击鼠标时，如何修改以下程序来创建圆圈？这样可以创建多个圆圈？我是webgl的新手，我很失落，非常感谢你的帮助

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body onload="onLoad()">
        <script id="vertex-shader" type="x-shader/x-vertex">
    uniform vec2 u_resolution;
    attribute vec2 a_position;

    void main(void) {
      vec2 clipspace = a_position / u_resolution * 2.0 - 1.0;
      gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);
    }

</script>

<script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    void main(void) {
        gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
    }
</script>
<script>
    function onLoad () {
   var canvas = document.getElementById("canvas");
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");//   
            //gl.viewport(0, 0, canvas.width, canvas.height);
            gl.clearColor(0.8, 0.0, 0.3, 1.0);//
            gl.clear(gl.COLOR_BUFFER_BIT);//

        
            var v = document.getElementById("vertex-shader").firstChild.nodeValue;//
            var f = document.getElementById("fragment-shader").firstChild.nodeValue;//

            var vs = gl.createShader(gl.VERTEX_SHADER);//
            gl.shaderSource(vs, v);//
            gl.compileShader(vs);//

            var fs = gl.createShader(gl.FRAGMENT_SHADER);//
            gl.shaderSource(fs, f);//
            gl.compileShader(fs);//

            var program = gl.createProgram();//
            gl.attachShader(program, vs);//
            gl.attachShader(program, fs);//
            gl.linkProgram(program);//
            
            gl.useProgram(program);

    var circle = {x: 50, y: 50, r: 15};
    var ATTRIBUTES = 2;
    var numFans = 16;
    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+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);
  }
onLoad();
</script>

<canvas id="canvas" style="border: none;" width="300" height="150"></canvas>
    </body>
</html>

感谢

Answer 1

我推荐一些像http://webglfundamentals.org

这样的webgl教程

Here's an article on drawing multiple things

但特别是WebGL只是一个光栅化库。它没有直接的圆圈概念。如果你想绘制多个圆圈，你需要决定你想要如何表示你的圆圈（纹理，点，一些花哨的着色器），然后你想要如何绘制它们（每个圆圈一次绘制调用，每个四边形一个圆圈，多个圆圈）每次打电话）。它取决于你。

即使您在那里发布的代码也有太多选择。该代码绘制了一个圆圈。围绕绘制一个圆的代码循环，它将绘制N个圆。另一方面，您还可以生成一个圆圈use various matrix transforms to scale and position it

点击鼠标即可添加多个问题。

默认情况下，画布在WebGL的每一帧都被清除。因此，您绘制用户单击鼠标的位置，但下次绘制前一个圆圈时将被删除。

最简单的解决方案，告诉webgl不要用

清除画布

gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });

但这通常不是一个好的解决方案，因为如果你想调整画布的大小，它会在你调整大小时被清除。

相反，您需要保留所有鼠标点击的列表，然后每次为每次点击画一个圆圈。但是这会带来一个新问题，因为在点击次数太多之后它会变得太慢。这意味着您需要组合上述两件事。

不要清除画布，只需在点击时绘制新的圆圈，如果需要在调整大小后调整画布大小，则绘制所有旧圆圈。

正如你所看到的那样，它听起来比一个更大的主题。

Answer 2

答案是：当然可以有多个圈子。

但您可以从像http://learningwebgl.com/blog/?p=28这样的简单教程开始。在了解基础知识后，您可以更改结构以便轻松绘制多个圆圈。

用鼠标点击创建一个带webgl的圆圈

2 个答案: