1
00:00:05,500 --> 00:00:08,673
这是第四话。今天换一种风格
Episode four. A change of style today:

2
00:00:08,673 --> 00:00:11,375
一座青色的江南烟雨山谷
a misty, blue-green Jiangnan valley.

3
00:00:11,375 --> 00:00:15,426
白墙黛瓦、石拱桥、山寺佛塔和云海
White walls, dark tiles, a stone bridge, a mountain temple and a sea of clouds,

4
00:00:15,426 --> 00:00:19,231
全部用立方体在浏览器里实时生成
all built live from cubes in the browser,

5
00:00:19,231 --> 00:00:23,220
没有一张图片，也没有一个外部模型
with no images and no external models.

6
00:00:23,220 --> 00:00:28,313
先看成品，再一步一步拆开，看看它是怎么做出来的
First the finished piece, then we take it apart step by step.

7
00:00:32,213 --> 00:00:36,456
第一步是构图。默认镜头不是沙盘式的俯视
Step one is composition. The default view is not a top-down diorama

8
00:00:36,456 --> 00:00:40,698
而是一台透视相机，站在河岸的岩石平台上
but a perspective camera standing on a rocky ledge above the river.

9
00:00:40,698 --> 00:00:43,706
前景是一株斜探向水面的古松
In the foreground an old pine leans out over the water;

10
00:00:43,706 --> 00:00:47,828
配上太湖石和石灯，在画面边缘形成框景
with a Taihu stone and a stone lantern it frames the edge of the picture.

11
00:00:47,828 --> 00:00:52,564
中景是一条蜿蜒的河，把视线引向石拱桥和村落
In the middle ground a winding river leads the eye to the bridge and the village;

12
00:00:52,564 --> 00:00:56,418
远景是层叠的山脉、山腰的寺庙和佛塔
in the distance, layered ranges, a hillside temple and a pagoda.

13
00:00:56,418 --> 00:01:01,153
远山不是简单地缩小，而是越远越高、越淡
Distant mountains are not just smaller: each range is taller and paler,

14
00:01:01,153 --> 00:01:03,703
被雾和云海一层层隔开
separated layer by layer by haze and a sea of clouds.

15
00:01:05,803 --> 00:01:09,778
地形是一张高度场：用噪声叠出山形
The terrain is a height field: noise builds the hills,

16
00:01:09,778 --> 00:01:15,198
沿河道挖出河床，再按零点二五米一层量化成体素
the river carves its bed, and heights are quantised into quarter-metre voxels.

17
00:01:15,198 --> 00:01:17,960
为了避免明显的等高线条纹
To avoid contour stripes,

18
00:01:17,960 --> 00:01:20,944
量化前加了一点连续噪声抖动
a little coherent noise dithers the quantisation,

19
00:01:20,944 --> 00:01:24,088
单级台阶的立面也按地面来着色
and single steps are shaded like the ground.

20
00:01:24,088 --> 00:01:28,443
建筑由程序拼装：屋顶按举折曲线逐层抬高
Buildings are assembled in code: roofs rise along a curved profile,

21
00:01:28,443 --> 00:01:32,798
瓦垄、马头墙、窗格和灯笼都是独立的方块
and every tile ridge, horse-head gable, lattice and lantern is its own block.

22
00:01:32,798 --> 00:01:37,650
近十万个方块按材质合并成实例化网格
Nearly a hundred thousand blocks are merged by material into instanced meshes,

23
00:01:37,650 --> 00:01:41,393
几百次绘制就能画完整座山谷
so the whole valley draws in a few hundred calls.

24
00:01:41,393 --> 00:01:48,701
光照由天空半球光、一盏投射柔和阴影的主光、环境遮蔽和少量暖色点光组成
Light comes from a sky hemisphere, one key light with soft shadows, ambient occlusion, and a few warm point lights.

25
00:01:50,801 --> 00:01:52,620
水面是一面平面镜
The water is a planar mirror:

26
00:01:52,620 --> 00:01:57,006
从水面下方再渲染一遍场景，得到真实的倒影
the scene is rendered again from below the surface to get a true reflection.

27
00:01:57,006 --> 00:02:01,196
三层流动的噪声算出法线，让倒影轻轻摇晃
Three layers of flowing noise give normals that gently ripple the reflection;

28
00:02:01,196 --> 00:02:06,246
菲涅尔决定它什么时候像镜子，什么时候能看进水里
Fresnel decides when it reads as a mirror and when we see into the water.

29
00:02:06,246 --> 00:02:10,719
每个顶点还记录了水深：靠近岸边变浅变透明
Each vertex also stores water depth: near the bank it turns shallow and clear,

30
00:02:10,719 --> 00:02:16,065
再加一道湿润的边线，水和石头之间就有了自然的过渡
with a damp edge line, so water meets stone naturally.

31
00:02:18,365 --> 00:02:21,949
接下来是氛围。蓝调时刻的天空
Next, atmosphere. The blue-hour sky is a gradient

32
00:02:21,949 --> 00:02:27,015
是从墨青到灰青的渐变，地平线上留一点余晖
from ink-teal to grey-teal, with a trace of afterglow on the horizon.

