Open code, practice, and notes →
Download source with English comments · for reading
08 · Vertex·Fragment shader
Week 2 / original Day 8 · Document and example provided · This is a learning sequence, not a fixed daily workload.
Full roadmap · Workspace usage
Goal
Distinguish the inputs and outputs of the two shader stages.
Prerequisites
The week 1 scene, vector components, and coordinate transforms.
Key concepts and explanations
The vertex shader transforms vertices into clip space and outputs gl_Position. The fragment shader calculates colors and other values for rasterized fragments. A fragment does not necessarily remain on screen after depth testing and compositing.
Three.js ShaderMaterial provides inputs such as position, projectionMatrix, and modelViewMatrix. First write a minimal position transform and solid-color output to distinguish which stage has a problem.
Skills you will develop
- Distinguish the inputs and outputs of the two shader stages.
- Reproduce the completion criteria below and answer the self-check questions in your own words.
Exercises
- Create a local exercise that connects a plane and ShaderMaterial.
- Output projectionMatrix * modelViewMatrix * vec4(position,1.0) in the vertex stage and a solid color in the fragment stage.
- Compare the results of changing the position offset and color channels separately.
Variables to observe
Vertex position offset, output color. Keep the camera and time fixed.
Completion criteria
- Explained each shader's role and output.
- Wrote two minimal shaders.
- Recorded the difference between vertex and color changes.
Self-check questions
- Does changing the fragment color change the vertex count?
- Why is gl_Position a vec4?
Official references
Experiment notes — fill these in yourself
Goal
Key concepts
Changed variables and predictions
Actual results
What I learned
Remaining questions
Previous: Interactive scene review · Next: GLSL syntax and color
Linked example and execution scope
Runnable source code · Workspace unit ID: 08-shader-stages
Edit the linked source code in Monaco to apply it to the sandbox preview after checks. Perform the extension exercises and completion criteria yourself and record the results.
Any previously saved code is preserved. To use the new original source, first back up everything as a full JSON file, then select Restore original code. Your notes are not erased.