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

这篇具有很好参考价值的文章主要介绍了3D沉浸式旅游网站开发案例复盘【Three.js】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

1、打造沉浸式体验

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

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

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

2、3D场景

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

2.1 艺术指导和视觉构成

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

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

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

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

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

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

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

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

这个地方看起来很空,不是吗?

2.2 相机操作

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

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

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

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

2.3 烘焙和压缩纹理

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

当然,这意味着更多的建模工作,如果你的场景需要频繁更改,这可能会很烦人。 但它减轻了 GPU 的大量计算负担(光照阴影、阴影贴图……),在我们的例子中,这绝对是值得的。
3D沉浸式旅游网站开发案例复盘【Three.js】,3d,旅游,javascript
3D沉浸式旅游网站开发案例复盘【Three.js】,3d,旅游,javascript

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 renderer
   basePath = '/', // common base path for all your assets
   onLoading = () => {}, // onLoading callback
   onComplete = () => {} // 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 want
   this.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 callback
     this.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 group
    onSuccess = () => {} // 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 subpath
   if(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 everything
     this.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 needed
   container = document.body,
 }) {
   this.container = container;

   // update on resize
   this.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 canvas
   this.container.appendChild( this.renderer.domElement );
 }

 initScene() {
   // scene
   this.scene = new Scene();
 }

 initCamera() {
   // creates the camera and handles the controls & movements
   this.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/', // whatever
     onLoading: (percent) => {
       console.log(percent);

       // callback
       this.onLoadingCallback && this.onLoadingCallback(percent);
     },
     onComplete: () => {
       // loading complete...
       console.log("loading complete!");

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


   // create a new group where we'll add all our objects
   this.objectGroup = new Group();
   this.scene.add(this.objectGroup);

   // load the objects
   sceneObjects.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 init
 useEffect(() => {
   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,因为当你单击建筑物时,灰度滤镜将应用于所有其他场景网格体:
3D沉浸式旅游网站开发案例复盘【Three.js】,3d,旅游,javascript

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

这种效果的实现要归功于这段超级简单的 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 light
 vec3 ambient = uAmbientStrength * uLightColor;

 // get light diffusion
 float diff = max(dot(normalize((uLightPos - vWorldPos)), vNormal), 0.0);
 // apply roughness
 float 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 已经忙于所有建模工作,我决定尝试另一种方法。 我为自己创建了一个额外的纹理来计算波的方向:

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

左:水纹理,右:水流方向纹理

这里,水流方向被编码在绿色通道中: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 function

vec2 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 user
  float waveLightStrength = cnoise(wavesUv);

  // make small waves with noise
  vec2 naturalNoiseUv = rotateVec2ByAngle(sideStrength * PI, vUv * uNaturalFrequency);
  float naturalStrength = cnoise(naturalNoiseUv);

  // apply a threshold to get small waves moving towards the user
  float waveStrength = step(uThreshold, clamp(waveLightStrength - naturalStrength, 0.0, 1.0));

  // a light mowing backward to improve overall effect
  float light = cnoise(vUv * uLightFrequency + vec2(uTime * uLightSpeed));

  // get our final waves colors
  vec4 color = vec4(1.0);
  color.rgb = mix(vec3(0.0), vec3(1.0), 1.0 - step(waveStrength, 0.01));

  // exagerate effect
  float increasedShadows = pow(abs(light), 1.75);
  color *= uWaveOpacity * increasedShadows;

  // mix with original texture
  vec4 text = texture2D(map, vUv);

  gl_FragColor = text + color;

  #include <grayscale_fragment>
}

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

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

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

4.4 后期处理

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

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

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

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-luminance
      const 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 效果是如何实现的,它总是超级方便!
3D沉浸式旅游网站开发案例复盘【Three.js】,3d,旅游,javascript

使用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 循环等 。

7、结束语

总而言之,我们在构建家乡的交互式地图时度过了一段愉快的时光。

正如我们所见,打造像这样的沉浸式 WebGL 体验(需要实时渲染很多内容)并不困难。 但它确实需要一些组织和一个包含多个文件的干净代码库,可以轻松调试、添加或删除功能。

通过该架构,还可以非常轻松地添加或删除场景对象(因为这只是编辑 Javascript 对象的问题),从而在需要时可以方便地进行进一步的站点更新。


原文链接:WebGL旅游网站案例研究 — BimAnt文章来源地址https://www.toymoban.com/news/detail-650637.html

到了这里,关于3D沉浸式旅游网站开发案例复盘【Three.js】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发网站推荐

    以下是一些可以用来查找和比较前端框架的推荐网站: JavaScript框架比较: 这些网站提供了对不同JavaScript框架和库的详细比较和评估。 JavaScripting: 提供了大量的JavaScript库和框架,以及它们的星级、更新频率等信息。 Libraries.io: 可以查找各种编程语言的开源库和框架,并查看

    2024年02月07日
    浏览(43)
  • Go语言开发网站

    随着互联网的迅速发展,网站已经成为人们获取各种信息和服务的主要途径。而开发一个高性能、可扩展的网站是一项挑战。Go语言作为一门现代化的编程语言,具有强大的并发能力和高效的性能,逐渐成为网站开发的首选语言之一。本文将介绍如何使用Go语言进行网站开发,

    2024年02月08日
    浏览(44)
  • 如何使用python开发网站?

    使用Python开发网站的步骤如下: 安装Python和相关的Web框架,例如Django、Flask、Pyramid等。 设计网站的功能和页面,使用HTML、CSS和JavaScript等技术进行设计。 使用Python的Web框架搭建网站,例如Django中的 manage.py startapp 命令创建应用,Flask中的 app.py 命令创建应用。 在应用中引入需

    2024年02月11日
    浏览(42)
  • 网站开发第一弹---HTML01

     🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页: 小小恶斯法克的博客 🎈该系列文章专栏: 网站开发flask框架 🍹文章作者技术和水平很有限,如果文中出现错误,希望大家能指正🙏 📜 感谢大家的关注! ❤️ 目录 1. 前后端

    2024年02月01日
    浏览(53)
  • 「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

    本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站,包括页面扩展的逻辑,vue的官方路由vue-router的基本用法以及扩展用法 「Vue|网页开发|前端开发」01 快速入门:快速写一个Vue的HelloWorld项目 我们在进行网站开发的时候,大多数都是需要有多个页面

    2024年02月11日
    浏览(48)
  • 动态网站开发02:Java Web概述

    目标:了解XML的概念,能够知道HTML用于做什么 1、XML XML是EXtensible Markup Language的缩写,它是一种类似于HTML的标记语言,称为可扩展标记语言。XML用于提供数据描述格式,适用于不同应用程序之间的数据交换,而且这种交换不以预先定义的一组数据结构为前提,增强了可扩展性

    2024年02月08日
    浏览(54)
  • 小例子——Flask网站开发(二)【保姆级】

      问题一:                如何实现Flask发送get请求? 下面是python代码演示。 要使用Flask发送GET请求,首先需要安装Flask库,然后创建一个Flask应用。 1. 首先在管理员窗口安装Flask库: ​ 2. 创建一个名为`app.py`的文件,并添加以下代码: ​ 在这个示例中,我们创建了一个名

    2024年04月23日
    浏览(28)
  • Flask开发简易网站疑难点梳理

    Flask是python的web框架, 首先python本身开发效率就高,再因为Flask是轻量级的,相比Django容易很多。 部署python项目时减少依赖包遗漏的情况,使用venv模块为每个项目创建独立的python环境,实现依赖的隔离。 在工程目录下运行:(xxxxxx是运行环境目录) 安装第三方python库和启动我

    2024年02月08日
    浏览(40)
  • Web 开发的 20 个实用网站

    作为一名前端开发工程师,我们一定使用过很多工具来提高自己的工作效率。它们可以是网站、文档或 JavaScript 库。 本文将分享20个实用网站。 https://jex.im/regulex/#!flags=re=%5E(a%7Cb)*%3F%24 我们可能会觉得正则表达式特别难学习,但现在不一样了。可视化工具使正则表达式更容易

    2024年02月19日
    浏览(40)
  • 如何做好网站建设定制开发

    随着互联网的发展,如今的 网站建设 技术越来越先进,所以在网站建设定制开发中就出现了很多的模版,如:企业类型、产品信息、品牌介绍等。当然网站建设定制开发不是说只要模版就行了,对于网站建设而言,模版只是作为辅助工具来使用,并不是主要的。 一款优秀的

    2024年02月07日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包