Question

我尝试使用Bezier绘制曲线，我尝试在void main()中完成所有操作并尝试使用缓冲区，但是到处都是错误的，我不会这样做了解哪里：

1）全部在main()

var VSHADER_SOURCE =
  'attribute vec2 a_Position;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '  gl_PointSize = 10.0;\n' +
  '}\n';
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
    '}\n';
  function main() {  
   var canvas = document.getElementById('webgl');  
   var gl = getWebGLContext(canvas);
        if (!gl) 
    { 
        console.log('Failed to retrieve the <canvas> element');
        return; 
    } 
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) 
      {
        console.log('Failed to intialize shaders.');
        return;
      }
    gl.clearColor(0.0, 0.0, 0.0, 0.0);
    gl.clear(gl.COLOR_BUFFER_BIT );
    w=(192*4);
    d=(w/1920);
    x=0.8;
    y=0.9
  var M = new Float32Array([-x,-y,-x+d,y,-x+2*d,-y,-x+3*d,y,-x+4*d,-y,]);
  var vertices=[]; 
for (var i=0;i<6;i+=2)
    {
        for (var t=0 ;t<1;t+=0.01)
        {
        vertices.push((1-t)^2*M(i)+2*(1-t)*t*M(i+2)+t^2*M(i+4));
        vertices.push((1-t)^2*M(i+1)+2*(1-t)*t*M(i+3)+t^2*M(i+5));
        }
    }
       var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        if (a_Position < 0) 
       {
       console.log('Failed to get the storage location of a_Position');
       return -1;
       }
         for(var l = 0; l < lenght(nx)/2-1; l+=1) 
         {                
          gl.vertexAttrib2f(a_Position, vertices[l], vertices[l+1]); 
          gl.drawArrays(gl.POINTS, 0, 1);
         }
        gl.enableVertexAttribArray(a_Position);
}

第二种方法我不能写，因为空间有限。

Answer 1

您是否自己尝试过调试？喜欢open the JavaScript console and look for errors？

您发布的代码无法远程运行。

首先关闭着色器

attribute vec2 a_Position;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;
}

不会编译，你的框架（或任何你称之为initShaders的）应该打印出gl_Position (a vec4) can not be assigned by a_Position, a vec2的错误。将a_Position更改为vec4。

接下来是这些行

   vertices.push((1-t)^2*M(i)+2*(1-t)*t*M(i+2)+t^2*M(i+4));
   vertices.push((1-t)^2*M(i+1)+2*(1-t)*t*M(i+3)+t^2*M(i+5));

M不是一个功能。我猜你打算使用M[expression]而不是M(expression)

   vertices.push((1-t)^2*M[i]+2*(1-t)*t*M[i+2]+t^2*M[i+4]);
   vertices.push((1-t)^2*M[i+1]+2*(1-t)*t*M[i+3]+t^2*M[i+5]);

^不是JavaScript it's the bitwise xor operator中对幂运算符的加注。要将数字提升为幂，请使用Math.pow。所以你可能想要这个

  vertices.push(Math.pow(1-t,2)*M[i]+2*(1-t)*t*M[i+2]+Math.pow(t,2)*M[i+4]);
  vertices.push(Math.pow(1-t,2)*M[i+1]+2*(1-t)*t*M[i+3]+Math.pow(t,2)*M[i+5]);

然后这一行

    for(var l = 0; l < lenght(nx)/2-1; l+=1)

JavaScript中没有函数lenght也没有函数length也没有声明名为nx的变量

好像你想要

    for(var l = 0; l < vertices.length; l += 2)

您可能还希望使用multiline template literals作为着色器，而initShader函数编写得非常糟糕，因为查看您的代码时，您需要gl.program访问gl.enableVertexAttribArray(a_Position);不是一件事。

在你发布的代码的最后，你有这一行

gl.drawArrays

但是，如果您为数据使用缓冲区，则该行才有意义。你没有。您反而一次绘制一个点。您应该使用缓冲区，因为它比为每个点调用var VSHADER_SOURCE = ` attribute vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; } `; var FSHADER_SOURCE = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; function main() { var canvas = document.getElementById('webgl'); var gl = canvas.getContext("webgl"); if (!gl) { console.log('Failed to retrieve the <canvas> element'); return; } if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } gl.clearColor(0.0, 0.0, 0.0, 0.0); gl.clear(gl.COLOR_BUFFER_BIT); var w=(192*4); var d=(w/1920); var x=0.8; var y=0.9; var M = new Float32Array([-x,-y,-x+d,y,-x+2*d,-y,-x+3*d,y,-x+4*d,-y,]); var vertices=[]; for (var i=0;i<6;i+=2) { for (var t=0;t<1;t+=0.01) { vertices.push(Math.pow(1-t,2)*M[i]+2*(1-t)*t*M[i+2]+Math.pow(t,2)*M[i+4]); vertices.push(Math.pow(1-t,2)*M[i+1]+2*(1-t)*t*M[i+3]+Math.pow(t,2)*M[i+5]); } } var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); if (a_Position < 0) { console.log('Failed to get the storage location of a_Position'); return -1; } for(var l = 0; l < vertices.length; l+=2) { gl.vertexAttrib2f(a_Position, vertices[l], vertices[l+1]); gl.drawArrays(gl.POINTS, 0, 1); } } // THIS IS A POORLY WRITTEN FUNCTION!!!! // Normal WebGL pages use multiple shader programs // therefore you should **NEVER** assign values to // the gl object!!! function initShaders(gl, vsrc, fsrc) { gl.program = twgl.createProgram(gl, [vsrc, fsrc]); gl.useProgram(gl.program); return !!gl.program; } main();一次快得多

我可以建议一些other WebGL tutorials吗？

这是工作吗？版。

＆＃13;

canvas { width: 384px; height: 216px; }

＆＃13;

<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<canvas id="webgl" width="1920" height="1080"></canvas>

＆＃13;

src

＆＃13;

WebGL试图绘制多个点

1 个答案: