Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 12.2 — Uniforms, Attributes and Varyings
3D Web · Example 1 of 3

What ShaderMaterial adds, and what Raw does not

Left: ShaderMaterial. Right: RawShaderMaterial with the declarations written by hand. The counts come from the linked programs.

Data reaches a shader in three ways: uniforms (one value for the whole draw), attributes (one per vertex) and varyings (vertex outputs blended into fragment inputs). ShaderMaterial adds helpers, RawShaderMaterial adds nothing.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 5 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Add a uniform uTint (vec3) to the first example's ShaderMaterial and multiply the fragment colour by it.

02

Why can an attribute not be read in a fragment shader, and how do you get its value there?

Explain it without notes

01

Which door would you use to send (a) the time, (b) a colour per vertex, (c) the blended colour to the fragment shader?

02

Why does nothing happen when you write uniforms.uTimee = { value: 1.5 } with a typo?

What ShaderMaterial adds, and what Raw does not
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

ShaderMaterial    69 lines before your code | declares: modelMatrix, modelViewMatrix, projectionMatrix, viewMatrix, normalMatrix, cameraPosition, position, normal, uv
RawShaderMaterial 7 lines before your code | declares: modelViewMatrix, projectionMatrix, position