How to use the ACESFilmicToneMapping function from three

Find comprehensive JavaScript three.ACESFilmicToneMapping code examples handpicked from public code repositorys.

three.ACESFilmicToneMapping is a tone mapping technique used to convert high dynamic range (HDR) images to low dynamic range (LDR) images in computer graphics, which results in an image with greater perceived contrast and brightness.

Factory.js

55
56
57
58
59
60
61
62
63
64
dom.style.overflow = 'hidden';
var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true, powerPreference: 'high-performance' }); //创建渲染器
renderer.shadowMap.enabled = true; //阴影设置
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.77;
//光效设置
var ambient = new THREE.AmbientLight(0xffffff, 0.7); //环境光
scene.add(ambient);

+ 12 other calls in file

How does three.ACESFilmicToneMapping work?

THREE.ACESFilmicToneMapping is a tone mapping algorithm used in computer graphics to convert high dynamic range (HDR) images to low dynamic range (LDR) images that can be displayed on a standard display. The algorithm is designed to preserve the appearance of colors and brightness in the image, while also compensating for the limitations of the display. It is based on the ACES (Academy Color Encoding System) color space, which is a standard for color management in the film and video industry. In more detail, THREE.ACESFilmicToneMapping is a post-processing effect that is applied to a rendered scene in three.js. When this tone mapping algorithm is used, the brightness and color values of each pixel in the image are adjusted based on the intensity of the light sources in the scene and the colors of the objects in the scene. The algorithm is designed to produce images that look more realistic and natural, with more detail in both the bright and dark areas of the image. The output of the algorithm is an LDR image that can be displayed on a standard display.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import * as THREE from "three";

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const toneMapping = THREE.ACESFilmicToneMapping; // set tone mapping to ACESFilmic
renderer.toneMapping = toneMapping;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

In this example, ACESFilmicToneMapping is used to set the tone mapping of the WebGL renderer to the ACESFilmic tone mapping algorithm. This creates a more realistic and vibrant image with better contrast and highlights.

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About