Three.js-汽车产业链

如何营造科技感

HDR

HDR，换个HDR，比如街景那个，效果就好多了。

这是效果最好的因素，没有之一。

应该将HDR的亮度设置大一些，场景中的光源亮度设置小一些

动态的光影

比如我之前做的质检扫光小飞机、React的汽车Demo里面的发光圆环等，都是起到的这个效果。

镜面效果

通过Reflector.js实现，但是默认不支持模糊的倒影。

扩展模糊的方式：

drei/Reflector.tsx at 4771e7c014db8665f68095134fa713fd7e05e891 · pmndrs/drei · GitHub

如何增加写实感

抗锯齿

性能优化

给出数据统计，更新到confluence上

手感

增加旋转的阻尼，使其有厚重感。

问题

为什么抗锯齿不生效

在WebGL 1中使用后处理时，必须使用FXAA进行抗锯齿。在创建WebGLRenderer时将{ antialias: true }传递给true会激活MSAA，但前提是**渲染到默认帧缓冲区(直接渲染到屏幕)**。

不对，我程序中并没有设置renderToScreen = false，而且这个锯齿，看起来和摩尔纹有点像，会不会根本不是锯齿？

gltf-viewer也是采用了默认的抗锯齿，没有这个问题，因此这个大概率不是锯齿了。

不投射阴影，还是有这个问题，看来也不是摩尔纹？

看看光源的范围呢？

经过测试，发现果然是光源的位置问题导致的。修改之前的参数：

<DirectionalLight
  ref="directionalLight"
  :position="{ x: -200, y: 800, z: 200 }"
  color="#FFFFFF"
  cast-shadow
  :shadow-camera="{
    top: 1000,
    bottom: -1000,
    left: -1000,
    right: 1000
  }"
  :intensity="1"
/>

因为光源距离物体太远了(物体设置的位置大小基本都是个位数的)，自然就没有影子了。

将position和shadow-camera改小到原来的十分之一后，类似锯齿的阴影确实没了。但是引发一个新问题-摩尔纹：

mew

然后通过修改mapSize得到了缓解：

1
2
3

// 阴影贴图的宽度和高度，必须是2的幂，值如果低了，阴影会有锯齿；注意这可能有性能问题
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

但是只是缓解，并未根除。

然后设置了材质的map的encoding，从sRGB改为Linear，发现进一步缓解了：

1	`material.map.encoding = LinearEncoding;`

再设置ma的filter，好像没啥效果，放大了看还是有摩尔纹：

1 2	`material.map.magFilter = LinearFilter; material.map.minFilter = LinearMipMapLinearFilter;`

和环境贴图有关系

加上华丽的环境贴图后，没了！

不对，应该是亮度的关系，我加了HDR后，把亮度调低了。

和光源亮度有关系

换了一个设计师给的HDR，发现DirectionalLight亮度较大时，就会出现摩尔纹。

iframe嵌入我们页面后，没有绘制出来

控制台有很多报错：

GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete

出现这个framebuffer is incomplete的错误，一般是由于rendertarget设置有问题，比如缓冲区目标是否有效、使用上有没有冲突以及缓冲的尺寸是否设置非法等。

怀疑是展厅这边加载我们页面的时候，父元素还没有高宽导致的。

不对，是因为设置了iframe的父元素display:none导致的，解决方案是：

不设置display:none，初始化的时候，将container偏移出页面，用户点击的时候再偏移回来。

半透明的物体把不透明的物体遮住了

是renderOrder不唯一导致的。

我们先给全部模型设置了renderOrder，然后用户操作的时候，给被操作的部分模型重新从1开始设置了renderOrder，这就导致renderOrder不唯一了。

最终我们只针对不完全透明的物体(opacity !== undefined)设置了其renderOrder，且是递减设置的。

(TODO)这个是不是实际上相当于给每一个都开启了深度测试？

为什么还原度不行

