ThreeJs 学习之旅(十八)—Realistic render(真实渲染)

最新推荐文章于 2024-06-01 15:35:03 发布

Florenza

最新推荐文章于 2024-06-01 15:35:03 发布

阅读量1.8k

点赞数 1

分类专栏： ThreeJs 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_33839972/article/details/125124675

版权

ThreeJs 专栏收录该内容

17 篇文章 25 订阅

订阅专栏

初始代码

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();
const dirLight = new THREE.DirectionalLight("#ffffff", 3);
dirLight.position.set(0.25, 3, -2.25);
scene.add(dirLight);

/**
 * Test sphere
 */
const testSphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial()
)
scene.add(testSphere)




/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.set(4, 1, -4);
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));



/**
 * Animate
 */
const tick = () => {
  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

初始效果:

添加灯光GUI

gui
  .add(dirLight, "intensity")
  .min(0)
  .max(10)
  .step(0.001)
  .name("lightIntensity");
gui.add(dirLight.position, "x").min(-5).max(5).step(0.001).name("lightX");
gui.add(dirLight.position, "y").min(-5).max(5).step(0.001).name("lightY");
gui.add(dirLight.position, "z").min(-5).max(5).step(0.001).name("lightZ");

physicallyCorrectLights

: Boolean 默认false ，物理的正确的照明方式

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.physicallyCorrectLights=true

加载渲染模型

const gltfLoader=new GLTFLoader()
gltfLoader.load("/models/FlightHelmet/glTF/FlightHelmet.gltf", (gltf) => {
  const helmet = gltf.scene;
  helmet.scale.set(10, 10, 10);
  helmet.position.set(0, -4, 0);
  helmet.rotation.y = THREE.MathUtils.degToRad(90);
  scene.add(helmet);
  gui
    .add(helmet.rotation, "y")
    .min(-Math.PI)
    .max(Math.PI)
    .step(0.001)
    .name("rotation");
});

渲染环境

const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMap = cubeTextureLoader.load([
  "/textures/environmentMaps/0/px.jpg",
  "/textures/environmentMaps/0/nx.jpg",
  "/textures/environmentMaps/0/py.jpg",
  "/textures/environmentMaps/0/ny.jpg",
  "/textures/environmentMaps/0/pz.jpg",
  "/textures/environmentMaps/0/nz.jpg",
]);
scene.background=envMap

给模型加入环境贴图

.traverse ( callback : Function ) : null

callback - 以一个object3D对象作为第一个参数的函数。

通过此函数我们可以遍历加载的对象从而分析出加载模型的类型

目的在以后的每个分部分上可以添加阴影等其他效果

1.创建函数


const updateAllMats = () => {
  scene.traverse((child) => {
    console.log(child)
    
  });
};

2.调用函数

gltfLoader.load("/models/FlightHelmet/glTF/FlightHelmet.gltf", (gltf) => {
  const helmet = gltf.scene;
  helmet.scale.set(10, 10, 10);
  helmet.position.set(0, -4, 0);
  helmet.rotation.y = THREE.MathUtils.degToRad(90);
  scene.add(helmet);
  updateAllMats()
  gui
    .add(helmet.rotation, "y")
    .min(-Math.PI)
    .max(Math.PI)
    .step(0.001)
    .name("rotation");
});

通过判断类型可以给 mesh加入envmap材质

const updateAllMats = () => {
  scene.traverse((child) => {
    console.log(child)
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.material.envMap = envMap;
      child.material.needsUpdate = true;
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
};

加入后效果变化不是很明显

调节envMapIntensity可以看到效果

渲染器

outputEncoding

outputEncoding属性控制输出渲染编码。默认情况下，outputEncoding的值为THREE.LinearEncoding，看起来还行但是不真实，建议将值改为THREE.sRGBEncoding

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.physicallyCorrectLights=true
renderer.outputEncoding = THREE.sRGBEncoding

除此之外还有另一个属性值为THREE.GammaEncoding，这种编码的优点在于它允许我们使用一种表现像亮度brightness的叫gammaFactor的值。GammaEncoding是一种存储颜色的方法，根据人眼的敏感度优化明暗值的存储方式。当使用sRGBEncoding时，其实就像使用默认gammaFactor值为2.2的GammaEncoding。
下面链接可以提供更多信息关于GammaEncoding和sRGBEncoding

Color management in three.js
https://medium.com/game-dev-daily/the-srgb-learning-curve-773b7f68cf7a
尽管这样就可能会有人认为GammaEncoding优于sRGBEncoding，因为我们可以在更暗或更亮的场景里控制gammaFactor，但是实际上这样做在物理层面上并不正确，下面会讲到如何更好管理亮度brightness

Textures encoding

我们可以发现设置完渲染器的输出编码outputEncoding为THREE.sRGBEncoding后，我们的环境贴图颜色也改变了，虽然看起来效果不错，但我们还是要选择保留其原先正确的颜色。问题就在于我们设置完渲染器的输出编码之后，环境贴图的纹理还是默认的THREE.LinearEncoding。
其实规则很直接，所有我们能够直接看到的纹理贴图，比如map，就应该使用THREE.sRGBEncoding作为编码；而其他的纹理贴图比如法向纹理贴图normalMap就该使用THREE.LinearEncoding。
我们可以直接看到环境贴图，所以应该将其编码设为THREE.sRGBEncoding

Tone mapping

renderer.toneMapping = THREE.ACESFilmicToneMapping

色调映射Tone mapping旨在将超高的动态范围HDR转换到我们日常显示的屏幕上的低动态范围LDR的过程。
说明一下HDR和LDR（摘自知乎LDR和HDR）：

因为不同的厂家生产的屏幕亮度（物理）实际上是不统一的，那么我们在说LDR时，它是一个0到1范围的值，对应到不同的屏幕上就是匹配当前屏幕的最低亮度（0）和最高亮度（1）
自然界中的亮度差异是非常大的。例如，蜡烛的光强度大约为15，而太阳光的强度大约为10w。这中间的差异是非常大的，有着超级高的动态范围。
我们日常使用的屏幕，其最高亮度是经过一系列经验积累的，所以使用、用起来不会对眼睛有伤害；但自然界中的，比如我们直视太阳时，实际上是会对眼睛产生伤害的。
那为了改变色调映射tone mapping，则要更新WebGLRenderer上的toneMapping属性，有以下这些值

THREE.NoToneMapping (默认)
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping
尽管我们的贴图不是HDR，但使用tone mapping可以塑造更真实的效果。

我们也可以通过GUI 来改变查看效果对比

gui.add(renderer,"toneMapping",{
 No: THREE.NoToneMapping ,
 Linear:THREE.LinearToneMapping,
 Reinhard:THREE.ReinhardToneMapping,
 CineonTone:THREE.CineonToneMapping,
 ACESFilmicTone:THREE.ACESFilmicToneMapping
}).onFinishChange(()=>{
  renderer.toneMapping=Number(renderer.toneMapping)
})

但是这个效果只在环境上出现如果我们需要模型也相应的变化需要在完成时调用updateAllMats

同时让材质开启更新

child.material.needsUpdate = true;

const updateAllMats = () => {
  scene.traverse((child) => {
    console.log(child)
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.material.envMap = envMap;
      child.material.needsUpdate = true;
      child.material.envMapIntensity=debugObject.envMapIntensity
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
};
....

gui.add(renderer,"toneMapping",{
 No: THREE.NoToneMapping ,
 Linear:THREE.LinearToneMapping,
 Reinhard:THREE.ReinhardToneMapping,
 CineonTone:THREE.CineonToneMapping,
 ACESFilmicTone:THREE.ACESFilmicToneMapping
}).onFinishChange(()=>{
  renderer.toneMapping=Number(renderer.toneMapping)
  updateAllMats()
})

角色曝光度 Three.js中文文档http://www.webgl3d.cn/threejs/docs/#api/zh/renderers/WebGLRenderer

gui.add(renderer,"toneMappingExposure").min(0).max(10).step(0.01).name("toneMappingExposure")

抗锯齿化

当我们渲染的时候不开启 antialias

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});

当开启之后

明显消除了锯齿化效果

shardows阴影

dirLight.castShadow=truedirLight.shadow.mapSize.set(1024,1024)
dirLight.shadow.camera.far=15
dirLight.shadow.normalBias=0.05

...
...

const updateAllMats = () => {
  scene.traverse((child) => {
    console.log(child)
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.material.envMap = envMap;
      child.material.needsUpdate = true;
      child.material.envMapIntensity=debugObject.envMapIntensity
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
};

...
...

renderer.castShadow=true
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

Florenza

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
ThreeJs 学习之旅(十八)—Realistic render(真实渲染)

初始代码初始效果: : Boolean 默认false ，物理的正确的照明方式渲染环境callback - 以一个object3D对象作为第一个参数的函数。通过此函数我们可以遍历加载的对象从而分析出加载模型的类型目的在以后的每个分部分上可以添加阴影等其他效果1.创建函数 2.调用函数通过判断类型可以给 mesh加入envmap材质加入后效果变化不是很明显调节envMapIntensity可以看到效果属性控制输出渲染编码。默认情况下，o
复制链接

扫一扫