Skip to content

Commit

Permalink
Merge branch 'main' into feat/pc-upgrade-scratch
Browse files Browse the repository at this point in the history
  • Loading branch information
@MAG-AdrianMeredith
MAG-AdrianMeredith committed Sep 12, 2024
2 parents 80077b5 + 09901d1 commit 9923e8b
Show file tree
Hide file tree
Showing 119 changed files with 4,360 additions and 3,777 deletions.
55 changes: 55 additions & 0 deletions eslint.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import playcanvasConfig from '@playcanvas/eslint-config';
import babelParser from '@babel/eslint-parser';
import globals from 'globals';

export default [
...playcanvasConfig,
{
files: ['**/*.js', '**/*.mjs'],
languageOptions: {
ecmaVersion: 2022,
sourceType: 'module',
parser: babelParser,
parserOptions: {
requireConfigFile: false
},
globals: {
...globals.browser,
...globals.mocha,
...globals.node,
'Ammo': false,
'earcut': false,
'opentype': false,
'pc': false,
'TWEEN': false,
'twgsl': false,
'webkitAudioContext': false
}
},
rules: {
'import/order': 'off'
}
},
{
files: ['scripts/**/*.js'],
rules: {
'no-var': 'off'
}
},
{
files: ['test/**/*.mjs'],
rules: {
'no-unused-expressions': 'off',
'prefer-arrow-callback': 'off' // Mocha uses function callbacks
}
},
{
ignores: [
'tests/**/*',
'examples/lib/*',
'scripts/textmesh/*.min.js',
'src/polyfill/*',
'scripts/spine/*'
]
}
];
2 changes: 1 addition & 1 deletion examples/src/app/components/code-editor/CodeEditorDesktop.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ class CodeEditorDesktop extends CodeEditorBase {
const examplePath =
location.hash === '#/' ? 'misc/hello-world' : location.hash.replace('#/', '');
window.open(
`https://github.com/playcanvas/engine/blob/main/examples/src/examples/${examplePath}.mjs`
`https://github.com/playcanvas/engine/blob/main/examples/src/examples/${examplePath}.example.mjs`
);
}
})
Expand Down
15 changes: 11 additions & 4 deletions examples/src/examples/graphics/ambient-occlusion.controls.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import * as pc from 'playcanvas';

