Vertex Shader Challenge

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.

vertex.glsl

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.