Open code, practice, and notes →
Download source with English comments · for reading
14 · Interactive shader review
Week 2 / original Day 14 · Document and example provided · This is a learning sequence, not a fixed daily workload.
Full roadmap · Workspace usage
Goal
Complete and explain a small effect that connects UI input to uniforms.
Prerequisites
08~13, React input events.
Key concepts and explanations
Validate UI slider values in JavaScript before passing them to uniforms. The numbers shown in the UI must match the actual shader values; creating the UI alone does not mean the effect is implemented.
Exposing too many variables in one effect makes causes hard to track. Start with just amplitude, speed, and pause, and produce reproducible results that include errors, resizing, and cleanup.
Skills you will develop
- Complete and explain a small effect that connects UI input to uniforms.
- Reproduce the completion criteria below and answer the self-check questions in your own words.
Exercises
- Connect amplitude and speed inputs and pause to the wave.
- Compare UI values and actual results at minimum, default, and maximum values.
- Write a short demonstration sequence, explain the code, and summarize results that differed from your predictions.
Variables to observe
Amplitude, speed, viewport. Keep the default geometry and camera fixed.
Completion criteria
- Input changes reach the uniforms and the scene.
- Checked resizing and cleanup behavior.
- Can explain the effect's data flow.
Self-check questions
- Which path would you check if the UI number changes but the scene does not?
- What do you gain by reducing experimental variables?
Official references
Experiment notes — fill these in yourself
Goal
Key concepts
Changed variables and predictions
Actual results
What I learned
Remaining questions
Previous: ShaderMaterial integration · Next: Comparing NeRF and 3DGS
Linked example and execution scope
Runnable source code · Workspace unit ID: 14-shader-review
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.