vertex values ​​and fragment shader in webgl

advertisements

I'm new to webgl.I was wondering how the vertex and fragment shader values are generated. I was seeing some samples and could see a huge array of these values.Couldnt figure out how these values are getting generated.Are there any tools to generate these values. Am I missing something? No tutorial was explaining on how to create these shader values. Any help in this is appreciated.


What you are most likely seeing is their vertex or index buffer information. These are typically stored as large arrays of floats or ints like so:

[1.0, 2.0, 3.0, 0.5, 0.5, 1.0, 0.0, 0.0]

This could, depending on the vertex layout represent, a position, texture coordinate, and normal for a single vertex, like so:

Position: (x: 1.0, y: 2.0, z: 3.0) Texcoord: (u: 0.5, v: 0.5) Normal: (x: 1.0, y: 0.0, z: 0.0)

And you'll usually get a whole bunch of them smashed together into one big long array. These are terribly difficult to read, but are usually generated by a modeling tool exporter and sent straight to the GPU so there's typically not much human interaction.

I did a little write up a while back about how you tell WebGL to interpret those values, but I'm not sure exactly how much you know about 3D Geometry so that might be a bit too high level. Some of the early Learning WebGL lessons cover it in a bit more detail:

Lesson 1, Lesson 2