33
00:02:27,015 --> 00:02:30,120
雾分两种：贴着地面的高度雾
Fog comes in two kinds: height fog that hugs the ground,

34
00:02:30,120 --> 00:02:35,295
和随距离增加的空气透视，远山因此一层比一层淡
and haze that grows with distance, so each range is paler than the last.

35
00:02:35,295 --> 00:02:40,334
在冷色的山谷里，只让有人活动的地方发光
In this cool valley only places where people live are warm: windows,

36
00:02:40,334 --> 00:02:45,115
窗格、灯笼和石灯是暖色，朱红只做点缀
lanterns and stone lamps glow, and vermilion is only an accent.

37
00:02:45,115 --> 00:02:49,543
最后是克制的泛光和分离色调：暗部偏青
Finally, restrained bloom and split toning: cool shadows,

38
00:02:49,543 --> 00:02:52,775
亮部偏暖，再略微压低饱和度
warm highlights, and slightly lowered saturation.

39
00:02:54,875 --> 00:02:58,959
氛围不是换一个背景色，而是一组参数
A mood is not a background colour but a set of parameters:

40
00:02:58,959 --> 00:03:04,066
天空、雾、主光、曝光、水面波纹、雨丝和灯光
sky, fog, key light, exposure, ripples, rain and lamps,

41
00:03:04,066 --> 00:03:05,610
全部一起插值
all interpolated together.

42
00:03:05,610 --> 00:03:10,923
清晨，阳光从山口照进来，灯火熄灭
Morning: sunlight enters through the pass, the lamps go out,

43
00:03:10,923 --> 00:03:16,235
谷底升起薄雾，晨光勾出远山的轮廓
mist rises from the valley floor, and dawn outlines the far ridges.

44
00:03:16,235 --> 00:03:19,389
雨中，天空压低，主光变弱
Rain: the sky lowers, the key light fades,

45
00:03:19,389 --> 00:03:22,542
九千条雨丝在相机周围落下
nine thousand streaks fall around the camera,

46
00:03:22,542 --> 00:03:27,365
水面泛起一圈圈涟漪，石头和瓦片变得湿亮
rings spread across the water, and stone and tile turn wet and glossy.

47
00:03:30,665 --> 00:03:33,536
四个镜头各有自己的构图
Four designed shots, each with its own composition:

48
00:03:33,536 --> 00:03:38,655
山谷全景、河边低机位、山寺小径和山坡俯瞰
valley panorama, low riverside view, temple path and hillside overlook.

49
00:03:38,655 --> 00:03:43,433
切换时，相机沿一条抬高的曲线平滑飞过去
Switching flies the camera smoothly along a raised curve

50
00:03:43,433 --> 00:03:45,270
而不是直接跳切
instead of cutting.

51
00:03:45,270 --> 00:03:50,345
鼠标拖动环视，滚轮前进，触屏支持双指缩放
Drag to look, scroll to move, pinch on touch screens;

52
00:03:50,345 --> 00:03:54,749
还可以重置视角、隐藏界面、保存画面
reset the view, hide the interface, save an image,

53
00:03:54,749 --> 00:03:57,895
或者开启缓慢巡游和环境音
or start a slow tour and ambient sound.

54
00:03:57,895 --> 00:03:59,854
界面贴在画面边缘
The interface sits at the edges

55
00:03:59,854 --> 00:04:04,119
手机上会自动重新排布，不遮挡视觉中心
and reflows on phones, keeping the centre of the picture clear.

56
00:04:06,219 --> 00:04:10,326
工程上，所有代码整理在一个 HTML 文件里
On the engineering side, everything lives in one HTML file

57
00:04:10,326 --> 00:04:13,568
只依赖固定版本的 Three.js
that depends only on a pinned version of Three.js from a CDN,

58
00:04:13,568 --> 00:04:16,624
从 CDN 载入，失败时自动换源
with automatic fallback.

59
00:04:16,624 --> 00:04:20,909
山谷是静态的，阴影只在光线变化时重算
The valley is static, so shadows are recomputed only when the light changes;

60
00:04:20,909 --> 00:04:24,499
远处的植被不参与倒影和环境遮蔽
distant vegetation skips reflections and occlusion.

61
00:04:24,499 --> 00:04:29,535
手机默认使用轻量模式，降低分辨率、阴影和反射精度
Phones default to lite mode, with lower resolution, shadows and reflections; if the frame rate drops,

62
00:04:29,535 --> 00:04:32,104
帧率不够时，还会自动降级
quality steps down automatically.

63
00:04:32,104 --> 00:04:37,486
另外还有加载进度、WebGL 不可用时的提示
There is also a loading screen, a message when WebGL is unavailable,

64
00:04:37,486 --> 00:04:40,954
以及对减少动态效果偏好的支持
and support for the reduced-motion preference.

65
00:04:43,454 --> 00:04:46,511
从一张高度场、几万个方块
From one height field and tens of thousands

66
00:04:46,511 --> 00:04:51,769
到一座有远近、有烟雨、有人间灯火的江南山谷
of blocks to a Jiangnan valley with depth, misty rain and village lights.

67
00:04:51,769 --> 00:04:54,774
这就是第四话。我们下一话见
That's episode four. See you next time.