Skip to content

Commit

Permalink
[BREAKING] Refactor API for gammaCorrection, toneMapping and Fog sett…
Browse files Browse the repository at this point in the history
…ings (#7101)

* [BREAKING] Refactor API for gammaCorrection, toneMapping and Fog settings

* lint

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
  • Loading branch information
mvaligursky and Martin Valigursky authored Nov 14, 2024
1 parent 3b54515 commit a611fe2
Show file tree
Hide file tree
Showing 71 changed files with 393 additions and 409 deletions.
51 changes: 1 addition & 50 deletions examples/assets/scripts/misc/camera-frame.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,11 @@ import {
Script,
Color,
math,
RenderingParams,
CameraFrameOptions,
RenderPassCameraFrame,
FOG_NONE,
SSAOTYPE_NONE
} from 'playcanvas';

/** @enum {string} */
const FogType = {
NONE: 'none', // FOG_NONE
LINEAR: 'linear', // FOG_LINEAR
EXP: 'exp', // FOG_EXP
EXP2: 'exp2' // FOG_EXP2
};

/** @enum {number} */
const ToneMapping = {
LINEAR: 0, // TONEMAP_LINEAR
Expand Down Expand Up @@ -98,32 +88,6 @@ class Rendering {
* @step 0.001
*/
sharpness = 0.0;

/**
* @attribute
* @type {FogType}
*/
fog = FogType.NONE;

/**
* @attribute
*/
fogColor = new Color(1, 1, 1, 1);

/**
* @attribute
*/
fogStart = 0;

/**
* @attribute
*/
fogEnd = 100;

/**
* @attribute
*/
fogDensity = 0.01;
}

/** @interface */
Expand Down Expand Up @@ -332,8 +296,6 @@ class CameraFrame extends Script {

options = new CameraFrameOptions();

renderingParams = new RenderingParams();

initialize() {

this.updateOptions();
Expand All @@ -354,8 +316,6 @@ class CameraFrame extends Script {

createRenderPass() {
const cameraComponent = this.entity.camera;
cameraComponent.rendering = this.renderingParams;

this.renderPassCamera = new RenderPassCameraFrame(this.app, cameraComponent, this.options);
cameraComponent.renderPasses = [this.renderPassCamera];
}
Expand Down Expand Up @@ -388,21 +348,12 @@ class CameraFrame extends Script {
postUpdate(dt) {

const cameraComponent = this.entity.camera;
const { options, renderPassCamera, renderingParams, rendering, bloom, grading, vignette, fringing, taa, ssao } = this;
const { options, renderPassCamera, rendering, bloom, grading, vignette, fringing, taa, ssao } = this;

// options that can cause the passes to be re-created
this.updateOptions();
renderPassCamera.update(options);

// renderingParams
renderingParams.fog = rendering.fog;
if (renderingParams.fog !== FOG_NONE) {
renderingParams.fogColor.copy(rendering.fogColor);
renderingParams.fogStart = rendering.fogStart;
renderingParams.fogEnd = rendering.fogEnd;
renderingParams.fogDensity = rendering.fogDensity;
}

// update parameters of individual render passes
const { composePass, bloomPass, ssaoPass } = renderPassCamera;

Expand Down
4 changes: 2 additions & 2 deletions examples/src/examples/animation/locomotion.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ assetListLoader.load(() => {
app.scene.skyboxMip = 2;
app.scene.skyboxIntensity = 0.7;
app.scene.envAtlas = assets.helipad.resource;
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// Create an Entity with a camera component
const cameraEntity = new pc.Entity();
cameraEntity.name = 'Camera';
cameraEntity.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.15, 0.2)
clearColor: new pc.Color(0.1, 0.15, 0.2),
toneMapping: pc.TONEMAP_ACES
});

cameraEntity.translateLocal(0.5, 3, 8);
Expand Down
6 changes: 3 additions & 3 deletions examples/src/examples/compute/histogram.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,6 @@ app.on('destroy', () => {

const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// setup skydome
app.scene.skyboxMip = 2;
Expand All @@ -67,7 +65,9 @@ assetListLoader.load(() => {

// create camera entity
const camera = new pc.Entity('camera');
camera.addComponent('camera');
camera.addComponent('camera', {
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);
camera.setPosition(0, 0, 5);

Expand Down
5 changes: 3 additions & 2 deletions examples/src/examples/compute/particles.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,15 @@ app.on('destroy', () => {
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 2;
app.scene.skyboxIntensity = 0.2;
app.scene.envAtlas = assets.helipad.resource;

// create camera entity
const cameraEntity = new pc.Entity('camera');
cameraEntity.addComponent('camera');
cameraEntity.addComponent('camera', {
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(cameraEntity);
cameraEntity.setPosition(-150, -60, 190);

Expand Down
5 changes: 2 additions & 3 deletions examples/src/examples/compute/texture-gen.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,6 @@ app.on('destroy', () => {

const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// setup skydome
app.scene.skyboxMip = 1;
Expand All @@ -65,7 +63,8 @@ assetListLoader.load(() => {
// create camera entity
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.5, 0.6, 0.9)
clearColor: new pc.Color(0.5, 0.6, 0.9),
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);
camera.setPosition(0.6, 0, 5);
Expand Down
6 changes: 2 additions & 4 deletions examples/src/examples/graphics/area-lights.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -183,9 +183,6 @@ assetListLoader.load(() => {
const luts = assets.luts.resource;
app.setAreaLightLuts(luts.LTC_MAT_1, luts.LTC_MAT_2);

// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// setup skydome
app.scene.skyboxMip = 1; // use top mipmap level of cubemap (full resolution)
app.scene.skyboxIntensity = 0.4; // make it darker
Expand All @@ -204,7 +201,8 @@ assetListLoader.load(() => {
camera.addComponent('camera', {
clearColor: new pc.Color(0.2, 0.2, 0.2),
fov: 60,
farClip: 100000
farClip: 100000,
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);
camera.setLocalPosition(0, 2.5, 12);
Expand Down
5 changes: 3 additions & 2 deletions examples/src/examples/graphics/asset-viewer.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,9 @@ assetListLoader.load(() => {

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent('camera', {});
camera.addComponent('camera', {
toneMapping: pc.TONEMAP_NEUTRAL
});
camera.setLocalPosition(0, 55, 160);

camera.camera.requestSceneColorMap(true);
Expand Down Expand Up @@ -195,7 +197,6 @@ assetListLoader.load(() => {
app.root.addChild(directionalLight);

app.scene.envAtlas = assets.helipad.resource;
app.scene.rendering.toneMapping = pc.TONEMAP_NEUTRAL;
app.scene.skyboxMip = 1;
app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
app.scene.skyboxIntensity = 1.5;
Expand Down
10 changes: 5 additions & 5 deletions examples/src/examples/graphics/clustered-lighting.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,6 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

// if the device renders in HDR mode, disable tone mapping to output HDR values without any processing
app.scene.rendering.toneMapping = device.isHdr ? pc.TONEMAP_NONE : pc.TONEMAP_ACES;
app.scene.rendering.gammaCorrection = pc.GAMMA_SRGB;

/** @type {Array<pc.Entity>} */
const pointLightList = [];
/** @type {Array<pc.Entity>} */
Expand Down Expand Up @@ -196,7 +192,11 @@ assetListLoader.load(() => {
camera.addComponent('camera', {
clearColor: new pc.Color(0.05, 0.05, 0.05),
farClip: 500,
nearClip: 0.1
nearClip: 0.1,

// if the device renders in HDR mode, disable tone mapping to output HDR values without any processing
toneMapping: device.isHdr ? pc.TONEMAP_NONE : pc.TONEMAP_ACES,
gammaCorrection: pc.GAMMA_SRGB
});
camera.setLocalPosition(140, 140, 140);
camera.lookAt(new pc.Vec3(0, 40, 0));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,6 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

data.set('settings', {
shadowAtlasResolution: 1300, // shadow map resolution storing all shadows
shadowType: pc.SHADOW_PCF3, // shadow filter type
Expand Down Expand Up @@ -225,7 +222,8 @@ assetListLoader.load(() => {
camera.addComponent('camera', {
fov: 80,
clearColor: new pc.Color(0.1, 0.1, 0.1),
farClip: 1500
farClip: 1500,
toneMapping: pc.TONEMAP_ACES
});

// and position it in the world
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;
app.scene.ambientLight.set(0, 0, 0);
app.scene.ambientLuminance = 0;
Expand Down Expand Up @@ -235,7 +234,8 @@ assetListLoader.load(() => {
// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(0.4, 0.45, 0.5)
clearColor: new pc.Color(0.4, 0.45, 0.5),
toneMapping: pc.TONEMAP_ACES
});
camera.setLocalPosition(0, 5, 11);

Expand Down
4 changes: 2 additions & 2 deletions examples/src/examples/graphics/dispersion.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ assetListLoader.load(() => {

// set skybox
app.scene.envAtlas = assets.helipad.resource;
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;

// get the instance of the cube it set up with render component and add it to scene
Expand All @@ -71,7 +70,8 @@ assetListLoader.load(() => {
camera.addComponent('camera', {
clearColor: new pc.Color(0.2, 0.2, 0.2),
nearClip: 0.01,
farClip: 2
farClip: 2,
toneMapping: pc.TONEMAP_ACES
});

// the color grab pass is needed
Expand Down
5 changes: 2 additions & 3 deletions examples/src/examples/graphics/grab-pass.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ assetListLoader.load(() => {
app.scene.exposure = 2;
app.scene.envAtlas = assets.helipad.resource;

app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// Depth layer is where the framebuffer is copied to a texture to be used in the following layers.
// Move the depth layer to take place after World and Skydome layers, to capture both of them.
const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
Expand Down Expand Up @@ -115,7 +113,8 @@ assetListLoader.load(() => {
// Create the camera, which renders entities
const camera = new pc.Entity('SceneCamera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.2, 0.2, 0.2)
clearColor: new pc.Color(0.2, 0.2, 0.2),
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);
camera.setLocalPosition(0, 10, 20);
Expand Down
4 changes: 2 additions & 2 deletions examples/src/examples/graphics/ground-fog.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ assetListLoader.load(() => {
app.scene.skyboxMip = 3;
app.scene.envAtlas = assets.helipad.resource;
app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -70, 0);
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// disable skydome rendering
const skyLayer = app.scene.layers.getLayerById(pc.LAYERID_SKYBOX);
Expand All @@ -84,7 +83,8 @@ assetListLoader.load(() => {
const camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(150 / 255, 213 / 255, 63 / 255),
farClip: 1000
farClip: 1000,
toneMapping: pc.TONEMAP_ACES
});

// and position it in the world
Expand Down
7 changes: 3 additions & 4 deletions examples/src/examples/graphics/instancing-basic.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,13 @@ assetListLoader.load(() => {
app.scene.exposure = 0.3;
app.scene.envAtlas = assets.helipad.resource;

// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

app.scene.ambientLight = new pc.Color(0.1, 0.1, 0.1);

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent('camera', {});
camera.addComponent('camera', {
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);

// Move the camera back to see the cubes
Expand Down
5 changes: 3 additions & 2 deletions examples/src/examples/graphics/instancing-custom.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,13 @@ assetListLoader.load(() => {
app.scene.envAtlas = assets.helipad.resource;

// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
app.scene.ambientLight = new pc.Color(0.1, 0.1, 0.1);

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent('camera', {});
camera.addComponent('camera', {
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);

// create static vertex buffer containing the instancing data
Expand Down
4 changes: 2 additions & 2 deletions examples/src/examples/graphics/instancing-glb.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ assetListLoader.load(() => {
const camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(0.2, 0.1, 0.1),
farClip: 100
farClip: 100,
toneMapping: pc.TONEMAP_ACES
});
camera.translate(25, 15, 25);

Expand All @@ -89,7 +90,6 @@ assetListLoader.load(() => {

// set skybox
app.scene.envAtlas = assets.helipad.resource;
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
app.scene.skyboxMip = 1;
});

Expand Down
7 changes: 3 additions & 4 deletions examples/src/examples/graphics/instancing-gooch.example.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,11 @@ assetListLoader.load(() => {
app.scene.skyboxMip = 2;
app.scene.envAtlas = assets.helipad.resource;

// set up some general scene rendering properties
app.scene.rendering.toneMapping = pc.TONEMAP_ACES;

// Create an Entity with a camera component
const camera = new pc.Entity();
camera.addComponent('camera', {});
camera.addComponent('camera', {
toneMapping: pc.TONEMAP_ACES
});
app.root.addChild(camera);

// number of instanced trees to render
Expand Down
Loading

0 comments on commit a611fe2

Please sign in to comment.