/en/tags/fragment/Recent content in Fragment on Feynman's BlogHugoen-USSat, 15 Aug 2026 12:00:00 +0800/en/posts/threejs-glsl/Sat, 15 Aug 2026 12:00:00 +0800/en/posts/threejs-glsl/<blockquote class="blockquote-regular"> <p>The first 9 lessons all used Three.js built-in materials (MeshStandardMaterial, MeshBasicMaterial&hellip;). This lesson starts writing custom shaders — talking to the GPU directly with GLSL, so gradients, waves, and Fresnel effects are generated entirely by code instead of built-in material presets.</p> </blockquote> <p><img src="/images/2026-07-07_series_threejs-creation-diary/10_glsl/demo.png" alt="Demo: GLSL basics (gradient sphere, Fresnel rim-glow sphere, Raw sphere, wave floor, live parameter panel)"></p> <h2 id="01-learning-objectives">01 Learning Objectives</h2> <p>This lesson focuses on GLSL shader programming fundamentals:</p> <ul> <li>Understand the structure and execution flow of Vertex / Fragment Shaders</li> <li>Master the roles of <code>gl_Position</code> / <code>gl_FragColor</code></li> <li>Distinguish the three variable types: <code>attribute</code> / <code>uniform</code> / <code>varying</code></li> <li>Understand <code>ShaderMaterial</code> vs <code>RawShaderMaterial</code></li> <li>Master coordinate transformations (model → world → view → clip)</li> </ul> <h2 id="02-glsl-basic-syntax">02 GLSL Basic Syntax</h2> <p>GLSL is a C-style shading language, slightly different from JS/TS. First, the most common &ldquo;parts&rdquo;.</p>