模型没有吸收到HDR

色调均值化就可以了。

光源位置不对

之前光源是在车子背后的，应该改成车子前面，离相机更近的一侧。

为什么修改一个模型的材质，影响了其他模型？

因为不同模型是可能共用一个材质的。

为什么隐藏了材质，但是看起来还是有白模的效果？

因为一个模型可能使用多个材质，比如金属度纹理、粗糙度纹理等等，需要将其所有材质都隐藏才行。

反思

不要从零造轮子

杰哥让人崩溃。

没有足够多的、成熟的、各种业务场景验证过的轮子(组件)，项目的风险非常大。

没有类似Unity这种基于Component的可视化编辑器，验证可行性的效率太低了；也没法将工作交给设计师，全部都在开发这边卡住了。

场景渲染参数应该做成可调试的

参考gltf-viewer，让设计师自己调整。

缺少模型动画

感觉不够动感，比如轮子聚焦后，是可以动起来的。

光玩儿得不够遛

比如DirectionalLight，搞了好一阵

没有吃透原理

比如摩尔纹，全靠网上抄。

设计资产对接协议

尺寸按照现实世界中的来，position单位对应1m，汽车的长度就是4-5左右(Unity就是1m)
子模型的坐标不要全部相对[0, 0, 0]定位

技术拆解-马自达

马自达 MX—5

是由博维数孪 (Bowell)这个公司搞的，像是自研的渲染引擎。

环境贴图

他们的环境贴图没有采用HDR，而是用的一个图片：

https://www.bowell.com/case/mazda/mx5/data/8518431/img.jpg

模型

这个看起来像是模型文件，但是是fbs格式，没见过：

https://www.bowell.com/case/mazda/mx5/data/8502539/model.fbs

没有搜到这是一个通用的模型文件格式，因此怀疑是他们为了防止模型被盗用，自己定的格式。

灯光

全是贴图，比如红色尾灯：

https://www.bowell.com/case/mazda/mx5/data/8533410/img.png

前灯：

https://www.bowell.com/case/mazda/mx5/data/8531080/img.png

感觉是程序写了个3D模型，贴上这个图片？

不对，应该是自发光贴图，类似房顶的灯那种。

多几个光源

之前我们一直都是一个光源，这个本身就错了

(TODO)Soft Shadow

示例效果：three.js examples

阴影需要有扩散效果，这样才能有真实感，否则很假。

这个可以通过多光源解决。

Soft Shadows - Three.js Tutorials

.radius : Float
Setting this to values greater than 1 will blur the edges of the shadow.
High values will cause unwanted banding effects in the shadows - a greater mapSize will allow for a higher value to be used here before these effects become visible.
If WebGLRenderer.shadowMap.type is set to PCFSoftShadowMap, radius has no effect and it is recommended to increase softness by decreasing mapSize instead.

Note that this has no effect if the WebGLRenderer.shadowMap.type is set to BasicShadowMap.

所以一般是设置renderer.shadowMap.type = THREE.VSMShadowMap，然后通过设置light.shadow.radius和light.shadow.blurSamples调整软阴影效果；我们产业链中，我设置为30，效果就比较好了：

1
2
3

renderer.shadowMap.type = THREE.VSMShadowMap;
light.shadow.radius = 30;
light.shadow.blurSamples = 30;

地面反射

镜面反射

用现成的插件解决：

function createMirror() {
  let geometry = new THREE.CircleGeometry(50, 64);
  const groundMirror = new Reflector(geometry, {
    clipBias: 0.003,
    textureWidth: window.innerWidth * window.devicePixelRatio,
    textureHeight: window.innerHeight * window.devicePixelRatio,
    color: 0x777777
    // multisample: 128
  });
  groundMirror.position.y = -0.1;
  groundMirror.rotateX(-Math.PI / 2);
  (scene.value as unknown as THREE.Scene).add(groundMirror);
}