WebGL: How to interact between javascript and shaders, and how to use multiple shaders

Question

I have seen demos on WebGL that

1. color rectangular surface
2. attach textures to the rectangles
3. draw wireframes
4. have semitransparent textures

What I do not understand is how to combine these effects into a single program, and how to interact with objects to change their look.

Suppose I want to create a scene with all the above, and have the ability to change the color of any rectangle, or change the texture.

I am trying to understand the organization of the code. Here are some short, related questions:

1. I can create a vertex buffer with corresponding color buffer. Can I have some rectangles with texture and some without?
2. If not, I have to create one vertex buffer for all objects with colors, and another with textures. Can I attach a different texture to each rectangle in a vector?

3. For a case with some rectangles with colors, and others with textures, it requires two different shader programs. All the demos I see have only one, but clearly more complicated programs have multiple. How do you switch between shaders?

4. How to draw wireframe on and off? Can it be combined with textures? In other words, is it possible to write a shader that can turn features like wireframe on and off with a flag, or does it take two different calls to two different shaders?

5. All the demos I have seen use an index buffer with triangles. Is Quads no longer supported in WebGL? Obviously for some things triangles would be needed, but if I have a bunch of rectangles it would be nice not to have to create an index of triangles.

For all three of the above scenarios, if I want to change the points, the color, the texture, or the transparency, am I correct in understanding the glSubBuffer will allow replacing data currently in the buffer with new data.

Is it reasonable to have a single object maintaining these kinds of objects and updating color and textures, or is this not a good design?

Answer 1

The question you ask is not just about WebGL, but also about OpenGL and 3D.

The most used way to interact is setting attributes at the start and uniforms at the start and on the run.

In general, answer to all of your questions is "use engine".

Imagine it like you have javascript, CPU based lang, then you have WebGL, which is like a library of stuff for JS that allows low level comunication with GPU (remember, low level), and then you have shader which is GPU program you must provide, but it works only with specific data.

Do anything that is more then "simple" requires a tool, that will allow you to skip using WebGL directly (and very often also write shaders directly). The tool we call engine. Engine usually binds together some set of abilities and skips the others (difference betwen 2D and 3D engine for example). Engine functions call some WebGL preset functions with specific order, so you must not ever touch WebGL API again. Engine also provides very complicated logic to build only single pair, or few pairs of shaders, based just on few simple engine api calls. The reason is that during entire program, swapping shader program cost is heavy.

Your questions

I can create a vertex buffer with corresponding color buffer. Can I have some rectangles with texture and some without? If not, I have to create one vertex buffer for all objects with colors, and another with textures. Can I attach a different texture to each rectangle in a vector?

Lets have a buffer, we call vertex buffer. We put various data in vertex buffer. Data doesnt go as individuals, but as sets. Each unique data in set, we call attribute. The attribute can has any meaning for its vertex that vertex shader or fragment shader code decides.

If we have buffer full of data for triangles, it is possible to set for example attribute that says if specific vertex should texture the triangle or not and do the texturing logic in the shader. Anyway I think that data size of attributes for each vertex must be equal (so the textured triangles will eat same size as nontextured).

For a case with some rectangles with colors, and others with textures, it requires two different shader programs. All the demos I see have only one, but clearly more complicated programs have multiple. How do you switch between shaders?

Not true, even very complicated programs might have only one pair of shaders (one WebGL program). But still it is possible to change program on the run:

https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.9 WebGL API function useProgram

How to draw wireframe on and off? Can it be combined with textures? In other words, is it possible to write a shader that can turn features like wireframe on and off with a flag, or does it take two different calls to two different shaders?

WebGL API allows to draw in wireframe mode. It is shader program independent option. You can switch it with each draw call. Anyway it is also possible to write shader that will draw as wireframe and control it with flag (flag might be both, uniform or attribute based).

All the demos I have seen use an index buffer with triangles. Is Quads no longer supported in WebGL? Obviously for some things triangles would be needed, but if I have a bunch of rectangles it would be nice not to have to create an index of triangles.

WebGL supports only Quads and triangles. I guess it is because without quads, shaders are more simple.

For all three of the above scenarios, if I want to change the points, the color, the texture, or the transparency, am I correct in understanding the glSubBuffer will allow replacing data currently in the buffer with new data.

I would say it is rare to update buffer data on the run. It slows a program a lot. glSubBuffer is not in WebGL (different name???). Anyway dont use it ;)

Is it reasonable to have a single object maintaining these kinds of objects and updating color and textures, or is this not a good design?

Yes, it is called Scene graph and is widely used and might be also combined with other techniques like display list.