Question

我无法理解我做错了什么，我的想法会打击我只是将值推到列表中，并希望使用此列表绘制点，如顶点（0）= x，顶点（1）= y以及如果我有多点像该怎么办顶点（0）= x1，顶点（1）= y1，顶点（2）= x2，顶点（3）= y2（约600点）？

var VSHADER_SOURCE =
  'attribute vec4 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 get the rendering context for WebGL');
    return;}
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.'); return;  }
  var n = initVertexBuffers(gl);
  if (n < 0) {console.log('Failed to set the positions of the vertices');
    return;}
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, n);
}
var vertices =  [];
function initVertexBuffers(gl) {vertices.push(0.1);vertices.push(0.3);
   var n = vertices.length/2; var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) { console.log('Failed to create the buffer object');
    return -1; }
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  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; }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);  return n; }

并提交

initVertexBuffers
function initShaders(gl, vshader, fshader) {
  var program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.log('Failed to create program');
    return false;
  } gl.useProgram(program);gl.program = program;return true; }
function createProgram(gl, vshader, fshader) {
  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  if (!vertexShader || !fragmentShader) { return null;}
  var program = gl.createProgram();
  if (!program) {return null;}
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    var error = gl.getProgramInfoLog(program);
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  } return program;}
 function loadShader(gl, type, source) {
  var shader = gl.createShader(type);
  if (shader == null) {console.log('unable to create shader');
    return null;}
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {var error = gl.getShaderInfoLog(shader);
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader);return null;}return shader;}
  function getWebGLContext(canvas, opt_debug) {
  var gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) return null;
  if (arguments.length < 2 || opt_debug) {
    gl = WebGLDebugUtils.makeDebugContext(gl);
  } return gl; }

Answer 1

瞥一眼这段代码

var vertices =  [];
function initVertexBuffers(gl) {
   vertices.push(0.1);
   vertices.push(0.3);
   var n = vertices.length/2; 
   var vertexBuffer = gl.createBuffer();
   if (!vertexBuffer) { 
     console.log('Failed to create the buffer object');
     return -1; 
   }
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

不起作用，因为gl.bufferData不接受JavaScript本机数组。它只需要typed arrays。

你可能想要这个

   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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 n = initVertexBuffers(gl);
  if (n < 0) {console.log('Failed to set the positions of the vertices');
    return;}
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, n);
}

var vertices =  [];
function initVertexBuffers(gl) {
   vertices.push(0.1);
   vertices.push(0.3);
   var n = vertices.length/2; 
   var vertexBuffer = gl.createBuffer();
   if (!vertexBuffer) { 
     console.log('Failed to create the buffer object');
     return -1; 
  }
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  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; 
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);  
  return n;
}

// 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();

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

为什么不是WebGL绘图点？

1 个答案: