3D沉浸式旅游网站开发案例复盘【Three.js】

Plongez dans Lyon网站终于上线了。我们与 Danka 团队和 Nico Icecream 共同努力，打造了一个令我们特别自豪的流畅的沉浸式网站。

这个网站是专为 ONLYON Tourism 和会议而建，旨在展示里昂最具标志性的活动场所。观看简短的介绍视频后，用户可以进入城市的交互式风景如画的地图，所有场馆都建模为 3D 对象。每个建筑物都可以点击，进入一个详细说明位置信息的专用页面。

在这里插入图片描述

推荐：用 NSDT编辑器快速搭建可编程3D场景。

1、打造沉浸式体验

主要网站导航体验依赖于卡通般的 WebGL 场景，其中包含大量景观元素、云彩、动画车辆、波光粼粼的河流，当然还有建筑物。

总而言之，它由 63 个几何图形、48 个纹理、32234 个三角形（以及一些后期处理魔法）组成。当你处理大量对象时，必须组织代码架构并使用一些技巧来优化性能。

在这里插入图片描述

2、3D场景

所有模型均由才华横溢的 3D 艺术家 Nicolas Dufoure（又名 Icecream）在 3ds Max 中创建，然后使用 Blender 导出为 GTLF 对象。如果你有一些现成的3D模型可以利用，那么可以使用这个在线3D格式转换工具将它们转换成GLTF模型，这会节省不少时间。

2.1 艺术指导和视觉构成

Nico 和 Danka 团队从地图的早期迭代开始了项目的创作过程，并很快确定了低多边形和丰富多彩的艺术方向。

在这里插入图片描述

与客户品牌调色板相匹配的早期地图迭代之一

我们知道必须添加两打可点击的建筑物，因此我们必须在视觉构图、导航便利性和性能之间找到适当的平衡。

在这里插入图片描述

左：第一个场景合成测试渲染，右：早期 webgl 压力测试

为了将绘制的三角形数量保持在最低限度，我们还很快决定限制场景左侧和右侧远侧的 3D 对象的数量。但过了一段时间，我们意识到我们实际上必须阻止用户看到这些区域。

在这里插入图片描述

这个地方看起来很空，不是吗？

2.2 相机操作

为了避免平移、缩放和动画之间的任何冲突，我很早就决定从头开始编写相机控件的代码。事实证明这非常方便，因为之后为相机可能的位置添加阈值并不困难。

在这里插入图片描述

白色三角形代表我们实际的相机范围

这样，我们成功地限制了相机的移动，同时仍然允许用户探索所有地图重要区域。

2.3 烘焙和压缩纹理

为了节省大量 GPU 工作负载，Nico 和我同意的另一件事是用全局照明和阴影烘焙所有纹理。

当然，这意味着更多的建模工作，如果你的场景需要频繁更改，这可能会很烦人。但它减轻了 GPU 的大量计算负担（光照阴影、阴影贴图……），在我们的例子中，这绝对是值得的。
在这里插入图片描述

3D场景建模概述

当处理如此数量的纹理（通常为 1024x1024、2048x2048 甚至 4096x4096 像素宽）时，你应该考虑的另一件事是使用基础压缩纹理。

如果你从未听说过，基础纹理基本上比 jpeg/png 纹理占用更少的 GPU 内存。当它们从 CPU 上传到 GPU 时，它们还可以降低主线程瓶颈。

你可以在这里非常轻松地生成基础纹理。

3、代码架构和组织

当需要处理如此多的资源时，组织代码的最佳方法是创建几个 javascript 类（或函数，当然取决于你）并将它们组织在目录和文件中。

通常，我是这样组织该项目的文件和文件夹的：

webgl
|-- data
|   |-- objects.js
|   |-- otherObjects.js
|-- shaders
|   |-- customShader.js
|   |-- anotherShader.js
|-- CameraController.js
|-- GroupRaycaster.js
|-- ObjectsLoader.js
|-- WebGLExperience.js

data文件夹包含单独文件中的 javascript 对象以及所有信息
shaders文件夹包含单独文件中的所有项目自定义着色器
CameraController.js：处理所有相机移动和控制的类
GroupRaycaster.js：处理所有“交互式”对象光线投射的类
ObjectsLoader.js：加载所有场景对象的类
WebGLExperience.js：初始化渲染器、相机、场景、后处理并处理所有其他类的主类

当然，你可以自由地以不同的方式组织它。例如，有些人喜欢为渲染器、场景和相机创建单独的类。

3.1 核心的概念代码摘录

那么让我们进入代码本身吧！

以下是一些文件实际外观的详细示例。

