3D写实风格

真实感不是搞定某一个方面(比如材质)就可以的，而是一个整体性的工程，可以理解为视觉层面的架构设计。

Web3D的上限在哪里？

sketchfab的效果很不错的：

https://sketchfab.com/feed

如何突破Web3D的上限？

Web3D在真实感上，为什么距离Unity和Unreal Engine这么大？Web3D写实上限在哪里？

如果现在制约Web3D开发3A大作的是资源加载和WebGL，那么是不是可以通过Electron + WebGPU来突破这个问题？

真实感追求的是什么？

视觉直觉上的自然和愉悦感。

(TODO)WebGL的写实渲染上限在哪里？

光线追踪渲染 VS. 光栅化渲染

光线追踪（ray tracing）：光源 –> 物体表面 –> 反射折射….xN次 –> 摄像机
光栅化（rasterization）：光源 –> 物体表面 –> 摄像机

显卡光线追踪core的原理和性能要求：

https://www.zhihu.com/question/399445153/answer/1311717764

烘焙

最快的接近光线追踪效果的方法是烘焙，对于一些小房间或者一些不大的小场景，用这种方面可以很容易的就达到光线追踪的渲染效果；缺点是太过于静态。

这里有个Three.js的烘焙教程：

https://betterprogramming.pub/how-to-create-awesome-3d-graphics-for-your-website-using-three-js-blender-and-greensock-a834cb8a6f6e

We modify our materials to also include the lighting. This is what’s called “baking.”

这个文章提到了几个技巧，比如几个主要的光照、左侧冷光右侧暖光、Lightmap和Shadowmap等。

几大要素

角色，环境，动画，特效，着色器，后期

环境

环境是角色最好的参照物，能够沉浸在扮演这个角色中，如果制作的素材和世界观有契合的话呢，配合文字或者动画，就能够很好的带入到这个世界观之中。

大部分人对于美感的概念是模糊的，但是每个人对于材质是有刻板印象的，他会用他的常识来判断材质，所以呢，材质的正确性是蛮重要的~

UE商城有很多环境资产，这部分如何在WebGL中使用呢？似乎不好使用，都比较大，动辄上G。不过加载肯定是可以加载的，毕竟UE和Unity都可以导出为WebGL形式进行展示。

但是如果没有好的环境资产，是无法实现好的效果的；或者用环境贴图？

动画

角色仿真动画制作上是有难度的，尤其是人的行为动画上，因为人对于人真的是太熟悉了，一段行为动画，只要有一丝丝的节奏问题和肢体不协调，这种误差立马能感觉出来的。

特效

作用：辅助视觉、营造氛围

Shader

实现特定的材质，模拟出这个物体该有的材质以及模拟出这个氛围下材质该有的表现状态

后期

弥补光栅化渲染的一些缺陷，比如说，Bloom，AO，Screen Space Reflection这些，加入这些效果，可以离光线追踪的效果更近一些~

物理材质

HDR/HDRI

高动态范围成像（英语：High Dynamic Range Imaging，简称HDRI或HDR）

Wiki介绍

如何制作太空HDR图片：

https://www.bilibili.com/video/BV1HA411e7x5/?spm_id_from=333.788.recommend_more_video.0&vd_source=1ddc293a4439c7106ebd7878040f7c81

Path Tracing

这2个文章讲解得很详细，可以结合起来看：

1、PBR(光线追踪是和PBR强相关的)

https://learnopengl-cn.github.io/07%20PBR/01%20Theory/

2、路径追踪（Path Tracing）与渲染方程(Render Equation)

https://zhuanlan.zhihu.com/p/370162390

Path Tracing和Ray Tracing的关系是什么？

Ray Tracing是一种光照计算的方式，Path Tracing是Ray Tracing的一种，主要用于计算全局光照(GI)。

为什么渲染很耗时？

似乎后面得静置很久，才有一点点的清晰度提升。这也是渲染很耗时的原因么？因为后面要很多的采样点才能提升一点点的效果？

看来我之前想简单了，设计师他们做视频渲染耗时很长，是有原因的，应该设计工具的渲染也是基于类似Path Tracing的原理实现的，而且一个视频有N帧，我这边Web上单帧都要渲染这么久，视频的渲染耗时可想而知了。

为什么UE的实时渲染这么快？

Three.js中写实相关的内容

写实风格可以采用PRB材质，通过一些金属反光来营造这种感觉。

比如官方这个动态CubeCamera的示例就是采用了PBR材质，核心代码并不多：

// 加载环境贴图
new RGBELoader()
    .setPath("textures/equirectangular/")
    .load("quarry_01_1k.hdr", function (texture) {
        texture.mapping = THREE.EquirectangularReflectionMapping;

        scene.background = texture;
        scene.environment = texture;
    });

cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);
cubeRenderTarget.texture.type = THREE.HalfFloatType;

cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);

// 标准PBR材质，基于Metallic-Roughness工作流
material = new THREE.MeshStandardMaterial({
    envMap: cubeRenderTarget.texture,
    roughness: 0.05,
    metalness: 1,
});

const gui = new GUI();
gui.add(material, "roughness", 0, 1);
gui.add(material, "metalness", 0, 1);
gui.add(renderer, "toneMappingExposure", 0, 2).name("exposure");

// 创建中心的球体，注意这不是通过SphereGeometry创建的，而是通过二十面体IcosahedronGeometry实现的
sphere = new THREE.Mesh(
    new THREE.IcosahedronGeometry(15, 100),
    material
);
scene.add(sphere);

// 创建用于演示反射的立方体
const material2 = new THREE.MeshStandardMaterial({
    roughness: 0.1,
    metalness: 0,
});


cube = new THREE.Mesh(new THREE.BoxGeometry(15, 15, 15), material2);
scene.add(cube);