我们与

共同努力#xff0c;打造了一个令我们特别自豪的流畅的沉浸式网站。

ONLYON

和会议而建#xff0c;旨在展示里昂最具标志性的活动场所。

观看简短的介绍视频后#xff0c;用户…Plongez

dans

和会议而建旨在展示里昂最具标志性的活动场所。

观看简短的介绍视频后用户可以进入城市的交互式风景如画的地图所有场馆都建模为

推荐用

场景其中包含大量景观元素、云彩、动画车辆、波光粼粼的河流当然还有建筑物。

总而言之它由

对象。

如果你有一些现成的3D模型可以利用那么可以使用这个在线3D格式转换工具将它们转换成GLTF模型这会节省不少时间。

2.1

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

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

左第一个场景合成测试渲染右早期

为了将绘制的三角形数量保持在最低限度我们还很快决定限制场景左侧和右侧远侧的

2.2

为了避免平移、缩放和动画之间的任何冲突我很早就决定从头开始编写相机控件的代码。

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

2.3

当然这意味着更多的建模工作如果你的场景需要频繁更改这可能会很烦人。

GPU

的大量计算负担光照阴影、阴影贴图……在我们的例子中这绝对是值得的。

3D场景建模概述

WebGLExperience.jsdata文件夹包含单独文件中的

javascript

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

3.1

three/examples/jsm/loaders/GLTFLoader;

import

three/examples/jsm/loaders/BasisTextureLoader;export

default

LoadingManager();this.basisLoader

new

BasisTextureLoader(this.loadingManager);//

you

wantthis.basisLoader.setTranscoderPath(/node_modules/three/examples/js/libs/basis/);this.basisLoader.detectSupport(this.renderer);this.loadingManager.addHandler(/\.basis$/i,

new

GLTFLoader(this.loadingManager);this.loader.setPath(this.basePath);this.onLoading

[];this.state

false,};this.loadingManager.onProgress

(url,

this.onLoading(percent);if(percent

100

true;this.isLoadingComplete();}};this.loadingManager.onError

(url)

url);};}loadObject({object,parent,

could

{this.startLoading({object,parent,onSuccess});});}else

{this.startLoading({object,parent,onSuccess});}}startLoading({object,parent,onSuccess})

object

{this.loader.setPath(this.basePath

object.subPath);}this.loader.load(object.gltf,

(gltf)

example!parent.add(gltf.scene);this.objects.push(sceneObject);onSuccess

check

everythingthis.state.objectsLoaded;this.isLoadingComplete();},

(xhr)

);this.state.objectsLoaded;this.isLoadingComplete();});}isLoadingComplete()

{setTimeout(()

{WebGLRenderer,Scene,sRGBEncoding,Group

from

window.innerHeight;this.initRenderer();this.initScene();this.initCamera();this.loadObjects();this.initRaycasting();}/***

EVENTS

GLTFs!this.renderer.outputEncoding

sRGBEncoding;this.renderer.setSize(

this.width,

canvasthis.container.appendChild(

);}initScene()

this.cameraController.camera;}/***

RAYCASTING

this.height,onMouseEnteredObject:

(object)

this.onLoadingCallback(percent);},onComplete:

{//

callbackthis.onCompleteCallback

this.onCompleteCallback();}});//

create

Group();this.scene.add(this.objectGroup);//

load

objectssceneObjects.forEach(object

{this.objectsLoader.loadObject({object,parent:

(loadedObject)

{console.log(loadedObject);}});});}/***

RENDERING

../../webgl/WebGLExperience;import

styles

./WebGLCanvas.module.scss;export

default

container.current,});setWebglXP(webgl);},

[]);//

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

ShaderMaterial因为当你单击建筑物时灰度滤镜将应用于所有其他场景网格体

glsl

;由于所有对象都必须遵守此行为因此我将其实现为“着色器块”就像

Three.js

shader.fragmentShader.replace(#include

grayscale_fragment,grayscaleChunk);

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

4.2

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

varying

https://learnopengl.com/PBR/Theory

float

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

4.3

https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83#classic-perlin-noise

for

它处理出现的动画在某个位置聚焦时在相机移动上添加一点鱼眼并负责小级别校正亮度、对比度、饱和度和曝光。

PostFXShader.js

https://www.w3.org/TR/WCAG21/#dfn-relative-luminanceconst

vec3

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

5、使用

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

适用于每个

this.renderer.getContext(),});this.setImprovedGPUTier();})();

}//

this.height)};this.gpuTier.improvedTier.tier

GPU

但它确实需要一些组织和一个包含多个文件的干净代码库可以轻松调试、添加或删除功能。

Javascript