javascript - 当我将位置传递给具有属性的着色器时，gl_Position 不会移动顶点吗？

Question

尝试使用 createVertices() 移动 coords 属性:Plunkr live code:

问题:如何使用属性移动我的 gl_Position？

当我手动设置 vec4 值时它起作用了:

let gl;
let shaderProgram;

initGl();
createShaders();
draw();

function initGl() {
  const canvas = document.getElementById('canvas');
  gl = canvas.getContext('webgl');
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1, 0, 1, 1);
}

function createShaders() {
  // Think of this as a point in 3d space.
  const vs = `
    void main(void) {
      gl_Position = vec4(0.5, 0, 0, 1.0); 
      gl_PointSize = 10.0;
    }
   `; // !!!!!!!!!! this will offset the pixel by 

  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vs);
  gl.compileShader(vertexShader);
  // Think of this as a fragment.
  const fs = `
     void main(void) {
       gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
     }
   `;
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fs);
  gl.compileShader(fragmentShader);
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  gl.useProgram(shaderProgram);
}


function draw() {
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);
}

但是当我添加一个属性时

function createVertices() {
  const coords = gl.getAttribLocation(shaderProgram, "coords");
  gl.vertexAttrib3f(coords, 0.5, 0, 0); // will not work

  const pointSize = gl.getAttribLocation(shaderProgram, "pointSize");
  gl.vertexAttrib1f(pointSize, 100); // works
}

const vs = `
    attribute vec4 coords;
    attribute float pointSize;
    void main(void) {
      gl_Position = coords;
      gl_PointSize = pointSize;
    }
  `;

请查看Plunkr live code查看完整的工作代码。

Answer 1

你必须 disableVertexAttribArray . enableVertexAttribArray启用或通用顶点属性数组和disableVertexAttribArray禁用通用顶点属性数组。
你没有顶点属性数组，但你有一个常量属性。

const coords = gl.getAttribLocation(shaderProgram, "coords");
const pointSize = gl.getAttribLocation(shaderProgram, "pointSize");

gl.disableVertexAttribArray(coords); 
gl.disableVertexAttribArray(pointSize);

gl.vertexAttrib3f(coords, 0.5, 0, 0);
gl.vertexAttrib1f(pointSize, 100);

另见:

• > Khronos WebGL specification - Enabled Vertex Attributes and Range Checking
• > WebGL - which API to use?
• > Is it important to call glDisableVertexAttribArray()?
• > When should I enable/disable vertex position attributes in WebGL/OpenGL?

示例:

var gl,
shaderProgram;

initGL();
createShaders();
createVertices();
draw();

function initGL() {
var canvas = document.getElementById("canvas");
console.log(canvas);
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1, 1, 1, 1);
}

function createShaders() {
var vs = "";
vs += "attribute vec4 coords;";
vs += "attribute float pointSize;";
vs += "void main(void) {";
vs += "  gl_Position = coords;";
vs += "  gl_PointSize = pointSize;";
vs += "}";

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vs);
gl.compileShader(vertexShader);

var fs = "";
fs += "precision mediump float;";
fs += "uniform vec4 color;";
fs += "void main(void) {";
fs += "  gl_FragColor = color;";
fs += "}";

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fs);
gl.compileShader(fragmentShader);

shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
}

function createVertices() {
var coords = gl.getAttribLocation(shaderProgram, "coords");
var pointSize = gl.getAttribLocation(shaderProgram, "pointSize");
gl.disableVertexAttribArray(coords); 
gl.disableVertexAttribArray(pointSize);
gl.vertexAttrib3f(coords, 0.0, 0.0, 0.0);
gl.vertexAttrib1f(pointSize, 100);
var color = gl.getUniformLocation(shaderProgram, "color");
gl.uniform4f(color, 1, 0, 1, 1);

}

function draw() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>
  <script src="lib/script.js"></script>
</body>
</html>