gl_Position не будет перемещать вершину, когда я передам позицию шейдеру с атрибутом?

Question

gl_Position не будет перемещать вершину, когда я передам позицию шейдеру с атрибутом?

Попробуй использовать createVertices() переместить coords атрибут: Plunkr живой код:

Вопрос: как я могу переместить мою 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, чтобы увидеть полный рабочий код.

1

javascript glsl shader webgl vertex-shader

Источник

user1191635 06 окт '17 в 01:52

1 ответ

Решение

Другие вопросы по тегам javascript glsl shader webgl vertex-shader

user5577765 06 окт '17 в 05:09 2017-10-06 05:09 · Accepted Answer · 2017-10-06 05:09

Ты должен 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);

Смотрите также:

Пример:

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>