/**
* @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
* @returns {JSX.Element} The returned JSX Element.
Expand All @@ -10,11 +12,16 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
{ headerText: 'Ambient Occlusion' },
jsx(
LabelGroup,
{ text: 'enabled' },
jsx(BooleanInput, {
type: 'toggle',
{ text: 'Type' },
jsx(SelectInput, {
binding: new BindingTwoWay(),
link: { observer, path: 'data.ssao.enabled' }
link: { observer, path: 'data.ssao.type' },
type: 'string',
options: [
{ v: pc.SSAOTYPE_NONE, t: 'None' },
{ v: pc.SSAOTYPE_LIGHTING, t: 'Lighting' },
{ v: pc.SSAOTYPE_COMBINE, t: 'Combine' }
]
})
),
jsx(
Expand Down
75 changes: 17 additions & 58 deletions examples/src/examples/graphics/ambient-occlusion.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,60 +167,24 @@ assetListLoader.load(() => {

// ------ Custom render passes set up ------

const currentOptions = {
camera: cameraEntity.camera, // camera used to render those passes
samples: 1, // number of samples for multi-sampling
sceneColorMap: false,
bloomEnabled: false,
const currentOptions = new pc.CameraFrameOptions();
currentOptions.samples = 4;
currentOptions.sceneColorMap = false;
currentOptions.ssaoType = pc.SSAOTYPE_LIGHTING;
currentOptions.ssaoBlurEnabled = true;

// enable the pre-pass to generate the depth buffer, which is needed by the SSAO
prepassEnabled: true,

// enable temporal anti-aliasing
taaEnabled: false,

ssaoEnabled: true,
ssaoBlurEnabled: true
};

const setupRenderPass = () => {
// destroy existing pass if any
if (cameraEntity.camera.renderPasses.length > 0) {
cameraEntity.camera.renderPasses[0].destroy();
}

// Use a render pass camera frame, which is a render pass that implements typical rendering of a camera.
// Internally this sets up additional passes it needs, based on the options passed to it.
const renderPassCamera = new pc.RenderPassCameraFrame(app, currentOptions);

renderPassCamera.ssaoEnabled = currentOptions.ssaoEnabled;

const composePass = renderPassCamera.composePass;
composePass.sharpness = 0;

// and set up these rendering passes to be used by the camera, instead of its default rendering
cameraEntity.camera.renderPasses = [renderPassCamera];

// jitter the camera when TAA is enabled
cameraEntity.camera.jitter = currentOptions.taaEnabled ? 1 : 0;
};
// and set up these rendering passes to be used by the camera, instead of its default rendering
const renderPassCamera = new pc.RenderPassCameraFrame(app, cameraEntity.camera, currentOptions);
cameraEntity.camera.renderPasses = [renderPassCamera];

const applySettings = () => {
// if settings require render passes to be re-created
const noPasses = cameraEntity.camera.renderPasses.length === 0;
const ssaoEnabled = data.get('data.ssao.enabled');
const blurEnabled = data.get('data.ssao.blurEnabled');
if (noPasses || ssaoEnabled !== currentOptions.ssaoEnabled || blurEnabled !== currentOptions.ssaoBlurEnabled) {
currentOptions.ssaoEnabled = ssaoEnabled;
currentOptions.ssaoBlurEnabled = blurEnabled;

// create new pass
setupRenderPass();
}

const renderPassCamera = cameraEntity.camera.renderPasses[0];
// update current options and apply them
currentOptions.ssaoType = data.get('data.ssao.type');
currentOptions.ssaoBlurEnabled = data.get('data.ssao.blurEnabled');
renderPassCamera.update(currentOptions);

// ssao settings
// apply options on the other passes
const ssaoPass = renderPassCamera.ssaoPass;
if (ssaoPass) {

Expand All @@ -234,14 +198,13 @@ assetListLoader.load(() => {
};

// apply UI changes
let initialValuesSetup = false;
data.on('*:set', (/** @type {string} */ path, value) => {
if (initialValuesSetup)
applySettings();

applySettings();

// if scale has changed, adjust min angle based on scale to avoid depth related artifacts
const pathArray = path.split('.');
if (pathArray[2] === 'scale') {
// adjust min angle based on scale to avoid depth related artifacts
if (value < 0.6)
data.set('data.ssao.minAngle', 40);
else if (value < 0.8)
Expand All @@ -254,7 +217,7 @@ assetListLoader.load(() => {
// initial settings
data.set('data', {
ssao: {
enabled: true,
type: pc.SSAOTYPE_LIGHTING,
blurEnabled: true,
radius: 30,
samples: 12,
Expand All @@ -264,10 +227,6 @@ assetListLoader.load(() => {
scale: 1
}
});

// apply initial settings after all values are set
initialValuesSetup = true;
applySettings();
});

export { app };
61 changes: 19 additions & 42 deletions examples/src/examples/graphics/dithered-transparency.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,47 +161,20 @@ assetListLoader.load(() => {

// ------ Custom render passes set up ------

const currentOptions = {
camera: cameraEntity.camera, // camera used to render those passes
samples: 0, // number of samples for multi-sampling
sceneColorMap: true,
bloomEnabled: false,

// enable the pre-pass to generate the depth buffer, which is needed by the TAA
prepassEnabled: true,

// enable temporal anti-aliasing
taaEnabled: true
};

const setupRenderPass = () => {
// destroy existing pass if any
if (cameraEntity.camera.renderPasses.length > 0) {
cameraEntity.camera.renderPasses[0].destroy();
}

// Use a render pass camera frame, which is a render pass that implements typical rendering of a camera.
// Internally this sets up additional passes it needs, based on the options passed to it.
const renderPassCamera = new pc.RenderPassCameraFrame(app, currentOptions);

const composePass = renderPassCamera.composePass;
composePass.toneMapping = pc.TONEMAP_ACES;
composePass.sharpness = currentOptions.taaEnabled ? 1 : 0;
const currentOptions = new pc.CameraFrameOptions();
currentOptions.sceneColorMap = true;
currentOptions.taaEnabled = true;

// and set up these rendering passes to be used by the camera, instead of its default rendering
cameraEntity.camera.renderPasses = [renderPassCamera];

// jitter the camera when TAA is enabled
cameraEntity.camera.jitter = currentOptions.taaEnabled ? 1 : 0;
};

setupRenderPass();
// and set up these rendering passes to be used by the camera, instead of its default rendering
const renderPassCamera = new pc.RenderPassCameraFrame(app, cameraEntity.camera, currentOptions);
cameraEntity.camera.renderPasses = [renderPassCamera];

// ------

// handle UI changes
data.on('*:set', (/** @type {string} */ path, value) => {
const propertyName = path.split('.')[1];

materials.forEach((material) => {
// apply the value to the material
material[propertyName] = value;
Expand All @@ -215,15 +188,19 @@ assetListLoader.load(() => {
}

material.update();

// if TAA property changes, we need to set up render passes again
if (propertyName === 'taa') {
if (currentOptions.taaEnabled !== value) {
currentOptions.taaEnabled = value;
setupRenderPass();
}
}
});

// if TAA property changes
if (propertyName === 'taa') {
currentOptions.taaEnabled = data.get('data.taa');
renderPassCamera.update(currentOptions);

const composePass = renderPassCamera.composePass;
composePass.sharpness = currentOptions.taaEnabled ? 1 : 0;

// jitter the camera when TAA is enabled
cameraEntity.camera.jitter = currentOptions.taaEnabled ? 1 : 0;
}
});

// initial values
Expand Down
66 changes: 18 additions & 48 deletions examples/src/examples/graphics/post-processing.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,52 +215,26 @@ assetListLoader.load(() => {

// ------ Custom render passes set up ------

const currentOptions = {
camera: cameraEntity.camera, // camera used to render those passes
samples: 0, // number of samples for multi-sampling
sceneColorMap: true, // true if the scene color should be captured
bloomEnabled: true,

// disabled TAA as it currently does not handle dynamic objects
prepassEnabled: false,
taaEnabled: false
};

const setupRenderPass = () => {
// destroy existing pass if any
if (cameraEntity.camera.renderPasses.length > 0) {
cameraEntity.camera.renderPasses[0].destroy();
}
const currentOptions = new pc.CameraFrameOptions();
currentOptions.sceneColorMap = true;
currentOptions.bloomEnabled = true;
currentOptions.taaEnabled = false; // disabled TAA as it currently does not handle dynamic objects

// Use a render pass camera frame, which is a render pass that implements typical rendering of a camera.
// Internally this sets up additional passes it needs, based on the options passed to it.
const renderPassCamera = new pc.RenderPassCameraFrame(app, currentOptions);

// and set up these rendering passes to be used by the camera, instead of its default rendering
cameraEntity.camera.renderPasses = [renderPassCamera];
};
// and set up these rendering passes to be used by the camera, instead of its default rendering
const renderPassCamera = new pc.RenderPassCameraFrame(app, cameraEntity.camera, currentOptions);
cameraEntity.camera.renderPasses = [renderPassCamera];

// ------

const applySettings = () => {
// if settings require render passes to be re-created
const noPasses = cameraEntity.camera.renderPasses.length === 0;
const taaEnabled = data.get('data.taa.enabled');
const bloomEnabled = data.get('data.bloom.enabled');

if (noPasses || taaEnabled !== currentOptions.taaEnabled || bloomEnabled !== currentOptions.bloomEnabled) {
currentOptions.taaEnabled = taaEnabled;
currentOptions.bloomEnabled = bloomEnabled;
currentOptions.prepassEnabled = taaEnabled;

// create new pass
setupRenderPass();
}

const renderPassCamera = cameraEntity.camera.renderPasses[0];
const composePass = renderPassCamera.composePass;
// update current options and apply them
currentOptions.taaEnabled = data.get('data.taa.enabled');
currentOptions.bloomEnabled = data.get('data.bloom.enabled');
renderPassCamera.update(currentOptions);

// apply all runtime settings
// apply options on the other passes
const composePass = renderPassCamera.composePass;

// SCENE
composePass.toneMapping = data.get('data.scene.tonemapping');
Expand All @@ -281,11 +255,12 @@ assetListLoader.load(() => {
});

// taa - enable camera jitter if taa is enabled
cameraEntity.camera.jitter = taaEnabled ? data.get('data.taa.jitter') : 0;
cameraEntity.camera.jitter = currentOptions.taaEnabled ? data.get('data.taa.jitter') : 0;

// bloom
if (bloomEnabled) {
renderPassCamera.lastMipLevel = data.get('data.bloom.lastMipLevel');
if (currentOptions.bloomEnabled) {
const bloomPass = renderPassCamera.bloomPass;
bloomPass.lastMipLevel = data.get('data.bloom.lastMipLevel');
composePass.bloomIntensity = pc.math.lerp(0, 0.1, data.get('data.bloom.intensity') / 100);
}

Expand All @@ -308,9 +283,8 @@ assetListLoader.load(() => {
};

// apply UI changes
let initialValuesSetup = false;
data.on('*:set', () => {
if (initialValuesSetup) applySettings();
applySettings();
});

// set initial values
Expand Down Expand Up @@ -349,10 +323,6 @@ assetListLoader.load(() => {
}
});

// apply initial settings after all values are set
initialValuesSetup = true;
applySettings();

// update things every frame
let angle = 0;
app.on('update', function (/** @type {number} */ dt) {
Expand Down
Loading

0 comments on commit 9923e8b

Please sign in to comment.