Try to use createVertices()
to move the coords
attribute: Plunkr live code:
Question: how can I move my gl_Position with an attribute?
It works when I manually set the vec4
value:
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);
}
But when I add an attribute
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;
}
`;
Please review Plunkr live code to see complete working code.