Obects.js ：

import { customFragmentShader } from "../shaders/customShader";const sceneObjects = [{subPath: "path/to/",gltf: "object1.gltf"},{subPath: "anotherPath/to/",gltf: "object2.gltf",fragmentShader: customFragmentShader,uniforms: {uTime: {value: 0,}}}
];export default sceneObjects;

ObjectsLoader.js：

import { LoadingManager } from "three";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { BasisTextureLoader } from "three/examples/jsm/loaders/BasisTextureLoader";export default class ObjectsLoader {constructor({renderer, // our threejs rendererbasePath = '/', // common base path for all your assetsonLoading = () => {}, // onLoading callbackonComplete = () => {} // onComplete callback}) {this.renderer = renderer;this.basePath = basePath;this.loadingManager = new LoadingManager();this.basisLoader = new BasisTextureLoader(this.loadingManager);// you can also host those files locally if you wantthis.basisLoader.setTranscoderPath("/node_modules/three/examples/js/libs/basis/");this.basisLoader.detectSupport(this.renderer);this.loadingManager.addHandler(/\.basis$/i, this.basisLoader);this.loader = new GLTFLoader(this.loadingManager);this.loader.setPath(this.basePath);this.onLoading = onLoading;this.onComplete = onComplete;this.objects = [];this.state = {objectsLoaded: 0,totalObjects: 0,isComplete: false,};this.loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {const percent = Math.ceil((itemsLoaded / itemsTotal) * 100);// loading callbackthis.onLoading && this.onLoading(percent);if(percent === 100 && !this.state.isComplete) {this.state.isComplete = true;this.isLoadingComplete();}};this.loadingManager.onError = (url) => {console.warn('>>> error while loading: ', url);};}loadObject({object,parent, // could be our main scene or a grouponSuccess = () => {} // callback for each object loaded if needed}) {if(!object || !object.gltf) return;if('requestIdleCallback' in window) {window.requestIdleCallback(() => {this.startLoading({object,parent,onSuccess});});}else {this.startLoading({object,parent,onSuccess});}}startLoading({object,parent,onSuccess}) {this.state.totalObjects++;// if object has a subpathif(object.subPath) {this.loader.setPath(this.basePath + object.subPath);}this.loader.load(object.gltf, (gltf) => {const sceneObject = {gltf,};// ... do whatever you want with your gltf scene here// ... like using a ShaderMaterial if object.fragmentShader is defined for example!parent.add(gltf.scene);this.objects.push(sceneObject);onSuccess && onSuccess(sceneObject);// check if we've load everythingthis.state.objectsLoaded++;this.isLoadingComplete();}, (xhr) => {},(error) => {console.warn( 'An error happened', error );this.state.objectsLoaded++;this.isLoadingComplete();});}isLoadingComplete() {if(this.state.isComplete && this.state.objectsLoaded === this.state.totalObjects) {setTimeout(() => {this.onComplete && this.onComplete();}, 0);}}
}

WebGLExperience.js：

import {WebGLRenderer,Scene,sRGBEncoding,Group
} from "three";import ObjectsLoader from "./ObjectsLoader";
import CameraController from "./CameraController";
import GroupRaycaster from "./GroupRaycaster";import sceneObjects from "./data/objects";/***
Project architecture example:
webgl
|-- data
|   |-- objects.js
|   |-- otherObjects.js
|-- shaders
|   |-- customShader.js
|   |-- anotherShader.js
|-- CameraController.js
|-- GroupRaycaster.js
|-- ObjectsLoader.js
|-- WebGLExperience.js
*/export default class WebGLExperience {constructor({// add params here if neededcontainer = document.body,}) {this.container = container;// update on resizethis.width = window.innerWidth;this.height = window.innerHeight;this.initRenderer();this.initScene();this.initCamera();this.loadObjects();this.initRaycasting();}/*** EVENTS CALLBACKS ***/onLoading(callback) {if(callback) {this.onLoadingCallback = callback;}return this;}onComplete(callback) {if(callback) {this.onCompleteCallback = callback;}return this;}/*** THREEJS SETUP ***/initRenderer() {this.renderer = new WebGLRenderer({antialias: true,alpha: true,});// important when dealing with GLTFs!this.renderer.outputEncoding = sRGBEncoding;this.renderer.setSize( this.width, this.height );this.renderer.setClearColor( 0xffffff, 1 );this.renderer.outputEncoding = sRGBEncoding;// append the canvasthis.container.appendChild( this.renderer.domElement );}initScene() {// scenethis.scene = new Scene();}initCamera() {// creates the camera and handles the controls & movementsthis.cameraController = new CameraController({webgl: this,});this.camera = this.cameraController.camera;}/*** RAYCASTING ***/initRaycasting() {this.raycaster = new GroupRaycaster({camera: this.camera,width: this.width,height: this.height,onMouseEnteredObject: (object) => {// raycasted object mouse enter event},onMouseLeavedObject: (object) => {// raycasted object mouse leave event},onObjectClicked: (object) => {// raycasted object mouse click event}});}/*** LOAD OBJECTS ***/loadObjects() {this.objectsLoader = new ObjectsLoader({renderer: this.renderer,basePath: '/assets/', // whateveronLoading: (percent) => {console.log(percent);// callbackthis.onLoadingCallback && this.onLoadingCallback(percent);},onComplete: () => {// loading complete...console.log("loading complete!");// callbackthis.onCompleteCallback && this.onCompleteCallback();}});// create a new group where we'll add all our objectsthis.objectGroup = new Group();this.scene.add(this.objectGroup);// load the objectssceneObjects.forEach(object => {this.objectsLoader.loadObject({object,parent: this.objectGroup,onSuccess: (loadedObject) => {console.log(loadedObject);}});});}/*** RENDERING ***/// ...other methods to handle rendering, interactions, etc.
}

3.2 与 Nextjs / React 集成

由于该项目使用 Nextjs，我们需要在 React 组件内实例化我们的 WebGLExperience 类。

我们只需创建一个 WebGLCanvas 组件并将其放在路由器外部，以便它始终位于 DOM 中。

WebGLCanvas.jsx：

import React, {useRef, useState, useEffect} from 'react';
import WebGLExperience from '../../webgl/WebGLExperience';import styles from './WebGLCanvas.module.scss';export default function WebGLCanvas() {const container = useRef();const [ webglXP, setWebglXP ] = useState();// set up webgl context on inituseEffect(() => {const webgl = new WebGLExperience({container: container.current,});setWebglXP(webgl);}, []);// now we can watch webglXP inside a useEffect hook// and do what we want with it// (watch for events callbacks for example...)useEffect(() => {if(webglXP) {webglXP.onLoading((percent) => {console.log('loading', percent);}).onComplete(() => {// do what you want (probably dispatch a context event)});}}, [webglXP]);return (<div className="WebGLCanvas" ref={container} />);
};

4、自定义着色器

显然我必须为这个网站从头开始编写一些自定义着色器。
以下是最有趣的一些细分。

4.1 着色器块

如果你仔细查看上面的示例代码，会发现我允许每个对象在需要时使用自己的自定义着色器。

事实上，场景中的每个网格体都使用 ShaderMaterial，因为当你单击建筑物时，灰度滤镜将应用于所有其他场景网格体：
在这里插入图片描述

应用了灰度滤镜的位置页面屏幕截图

这种效果的实现要归功于这段超级简单的 glsl 代码：

const grayscaleChunk = `vec4 textureBW = vec4(1.0);textureBW.rgb = vec3(gl_FragColor.r * 0.3 + gl_FragColor.g * 0.59 + gl_FragColor.b * 0.11);gl_FragColor = mix(gl_FragColor, textureBW, uGrayscale);
`;

由于所有对象都必须遵守此行为，因此我将其实现为“着色器块”，就像 Three.js 最初在内部构建自己的着色器的方式一样。

例如，使用的最基本场景的网格片段着色器如下所示：

varying vec2 vUv;uniform sampler2D map;
uniform float uGrayscale;void main() {gl_FragColor = texture2D(map, vUv);#include <grayscale_fragment>
}

然后我们只获取材质的 onBeforeCompile 方法的一部分：

material.onBeforeCompile = shader => {shader.fragmentShader = shader.fragmentShader.replace("#include <grayscale_fragment>",grayscaleChunk);
};

这样，如果我必须调整灰度效果，我只需修改一个文件，它就会更新我的所有片段着色器。

4.2 云

正如我上面提到的，我们决定不在场景中放置任何真实的灯光。但由于云层正在（缓慢）移动，因此需要对其应用某种动态闪电。

为此，我需要做的第一件事是将顶点世界位置和法线传递给片段着色器：

varying vec3 vNormal;
varying vec3 vWorldPos;void main() {vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_Position = projectionMatrix * mvPosition;vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;vNormal = normal;
}

然后在片段着色器中，我使用它们根据一些uniforms计算漫反射闪电：

varying vec3 vNormal;
varying vec3 vWorldPos;uniform float uGrayscale;uniform vec3 uCloudColor; // emissive color
uniform float uRoughness; // material roughness
uniform vec3 uLightColor; // light color
uniform float uAmbientStrength; // ambient light strength
uniform vec3 uLightPos; // light world space position// get diffusion based on material's roughness
// see https://learnopengl.com/PBR/Theory
float getRoughnessDiff(float diff) {float diff2 = diff * diff;float r2 = uRoughness * uRoughness;float r4 = r2 * r2;float denom = (diff2 * (r4 - 1.0) + 1.0);denom = 3.141592 * denom * denom;return r4 / denom;
}void main() {// ambient lightvec3 ambient = uAmbientStrength * uLightColor;// get light diffusionfloat diff = max(dot(normalize((uLightPos - vWorldPos)), vNormal), 0.0);// apply roughnessfloat roughnessDiff = getRoughnessDiff(diff);vec3 diffuse = roughnessDiff * uLightColor;vec3 result = (ambient + diffuse) * uCloudColor;gl_FragColor = vec4(result, 1.0);#include <grayscale_fragment>
}

这是一种从头开始应用基本闪电阴影的廉价方法，而且结果足够令人信服。

4.3 水中倒影

我花更多时间写的片段着色器无疑是波光粼粼的水。

起初，我愿意采用与 Bruno Simon 在 Madbox 网站上所做的类似的方法，但他使用额外的网格和一组自定义 UV 来实现。

由于 Nico 已经忙于所有建模工作，我决定尝试另一种方法。我为自己创建了一个额外的纹理来计算波的方向：

在这里插入图片描述

左：水纹理，右：水流方向纹理

这里，水流方向被编码在绿色通道中：50% 的绿色表示水流直行，60% 的绿色表示水稍微向左流动，40% 表示水稍微向右流动，等等在…

为了创建波浪，我使用了带有阈值的 2D perlin 噪声。我使用了其他一些 2D 噪声来确定水会发光的区域，使它们向相反的方向移动，瞧！

varying vec2 vUv;uniform sampler2D map;
uniform sampler2D tFlow;
uniform float uGrayscale;
uniform float uTime;uniform vec2 uFrequency;
uniform vec2 uNaturalFrequency;
uniform vec2 uLightFrequency;
uniform float uSpeed;
uniform float uLightSpeed;
uniform float uThreshold;
uniform float uWaveOpacity;// see https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83#classic-perlin-noise
// for cnoise functionvec2 rotateVec2ByAngle(float angle, vec2 vec) {return vec2(vec.x * cos(angle) - vec.y * sin(angle),vec.x * sin(angle) + vec.y * cos(angle));
}void main() {vec4 flow = texture2D(tFlow, vUv);float sideStrength = flow.g * 2.0 - 1.0;vec2 wavesUv = rotateVec2ByAngle(sideStrength * PI, vUv) * uFrequency;float mainFlow = uTime * uSpeed * (1.0 - sideStrength);float sideFlow = uTime * sideStrength * uSpeed;wavesUv.x -= sideFlow;wavesUv.y += mainFlow;// make light areas travel towards the userfloat waveLightStrength = cnoise(wavesUv);// make small waves with noisevec2 naturalNoiseUv = rotateVec2ByAngle(sideStrength * PI, vUv * uNaturalFrequency);float naturalStrength = cnoise(naturalNoiseUv);// apply a threshold to get small waves moving towards the userfloat waveStrength = step(uThreshold, clamp(waveLightStrength - naturalStrength, 0.0, 1.0));// a light mowing backward to improve overall effectfloat light = cnoise(vUv * uLightFrequency + vec2(uTime * uLightSpeed));// get our final waves colorsvec4 color = vec4(1.0);color.rgb = mix(vec3(0.0), vec3(1.0), 1.0 - step(waveStrength, 0.01));// exagerate effectfloat increasedShadows = pow(abs(light), 1.75);color *= uWaveOpacity * increasedShadows;// mix with original texturevec4 text = texture2D(map, vUv);gl_FragColor = text + color;#include <grayscale_fragment>
}

如果你想测试一下，这里有一个 Shadertoy 上的演示。

为了帮助我调试这个问题，我使用了 GUI 来实时调整所有值并找到最有效的值（当然，我已经使用该 GUI 来帮助我调试很多其他事情）。

在这里插入图片描述

4.4 后期处理

最后有一个使用 Threejs 内置 ShaderPass 类应用的后处理通道。它处理出现的动画，在某个位置聚焦时在相机移动上添加一点鱼眼，并负责小级别校正（亮度、对比度、饱和度和曝光）。

在这里插入图片描述

在放大/缩小动画期间应用轻微的后处理变形效果

PostFXShader.js：

const PostFXShader = {uniforms: {'tDiffuse': { value: null },'deformationStrength': { value: 0 },'showScene': { value: 0 },// color manipulations'brightness': { value: 0 },'contrast': { value: 0.15 },'saturation': { value: 0.1 },'exposure': { value: 0 },},vertexShader: /* glsl */`varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}`,fragmentShader: `varying vec2 vUv;uniform sampler2D tDiffuse;uniform float showScene;uniform float deformationStrength;uniform float brightness;uniform float contrast;uniform float saturation;uniform float exposure;vec3 adjustBrightness(vec3 color, float value) {return color + value;}vec3 adjustContrast(vec3 color, float value) {return 0.5 + (1.0 + value) * (color - 0.5);}vec3 adjustExposure(vec3 color, float value) {return color * (1.0 + value);}vec3 adjustSaturation(vec3 color, float value) {// https://www.w3.org/TR/WCAG21/#dfn-relative-luminanceconst vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);vec3 grayscale = vec3(dot(color, luminosityFactor));return mix(grayscale, color, 1.0 + value);}void main() {vec2 texCoords = vUv;vec2 normalizedCoords = texCoords * 2.0 - 1.0;float distanceToCenter = distance(normalizedCoords, vec2(0.0));vec2 distortedCoords = normalizedCoords * (1.0 - distanceToCenter * deformationStrength);vec2 offset = normalizedCoords * sin(distanceToCenter * 3.0 - showScene * 3.0) * (1.0 - showScene) * 0.1;texCoords = (distortedCoords + 1.0) * 0.5 + offset;vec4 texture = texture2D(tDiffuse, texCoords);float showEffect = clamp(showScene - length(offset) * 10.0 / sqrt(2.0), 0.0, 1.0);vec4 grayscale = vec4(1.0);grayscale.rgb = vec3(texture.r * 0.3 + texture.g * 0.59 + texture.b * 0.11);texture.rgb = mix(grayscale.rgb, texture.rgb, showEffect);texture.a = showEffect * 0.9 + 0.1;texture.rgb *= texture.a;texture.rgb = adjustBrightness(texture.rgb, brightness);texture.rgb = adjustContrast(texture.rgb, contrast);texture.rgb = adjustExposure(texture.rgb, exposure);texture.rgb = adjustSaturation(texture.rgb, saturation);gl_FragColor = texture;}`
};export { PostFXShader };

在某些时候，我们还尝试添加散景通道，但它对性能要求太高，因此我们很快就放弃了它。

5、使用 Spector 进行调试

你始终可以通过安装spector.js扩展并检查WebGL上下文来深入查看使用的所有着色器。

如果你从未听说过，spector.js 适用于每个 WebGL 网站。如果想检查一些 WebGL 效果是如何实现的，它总是超级方便！
在这里插入图片描述

使用spector.js 调试片段着色器

6、性能优化

我使用了一些技巧来优化体验性能。以下是最重要的两个：

首先，这应该成为一种习惯：仅在需要时渲染场景。

这可能听起来很愚蠢，但它仍然经常被低估。如果你的场景被覆盖层、页面或其他任何东西隐藏，就不要绘制它！

renderScene() {if(this.state.shouldRender) this.animate();
}

我使用的另一个技巧是根据用户 GPU 和屏幕尺寸来调整场景的像素比。

这个想法是首先使用 detector-gpu 检测用户的 GPU。一旦我们获得了 GPU 估计的 fps，我们就会使用实际屏幕分辨率来计算实际条件下该 fps 测量值的增强估计。然后，我们可以根据每次调整大小时的这些数字来调整渲染器像素比：

setGPUTier() {// GPU test(async () => {this.gpuTier = await getGPUTier({glContext: this.renderer.getContext(),});this.setImprovedGPUTier();})();
}// called on resize as well
setImprovedGPUTier() {const baseResolution = 1920 * 1080;this.gpuTier.improvedTier = {fps: this.gpuTier.fps * baseResolution / (this.width * this.height)};this.gpuTier.improvedTier.tier = this.gpuTier.improvedTier.fps >= 60 ? 3 :this.gpuTier.improvedTier.fps >= 30 ? 2 :this.gpuTier.improvedTier.fps >= 15 ? 1 : 0;this.setScenePixelRatio();
}

另一种常见的方法是持续监控给定时间段内的平均 FPS，并根据结果调整像素比。

其他优化包括使用或不使用多重采样渲染目标，具体取决于 GPU 和 WebGL2 支持（使用 FXAA 通道作为后备）、使用鼠标事件发射器、触摸和调整大小事件、使用 gsap 股票代码作为应用程序的唯一 requestAnimationFrame 循环等。