Three.js provides a number of built-in attributes you can use within your vertex and fragment shaders.
If you're using a BufferGeometry
object for your mesh, you'll have access to the following within your vertex shader:
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
The position
attribute represents a vertex's position within a BufferGeometry
. For example, if we were to log the contents of position
, we'd get something like vec3(0.3, 0.2, 0.0)
—the first argument represents the vertex's X
position in 3D space, the second represents the Y
position, and the third the Z
position.
One of the nice things about GLSL is that you can insert position
, a type of vec3
, directly into a vec4
, and it will fill up the first three values automatically.
Replace the first three values of the vec4
below with the position
attribute passed through to us automatically by Three.js.