Dynamically changing attribute values, does it require to create bufferinfo everytime

[Vadi]

Newbie to twgl here, in my use case position attribute changes let's say based on user mouse down event. For every click, we use mouse xy to set position attribute. Position is a vec2 attribute.

Currently i create bufferinfo once with initial xy values. How do i go about setting values after mouse clicks. Should be recreating buffer info?

All examples don't change position attributes

Any help is greatly appreciated

[greggman]

So first off, I want to emphasize, TWGL is not a replacement for WebGL, it's just a helper. TWGL doesn't do everything. For example TWGL has no functions for setting up blending, enabling depth test, working in stencils, etc. It's just a collection of functions to help.

If you want to update the buffer used by an attribute, there's an example here:
https://twgljs.org/examples/dynamic-buffers.html

If you have a value based attribute, first off, that's not common.

You can set it like this though

const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: [0.5, 0.5, 0],
  color: { value: [1, 0, 0, 1] },  // RED
});

gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
gl.drawArrays(gl.POINTS, 0, 1);

bufferInfo.attribs.color.value = [0, 1, 0, 1];  // GREEN     <=====------
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
gl.drawArrays(gl.POINTS, 0, 1);

Changing attribute values is not common. The entire point of attributes is to set them up to take values from a buffer. If you just want to pass a single value it's far more common to use a uniform. The only major use case for an attribute value is to feed in a constant to a vertex shader that normally expects different values per vertex.

Imagine you have a pair of shaders that draws with vertex colors

attribute vec4 position;
attribute vec4 color;
varying vec4 v_color;
void main() {
  gl_Position = position;
  v_color = color;
}

varying vec4 v_color;
void main() {
  gl_FragColor = v_color;
}

Then you have lots of different sets of geometry (vertices) that have positions and vertex colors. You decide you'd also like to use the same shader to draw vertices that have no vertex colors. In that case you could to off the attribute (gl.disableVertexAttribArray(colorAttribLocation) and set the attribute to a constant value gl.vertexAttrib4f(colorAttribLocation, [1, 0, 0, 1]); // red

Otherwise, if you're regularly passing in a constant value it's more common to use a uniform.

Further, the TWGL code above is wasteful. Calling twgl.setBuffersAndAttributes is going to set every attribute, even the ones that changed. If it was me I'd just set the attribute directly

gl.vertexAttrib4fv(programInfo.attribSetters.color.location, [0, 0, 1, 1]);

[Vadi]

Thanks for awesome and detailed response. And much thanks for creating twgl.

I'm surprised why you say it is not common to modify attrib values during render. For example -- how do you pass mouse co-ordinates? Let's say I'm drawing a rectangle based on mouse click XYs. How can it be set as uniforms.

Again, I really appreciate you taking time out.

[greggman]

in the shader

uniform vec2 mousePos;

In twgl

twgl.setUniforms(programInfo, {
  mousePos: [mouseX, mouseY],
});

Example: https://jsgist.org/?src=892518b84abbd92810a9ee75a6f03fda

[greggman]

Let my also point out, the most common way to move and orient what you're drawing is to pass in a matrix

This article (and the 3 it mentions you should have already read!!) tries to explain using matrices to position and orient things. That's the way most graphics programmers would do it because it's the most flexible.