Skip to content

Commit 9efc7d0

Browse files
mvaligurskyMartin Valigursky
mvaligursky
and
Martin Valigursky
authored
CameraFrame API in the engine (playcanvas#7129)
* CameraFrame API in the engine * lint * Vignette docs * jitter / sharpness docs improvement * render formats / samples docs * renderTargetScale * description for settings types * renamed lastMipLevel -> blurLevel * ssao constants docs --------- Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
1 parent 079caff commit 9efc7d0

16 files changed

+537
-150
lines changed

‎eslint.config.mjs‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import playcanvasConfig from '@playcanvas/eslint-config';
22
import babelParser from '@babel/eslint-parser';
33
import globals from 'globals';
44

5+
// Extract or preserve existing JSDoc tags
6+
const jsdocRule = playcanvasConfig.find(
7+
config => config.rules && config.rules['jsdoc/check-tag-names']
8+
);
9+
const existingTags = jsdocRule?.rules['jsdoc/check-tag-names'][1]?.definedTags || [];
10+
511
export default [
612
...playcanvasConfig,
713
{
@@ -27,7 +33,14 @@ export default [
2733
}
2834
},
2935
rules: {
30-
'import/order': 'off'
36+
'import/order': 'off',
37+
'jsdoc/check-tag-names': [
38+
'error',
39+
{
40+
// custom mjs script tags to not error on, add them to those from parent config
41+
definedTags: [...new Set([...existingTags, 'range', 'step', 'precision'])]
42+
}
43+
]
3144
}
3245
},
3346
{

‎examples/src/examples/animation/events.example.mjs‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { deviceType, rootPath, fileImport } from 'examples/utils';
1+
import { deviceType, rootPath } from 'examples/utils';
22
import * as pc from 'playcanvas';
3-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
43

54
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
65
window.focus();
@@ -34,13 +33,11 @@ createOptions.componentSystems = [
3433
pc.RenderComponentSystem,
3534
pc.CameraComponentSystem,
3635
pc.LightComponentSystem,
37-
pc.ScriptComponentSystem,
3836
pc.AnimComponentSystem
3937
];
4038
createOptions.resourceHandlers = [
4139
pc.TextureHandler,
4240
pc.ContainerHandler,
43-
pc.ScriptHandler,
4441
pc.AnimClipHandler,
4542
pc.AnimStateGraphHandler
4643
];
@@ -76,12 +73,12 @@ assetListLoader.load(() => {
7673

7774
// ------ Custom render passes set up ------
7875

79-
cameraEntity.addComponent('script');
80-
const cameraFrame = cameraEntity.script.create(CameraFrame);
76+
const cameraFrame = new pc.CameraFrame(app, cameraEntity.camera);
8177
cameraFrame.rendering.toneMapping = pc.TONEMAP_NEUTRAL;
8278
cameraFrame.rendering.samples = 4;
8379
cameraFrame.bloom.enabled = true;
8480
cameraFrame.bloom.intensity = 0.01;
81+
cameraFrame.update();
8582

8683
// ------------------------------------------
8784

‎examples/src/examples/camera/first-person.example.mjs‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
// @config DESCRIPTION <div style='text-align:center'><div>(<b>WASD</b>) Move</div><div>(<b>Space</b>) Jump</div><div>(<b>Mouse</b>) Look</div></div>
2-
import { deviceType, rootPath, fileImport } from 'examples/utils';
2+
import { deviceType, rootPath } from 'examples/utils';
33
import * as pc from 'playcanvas';
44

5-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
6-
75
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
86
window.focus();
97

@@ -148,15 +146,12 @@ cameraEntity.setLocalPosition(0, 0.5, 0);
148146

149147
// ------ Custom render passes set up ------
150148

151-
cameraEntity.addComponent('script');
152-
/** @type { CameraFrame } */
153-
const cameraFrame = cameraEntity.script.create(CameraFrame);
154-
149+
const cameraFrame = new pc.CameraFrame(app, cameraEntity.camera);
155150
cameraFrame.rendering.samples = 4;
156151
cameraFrame.rendering.toneMapping = pc.TONEMAP_ACES2;
157-
158152
cameraFrame.bloom.enabled = true;
159153
cameraFrame.bloom.intensity = 0.01;
154+
cameraFrame.update();
160155

161156
// ------------------------------------------
162157

‎examples/src/examples/graphics/ambient-occlusion.example.mjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { data } from 'examples/observer';
2-
import { deviceType, rootPath, fileImport } from 'examples/utils';
2+
import { deviceType, rootPath } from 'examples/utils';
33
import * as pc from 'playcanvas';
4-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
54

65
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
76
window.focus();
@@ -168,8 +167,7 @@ assetListLoader.load(() => {
168167

169168
// ------ Custom render passes set up ------
170169

171-
/** @type { CameraFrame } */
172-
const cameraFrame = cameraEntity.script.create(CameraFrame);
170+
const cameraFrame = new pc.CameraFrame(app, cameraEntity.camera);
173171
cameraFrame.rendering.samples = 4;
174172
cameraFrame.rendering.toneMapping = pc.TONEMAP_NEUTRAL;
175173

@@ -183,6 +181,8 @@ assetListLoader.load(() => {
183181
cameraFrame.ssao.samples = data.get('data.ssao.samples');
184182
cameraFrame.ssao.minAngle = data.get('data.ssao.minAngle');
185183
cameraFrame.ssao.scale = data.get('data.ssao.scale');
184+
185+
cameraFrame.update();
186186
};
187187

188188
// apply UI changes

‎examples/src/examples/graphics/clustered-area-lights.example.mjs‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { data } from 'examples/observer';
2-
import { deviceType, rootPath, fileImport } from 'examples/utils';
2+
import { deviceType, rootPath } from 'examples/utils';
33
import * as pc from 'playcanvas';
4-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
54

65
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
76
window.focus();
@@ -228,11 +227,11 @@ assetListLoader.load(() => {
228227
app.root.addChild(camera);
229228

230229
// custom render passes
231-
const cameraFrame = camera.script.create(CameraFrame);
230+
const cameraFrame = new pc.CameraFrame(app, camera.camera);
232231
cameraFrame.rendering.samples = 4;
233-
cameraFrame.bloom.enabled = true;
234232
cameraFrame.bloom.intensity = 0.01;
235-
cameraFrame.bloom.lastMipLevel = 4;
233+
cameraFrame.bloom.blurLevel = 4;
234+
cameraFrame.update();
236235

237236
// if the device renders in HDR mode, disable tone mapping to output HDR values without any processing
238237
cameraFrame.rendering.toneMapping = device.isHdr ? pc.TONEMAP_NONE : pc.TONEMAP_NEUTRAL;

‎examples/src/examples/graphics/dithered-transparency.example.mjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { data } from 'examples/observer';
2-
import { deviceType, rootPath, fileImport } from 'examples/utils';
2+
import { deviceType, rootPath } from 'examples/utils';
33
import * as pc from 'playcanvas';
4-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
54

65
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
76
window.focus();
@@ -159,15 +158,16 @@ assetListLoader.load(() => {
159158

160159
// ------ Custom render passes set up ------
161160

162-
/** @type { CameraFrame } */
163-
const cameraFrame = cameraEntity.script.create(CameraFrame);
161+
const cameraFrame = new pc.CameraFrame(app, cameraEntity.camera);
164162
cameraFrame.rendering.toneMapping = pc.TONEMAP_ACES;
165163
cameraFrame.rendering.sceneColorMap = true;
166164
cameraFrame.taa.jitter = 1;
165+
cameraFrame.update();
167166

168167
const applySettings = () => {
169168
cameraFrame.taa.enabled = data.get('data.taa');
170169
cameraFrame.rendering.sharpness = cameraFrame.taa.enabled ? 1 : 0;
170+
cameraFrame.update();
171171
};
172172

173173
// ------

‎examples/src/examples/graphics/portal.example.mjs‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { deviceType, rootPath, fileImport } from 'examples/utils';
1+
import { deviceType, rootPath } from 'examples/utils';
22
import * as pc from 'playcanvas';
3-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
43

54
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
65
window.focus();
@@ -159,13 +158,11 @@ assetListLoader.load(() => {
159158

160159
// ------ Custom render passes set up ------
161160

162-
camera.addComponent('script');
163-
/** @type { CameraFrame } */
164-
const cameraFrame = camera.script.create(CameraFrame);
165-
161+
const cameraFrame = new pc.CameraFrame(app, camera.camera);
166162
cameraFrame.rendering.stencil = true;
167163
cameraFrame.rendering.samples = 4;
168164
cameraFrame.rendering.toneMapping = pc.TONEMAP_ACES2;
165+
cameraFrame.update();
169166

170167
// ------------------------------------------
171168

‎examples/src/examples/graphics/post-processing.controls.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,12 @@ export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
8686
),
8787
jsx(
8888
LabelGroup,
89-
{ text: 'last mip level' },
89+
{ text: 'blur level' },
9090
jsx(SliderInput, {
9191
binding: new BindingTwoWay(),
92-
link: { observer, path: 'data.bloom.lastMipLevel' },
92+
link: { observer, path: 'data.bloom.blurLevel' },
9393
min: 1,
94-
max: 10,
94+
max: 16,
9595
precision: 0
9696
})
9797
)

‎examples/src/examples/graphics/post-processing.example.mjs‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { data } from 'examples/observer';
2-
import { deviceType, rootPath, fileImport } from 'examples/utils';
2+
import { deviceType, rootPath } from 'examples/utils';
33
import * as pc from 'playcanvas';
4-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
54

65
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
76
window.focus();
@@ -216,9 +215,9 @@ assetListLoader.load(() => {
216215

217216
// ------ Custom render passes set up ------
218217

219-
/** @type { CameraFrame } */
220-
const cameraFrame = cameraEntity.script.create(CameraFrame);
218+
const cameraFrame = new pc.CameraFrame(app, cameraEntity.camera);
221219
cameraFrame.rendering.sceneColorMap = true;
220+
cameraFrame.update();
222221

223222
const applySettings = () => {
224223

@@ -247,9 +246,8 @@ assetListLoader.load(() => {
247246
cameraFrame.taa.jitter = data.get('data.taa.jitter');
248247

249248
// Bloom
250-
cameraFrame.bloom.enabled = data.get('data.bloom.enabled');
251-
cameraFrame.bloom.intensity = pc.math.lerp(0, 0.1, data.get('data.bloom.intensity') / 100);
252-
cameraFrame.bloom.lastMipLevel = data.get('data.bloom.lastMipLevel');
249+
cameraFrame.bloom.intensity = data.get('data.bloom.enabled') ? pc.math.lerp(0, 0.1, data.get('data.bloom.intensity') / 100) : 0;
250+
cameraFrame.bloom.blurLevel = data.get('data.bloom.blurLevel');
253251

254252
// grading
255253
cameraFrame.grading.enabled = data.get('data.grading.enabled');
@@ -258,15 +256,16 @@ assetListLoader.load(() => {
258256
cameraFrame.grading.contrast = data.get('data.grading.contrast');
259257

260258
// vignette
261-
cameraFrame.vignette.enabled = data.get('data.vignette.enabled');
262259
cameraFrame.vignette.inner = data.get('data.vignette.inner');
263260
cameraFrame.vignette.outer = data.get('data.vignette.outer');
264261
cameraFrame.vignette.curvature = data.get('data.vignette.curvature');
265-
cameraFrame.vignette.intensity = data.get('data.vignette.intensity');
262+
cameraFrame.vignette.intensity = data.get('data.vignette.enabled') ? data.get('data.vignette.intensity') : 0;
266263

267264
// fringing
268-
cameraFrame.fringing.enabled = data.get('data.fringing.enabled');
269-
cameraFrame.fringing.intensity = data.get('data.fringing.intensity');
265+
cameraFrame.fringing.intensity = data.get('data.fringing.enabled') ? data.get('data.fringing.intensity') : 0;
266+
267+
// apply all settings
268+
cameraFrame.update();
270269
};
271270

272271
// apply UI changes
@@ -285,7 +284,7 @@ assetListLoader.load(() => {
285284
bloom: {
286285
enabled: true,
287286
intensity: 5,
288-
lastMipLevel: 1
287+
blurLevel: 16
289288
},
290289
grading: {
291290
enabled: false,

‎examples/src/examples/graphics/taa.example.mjs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { data } from 'examples/observer';
2-
import { deviceType, rootPath, fileImport } from 'examples/utils';
2+
import { deviceType, rootPath } from 'examples/utils';
33
import * as pc from 'playcanvas';
4-
const { CameraFrame } = await fileImport(`${rootPath}/static/assets/scripts/misc/camera-frame.mjs`);
54

65
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
76
window.focus();
@@ -118,20 +117,21 @@ assetListLoader.load(() => {
118117

119118
// ------ Custom render passes set up ------
120119

121-
/** @type { CameraFrame } */
122-
const cameraFrame = cameraEntity.script.create(CameraFrame);
120+
const cameraFrame = new pc.CameraFrame(app, cameraEntity.camera);
123121
cameraFrame.rendering.toneMapping = pc.TONEMAP_ACES;
124122
cameraFrame.bloom.intensity = 0.02;
123+
cameraFrame.update();
125124

126125
// ------
127126

128127
const applySettings = () => {
129128

130-
cameraFrame.bloom.enabled = data.get('data.scene.bloom');
129+
cameraFrame.bloom.intensity = data.get('data.scene.bloom') ? 0.02 : 0;
131130
cameraFrame.taa.enabled = data.get('data.taa.enabled');
132131
cameraFrame.taa.jitter = data.get('data.taa.jitter');
133132
cameraFrame.rendering.renderTargetScale = data.get('data.scene.scale');
134133
cameraFrame.rendering.sharpness = data.get('data.scene.sharpness');
134+
cameraFrame.update();
135135
};
136136

137137
// apply UI changes

0 commit comments

Comments
 (0)