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

i have seen demos on webgl that

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

what not understand how combine these effects single program, , how interact objects change look.

suppose want create scene above, , have ability change color of rectangle, or change texture.

i trying understand organization of code. here short, related questions:

1. i can create vertex buffer corresponding color buffer. can have rectangles texture , without?
2. if not, have create 1 vertex buffer objects colors, , textures. can attach different texture each rectangle in vector?

3. for case rectangles colors, , others textures, requires 2 different shader programs. demos see have one, more complicated programs have multiple. how switch between shaders?

4. how draw wireframe on , off? can combined textures? in other words, possible write shader can turn features wireframe on , off flag, or take 2 different calls 2 different shaders?

5. all demos have seen use index buffer triangles. quads no longer supported in webgl? things triangles needed, if have bunch of rectangles nice not have create index of triangles.

for 3 of above scenarios, if want change points, color, texture, or transparency, correct in understanding glsubbuffer allow replacing data in buffer new data.

is reasonable have single object maintaining these kinds of objects , updating color , textures, or not design?

the question ask not webgl, opengl , 3d.

the used way interact setting attributes @ start , uniforms @ start , on run.

in general, answer of questions "use engine".

imagine have javascript, cpu based lang, have webgl, library of stuff js allows low level comunication gpu (remember, low level), , have shader gpu program must provide, works specific data.

do more "simple" requires tool, allow skip using webgl directly (and write shaders directly). tool call engine. engine binds set of abilities , skips others (difference betwen 2d , 3d engine example). engine functions call webgl preset functions specific order, you must not ever touch webgl api again. engine provides complicated logic build single pair, or few pairs of shaders, based on few simple engine api calls. reason during entire program, swapping shader program cost heavy.

your questions

i can create vertex buffer corresponding color buffer. can have rectangles texture , without? if not, have create 1 vertex buffer objects colors, , textures. can attach different texture each rectangle in vector?

lets have buffer, call vertex buffer. put various data in vertex buffer. data doesnt go individuals, sets. each unique data in set, call attribute. attribute can has meaning vertex vertex shader or fragment shader code decides.

if have buffer full of data triangles, possible set example attribute says if specific vertex should texture triangle or not , texturing logic in shader. anyway think data size of attributes each vertex must equal (so textured triangles eat same size nontextured).

for case rectangles colors, , others textures, requires 2 different shader programs. demos see have one, more complicated programs have multiple. how switch between shaders?

not true, complicated programs might have 1 pair of shaders (one webgl program). still possible change program on run:

https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.9 webgl api function useprogram

how draw wireframe on , off? can combined textures? in other words, possible write shader can turn features wireframe on , off flag, or take 2 different calls 2 different shaders?

webgl api allows draw in wireframe mode. shader program independent option. can switch each draw call. anyway possible write shader draw wireframe , control flag (flag might both, uniform or attribute based).

all demos have seen use index buffer triangles. quads no longer supported in webgl? things triangles needed, if have bunch of rectangles nice not have create index of triangles.

webgl supports quads , triangles. guess because without quads, shaders more simple.

for 3 of above scenarios, if want change points, color, texture, or transparency, correct in understanding glsubbuffer allow replacing data in buffer new data.

i rare update buffer data on run. slows program lot. glsubbuffer not in webgl (different name???). anyway dont use ;)

is reasonable have single object maintaining these kinds of objects , updating color , textures, or not design?

yes, called scene graph , used , might combined other techniques display list.