1
00:00:01,200 --> 00:00:04,855
这一整片海、云和夕阳，没有用任何模型和贴图
This whole sea, the clouds, the sunset — no models, no textures,

2
00:00:04,855 --> 00:00:09,165
全部由一段 WebGL 着色器代码，实时计算出来
all computed in real time by a single WebGL shader.

3
00:00:09,165 --> 00:00:12,245
接下来，我们从一块空白画布开始
Let's start from a blank canvas and build it,

4
00:00:12,245 --> 00:00:14,132
一步一步把它搭出来
step by step.

5
00:00:16,532 --> 00:00:20,627
第一步，搭建三维空间。屏幕上的每个像素
Step one: a 3D space. Every pixel on screen fires

6
00:00:20,627 --> 00:00:22,832
都从相机发出一条射线
a ray out of the camera.

7
00:00:22,832 --> 00:00:27,052
把射线的方向直接画成颜色，就得到这幅渐变图
Paint each ray's direction as a color, and you get this gradient.

8
00:00:27,052 --> 00:00:31,277
再让射线和地平面求交，透视和地平线就出现了
Intersect the rays with a ground plane, and perspective and a horizon appear.

9
00:00:33,177 --> 00:00:37,512
第二步，生成地形。我们用分形噪声来描述高度
Step two: terrain. We describe height with fractal noise,

10
00:00:37,512 --> 00:00:42,067
每多叠加一层更细的噪声，山体就多一分细节
and every extra, finer octave adds another layer of detail.

11
00:00:42,067 --> 00:00:43,884
渲染时用光线步进
To draw it,

12
00:00:43,884 --> 00:00:48,267
沿着射线一小步一小步往前走，直到碰到地面
ray marching walks along each ray in small steps until it hits the ground.

13
00:00:49,167 --> 00:00:53,595
第三步，计算法线。在命中点周围取几个高度差
Step three: normals. A few height differences around the hit point tell

14
00:00:53,595 --> 00:00:55,757
就能估算出表面的朝向
us which way the surface faces.

15
00:00:55,757 --> 00:01:00,377
把法线画成彩色，每一面山坡的方向都清清楚楚
Drawn as colors, normals reveal the direction of every slope.

16
00:01:00,377 --> 00:01:04,143
再和太阳方向做点乘，山体立刻有了明暗
Dot them with the sun direction, and the mountains instantly gain light and shade.

17
00:01:05,043 --> 00:01:08,514
第四步，材质和阴影。按坡度和高度
Step four: materials and shadows.

18
00:01:08,514 --> 00:01:11,353
给地表分出岩石、草地和沙滩
Slope and height split the ground into rock, grass and sand.

19
00:01:11,353 --> 00:01:15,613
再朝太阳追踪一条阴影射线，得到柔和的软阴影
A shadow ray traced toward the sun gives soft shadows,

20
00:01:15,613 --> 00:01:19,225
最后加上天空的环境光，暗部也有了层次
and ambient light from the sky fills the darker areas.

21
00:01:20,125 --> 00:01:24,990
第五步，天空和大气。我们模拟瑞利散射和米氏散射
Step five: sky and atmosphere. We simulate Rayleigh and Mie scattering,

22
00:01:24,990 --> 00:01:29,385
所以天顶是蓝色的，靠近太阳的地方是金黄色
which is why the zenith is blue and the sky near the sun turns golden.

23
00:01:29,385 --> 00:01:33,845
远处的山再罩上一层大气雾，空间感一下就出来了
Wrap the distant mountains in aerial haze, and depth suddenly appears.

24
00:01:34,745 --> 00:01:37,697
第六步，水体。放一个水平面
Step six: water. Add a flat plane and let the sea rise —

25
00:01:37,697 --> 00:01:42,180
让海水慢慢涨上来，山谷就变成了海湾和岛屿
valleys turn into bays and islands.

26
00:01:42,180 --> 00:01:45,860
几层随时间流动的波浪，生成水面的法线
Layers of moving waves give the water surface its normals.

27
00:01:45,860 --> 00:01:49,452
再按水深计算光的吸收：浅滩发绿
Then light absorption by depth: shallows turn turquoise,

28
00:01:49,452 --> 00:01:52,580
深海发蓝，岸边泛起白色泡沫
deep water goes blue, and foam lines the shore.

29
00:01:54,480 --> 00:01:59,139
第七步，反射。用菲涅尔公式决定反射的强弱
Step seven: reflection. The Fresnel term sets its strength —

30
00:01:59,139 --> 00:02:01,980
越是贴着水面看，反射越强
the flatter the viewing angle, the stronger it gets.

31
00:02:01,980 --> 00:02:04,780
反射射线去追踪天空和山体
Reflected rays trace the sky and the mountains,

32
00:02:04,780 --> 00:02:08,103
再加上太阳的高光，海面就波光粼粼了
and with the sun's highlights, the sea begins to sparkle.

33
00:02:09,003 --> 00:02:12,479
第八步，体积云。在高空放一层云
Step eight: volumetric clouds. A cloud layer up high,

34
00:02:12,479 --> 00:02:15,058
用三维噪声描述云的密度
with 3D noise describing its density.

35
00:02:15,058 --> 00:02:17,601
射线穿过云层时累积密度
Rays accumulate density through the layer,

36
00:02:17,601 --> 00:02:21,693
再朝太阳方向采样，算出光被吸收了多少
and samples toward the sun measure how much light is absorbed.

37
00:02:21,693 --> 00:02:25,742
加上散射相位函数，云边亮起逆光的金边
A phase function adds glowing silver linings,

38
00:02:25,742 --> 00:02:27,602
地面也投下了云影
and the clouds cast shadows on the ground.

39
00:02:29,502 --> 00:02:31,286
最后一步，后期处理
Final step: post-processing.

40
00:02:31,286 --> 00:02:34,197
用 ACES 色调映射压住高光
ACES tone mapping tames the highlights,

41
00:02:34,197 --> 00:02:38,915
再加上泛光、调色和暗角，画面就从渲染图变成了照片
then bloom, color grading and a vignette turn a render into a photograph.

42
00:02:41,315 --> 00:02:44,436
从一条射线，到一整片海。九个步骤
From a single ray to an entire ocean — nine steps,

43
00:02:44,436 --> 00:02:46,990
全部在 GPU 上实时运行
all running live on the GPU.

44
00:02:46,990 --> 00:02:49,000
下一期，我们用同一个场景
Next time, we'll take this same scene

45
00:02:49,000 --> 00:02:52,456
换上像素、Low Poly 等风格化着色器
and swap in pixel art, low poly and other stylized shaders.