Skip to content

Commit 46adaf4

Browse files
willeastcottwilleastcott
authored
Merge branch 'main' into imgbot
2 parents 5f1e78c + 3a3ddce commit 46adaf4

File tree

95 files changed

+2081
-605
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+2081
-605
lines changed

‎examples/assets/models/ClearCoatTest.glb

252 KB
Binary file not shown.

‎examples/assets/models/IridescentDishWithOlives.glb

-1.17 MB
Binary file not shown.

‎examples/src/examples/graphics/asset-viewer.example.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ assetListLoader.load(() => {
122122
const dish = createVisual(assets.dish.resource, new pc.Vec3(-4, -0.5, 0), 9);
123123
createText(
124124
assets.font,
125-
'KHR_materials_specular\nKHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission',
125+
'KHR_materials_iridescence\nKHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission',
126126
-4,
127127
2
128128
);

‎examples/src/examples/graphics/clear-coat.example.mjs

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// @config DESCRIPTION This example demonstrates the clear coat material. Visually, the Coated column should contain highlights from both the Base and Boating layers.
2+
import { deviceType, rootPath } from 'examples/utils';
3+
import * as pc from 'playcanvas';
4+
5+
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
6+
window.focus();
7+
8+
const assets = {
9+
orbitCamera: new pc.Asset('script', 'script', { url: `${rootPath}/static/scripts/camera/orbit-camera.js` }),
10+
helipad: new pc.Asset(
11+
'helipad-env-atlas',
12+
'texture',
13+
{ url: `${rootPath}/static/assets/cubemaps/morning-env-atlas.png` },
14+
{ type: pc.TEXTURETYPE_RGBP, mipmaps: false }
15+
),
16+
model: new pc.Asset('model', 'container', { url: `${rootPath}/static/assets/models/ClearCoatTest.glb` })
17+
};
18+
19+
const gfxOptions = {
20+
deviceTypes: [deviceType],
21+
glslangUrl: `${rootPath}/static/lib/glslang/glslang.js`,
22+
twgslUrl: `${rootPath}/static/lib/twgsl/twgsl.js`
23+
};
24+
25+
const device = await pc.createGraphicsDevice(canvas, gfxOptions);
26+
device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
27+
28+
const createOptions = new pc.AppOptions();
29+
createOptions.graphicsDevice = device;
30+
createOptions.mouse = new pc.Mouse(document.body);
31+
createOptions.touch = new pc.TouchDevice(document.body);
32+
createOptions.keyboard = new pc.Keyboard(document.body);
33+
34+
createOptions.componentSystems = [
35+
pc.RenderComponentSystem,
36+
pc.CameraComponentSystem,
37+
pc.LightComponentSystem,
38+
pc.ScriptComponentSystem
39+
];
40+
createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler];
41+
42+
const app = new pc.AppBase(canvas);
43+
app.init(createOptions);
44+
45+
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
46+
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
47+
app.setCanvasResolution(pc.RESOLUTION_AUTO);
48+
49+
// Ensure canvas is resized when window changes size
50+
const resize = () => app.resizeCanvas();
51+
window.addEventListener('resize', resize);
52+
app.on('destroy', () => {
53+
window.removeEventListener('resize', resize);
54+
});
55+
56+
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
57+
assetListLoader.load(() => {
58+
app.start();
59+
60+
// Setup skydome
61+
app.scene.envAtlas = assets.helipad.resource;
62+
app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
63+
app.scene.skyboxIntensity = 1.5;
64+
65+
const leftEntity = assets.model.resource.instantiateRenderEntity();
66+
leftEntity.setLocalEulerAngles(0, 90, 0);
67+
leftEntity.setPosition(0, 0, 1);
68+
leftEntity.setLocalScale(0.8, 0.8, 0.8);
69+
app.root.addChild(leftEntity);
70+
71+
// Create a camera with an orbit camera script
72+
const camera = new pc.Entity();
73+
camera.addComponent('camera', {
74+
toneMapping: pc.TONEMAP_ACES
75+
});
76+
camera.addComponent('script');
77+
camera.script.create('orbitCamera', {
78+
attributes: {
79+
inertiaFactor: 0.2
80+
}
81+
});
82+
camera.script.create('orbitCameraInputMouse');
83+
camera.script.create('orbitCameraInputTouch');
84+
app.root.addChild(camera);
85+
camera.script.orbitCamera.yaw = 90;
86+
camera.script.orbitCamera.distance = 12;
87+
88+
const directionalLight = new pc.Entity();
89+
directionalLight.addComponent('light', {
90+
type: 'directional',
91+
color: pc.Color.YELLOW,
92+
castShadows: false,
93+
intensity: 1
94+
});
95+
directionalLight.setEulerAngles(45, 180, 0);
96+
app.root.addChild(directionalLight);
97+
});
98+
99+
export { app };

‎examples/src/examples/graphics/material-refraction.controls.mjs

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
3+
* @returns {JSX.Element} The returned JSX Element.
4+
*/
5+
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
6+
const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
7+
return fragment(
8+
jsx(
9+
Panel,
10+
{ headerText: 'Settings' },
11+
jsx(
12+
LabelGroup,
13+
{ text: 'Dynamic' },
14+
jsx(BooleanInput, {
15+
type: 'toggle',
16+
binding: new BindingTwoWay(),
17+
link: { observer, path: 'data.dynamic' }
18+
})
19+
)
20+
)
21+
);
22+
};

‎examples/src/examples/graphics/material-refraction.example.mjs

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import { data } from 'examples/observer';
2+
import { deviceType, rootPath } from 'examples/utils';
3+
import * as pc from 'playcanvas';
4+
5+
const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
6+
window.focus();
7+
8+
const assets = {
9+
helipad: new pc.Asset(
10+
'helipad-env-atlas',
11+
'texture',
12+
{ url: `${rootPath}/static/assets/cubemaps/helipad-env-atlas.png` },
13+
{ type: pc.TEXTURETYPE_RGBP, mipmaps: false }
14+
),
15+
normal: new pc.Asset('normal', 'texture', { url: `${rootPath}/static/assets/textures/seaside-rocks01-normal.jpg` }),
16+
diffuse: new pc.Asset('diffuse', 'texture', { url: `${rootPath}/static/assets/textures/seaside-rocks01-color.jpg` }),
17+
other: new pc.Asset('other', 'texture', { url: `${rootPath}/static/assets/textures/seaside-rocks01-gloss.jpg` })
18+
};
19+
20+
const gfxOptions = {
21+
deviceTypes: [deviceType],
22+
glslangUrl: `${rootPath}/static/lib/glslang/glslang.js`,
23+
twgslUrl: `${rootPath}/static/lib/twgsl/twgsl.js`
24+
};
25+
26+
const device = await pc.createGraphicsDevice(canvas, gfxOptions);
27+
device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
28+
29+
const createOptions = new pc.AppOptions();
30+
createOptions.graphicsDevice = device;
31+
createOptions.mouse = new pc.Mouse(document.body);
32+
createOptions.touch = new pc.TouchDevice(document.body);
33+
34+
createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem];
35+
createOptions.resourceHandlers = [pc.TextureHandler];
36+
37+
const app = new pc.AppBase(canvas);
38+
app.init(createOptions);
39+
40+
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
41+
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
42+
app.setCanvasResolution(pc.RESOLUTION_AUTO);
43+
44+
// Ensure canvas is resized when window changes size
45+
const resize = () => app.resizeCanvas();
46+
window.addEventListener('resize', resize);
47+
app.on('destroy', () => {
48+
window.removeEventListener('resize', resize);
49+
});
50+
51+
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
52+
assetListLoader.load(() => {
53+
app.start();
54+
55+
app.scene.envAtlas = assets.helipad.resource;
56+
57+
// Depth layer is where the framebuffer is copied to a texture to be used in the following layers.
58+
// Move the depth layer to take place after World and Skydome layers, to capture both of them.
59+
const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
60+
app.scene.layers.remove(depthLayer);
61+
app.scene.layers.insertOpaque(depthLayer, 2);
62+
63+
// Create an entity with a camera component
64+
const camera = new pc.Entity();
65+
camera.addComponent('camera', {
66+
toneMapping: pc.TONEMAP_ACES
67+
});
68+
app.root.addChild(camera);
69+
70+
// Create an entity with a directional light component
71+
const light = new pc.Entity();
72+
light.addComponent('light', {
73+
type: 'directional',
74+
color: new pc.Color(1, 0.8, 0.25)
75+
});
76+
app.root.addChild(light);
77+
light.setLocalEulerAngles(85, -100, 0);
78+
79+
// ground
80+
const groundMaterial = new pc.StandardMaterial();
81+
groundMaterial.diffuse = new pc.Color(1, 2.5, 2.5);
82+
groundMaterial.diffuseMap = assets.diffuse.resource;
83+
groundMaterial.gloss = 0.4;
84+
groundMaterial.metalness = 0.5;
85+
groundMaterial.useMetalness = true;
86+
groundMaterial.update();
87+
88+
const ground = new pc.Entity();
89+
ground.addComponent('render', {
90+
type: 'box',
91+
material: groundMaterial
92+
});
93+
ground.setLocalScale(30, 1, 30);
94+
ground.setLocalPosition(0, -2, 0);
95+
app.root.addChild(ground);
96+
97+
const createObject = function (x, y, z, material, scale) {
98+
const obj = new pc.Entity();
99+
obj.addComponent('render', {
100+
material: material,
101+
type: 'capsule'
102+
});
103+
obj.setLocalPosition(x, y, z);
104+
obj.setLocalScale(scale, scale, scale);
105+
app.root.addChild(obj);
106+
};
107+
108+
// basic refractive material
109+
const material = new pc.StandardMaterial();
110+
material.metalness = 0.0; // low metalness, otherwise it's reflective
111+
material.gloss = 1.0;
112+
material.glossMap = assets.other.resource;
113+
material.glossMapChannel = 'g';
114+
material.useMetalness = true; // refractive materials are currently supported only with metalness
115+
material.refraction = 0.8;
116+
material.refractionIndex = 1.0;
117+
material.blendType = pc.BLEND_NORMAL;
118+
material.thickness = 0.4;
119+
material.thicknessMap = assets.other.resource;
120+
material.update();
121+
122+
// clone and apply additional settings for the second material
123+
const material2 = material.clone();
124+
material2.diffuse = new pc.Color(0.9, 0.6, 0.6);
125+
material2.normalMap = assets.normal.resource;
126+
material2.bumpiness = 2.0;
127+
material2.refractionMap = assets.diffuse.resource;
128+
material2.update();
129+
130+
// two main objects with refraction materials
131+
createObject(-0.5, 0, 0, material, 0.7);
132+
createObject(0.5, 0, 0, material2, 0.7);
133+
134+
// create a ring of objects with a simple color material as a background
135+
const objMaterial = new pc.StandardMaterial();
136+
objMaterial.diffuse = new pc.Color(0.5, 0.5, 2.5);
137+
objMaterial.gloss = 0.5;
138+
objMaterial.metalness = 0.5;
139+
objMaterial.useMetalness = true;
140+
objMaterial.update();
141+
const count = 8;
142+
for (let i = 0; i < count; i++) {
143+
const angle = i / count * Math.PI * 2;
144+
createObject(Math.cos(angle) * 2.5, -0.3, Math.sin(angle) * 2.5, objMaterial, 0.2);
145+
}
146+
147+
// initial values for the UI
148+
data.set('data', {
149+
dynamic: false
150+
});
151+
152+
// update things each frame
153+
let time = 0;
154+
app.on('update', (dt) => {
155+
// rotate camera around the objects
156+
time += dt;
157+
camera.setLocalPosition(3 * Math.sin(time * 0.5), 0, 3 * Math.cos(time * 0.5));
158+
camera.lookAt(pc.Vec3.ZERO);
159+
160+
// handle dynamic refraction toggle
161+
const dynamic = data.get('data.dynamic');
162+
if (material.useDynamicRefraction !== dynamic) {
163+
material.useDynamicRefraction = dynamic;
164+
material.update();
165+
material2.useDynamicRefraction = dynamic;
166+
material2.update();
167+
168+
// when dynamic is enabled, the camera needs to render the scene's color map
169+
camera.camera.requestSceneColorMap(dynamic);
170+
}
171+
});
172+
});
173+
174+
export { app };

‎examples/src/examples/graphics/normals-and-tangents.example.mjs

+2-8
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,6 @@ assetListLoader.load(() => {
6868
leftEntity.setLocalScale(0.8, 0.8, 0.8);
6969
app.root.addChild(leftEntity);
7070

71-
const rightEntity = assets.model.resource.instantiateRenderEntity();
72-
rightEntity.setLocalEulerAngles(0, 90, 0);
73-
rightEntity.setPosition(0, 0, -1);
74-
rightEntity.setLocalScale(-0.8, -0.8, -0.8);
75-
app.root.addChild(rightEntity);
76-
7771
// Create a camera with an orbit camera script
7872
const camera = new pc.Entity();
7973
camera.addComponent('camera', {
@@ -82,15 +76,15 @@ assetListLoader.load(() => {
8276
camera.addComponent('script');
8377
camera.script.create('orbitCamera', {
8478
attributes: {
85-
inertiaFactor: 0 // Override default of 0 (no inertia)
79+
inertiaFactor: 0.2
8680
}
8781
});
8882
camera.script.create('orbitCameraInputMouse');
8983
camera.script.create('orbitCameraInputTouch');
9084
app.root.addChild(camera);
9185
camera.script.orbitCamera.pitch = 0;
9286
camera.script.orbitCamera.yaw = 90;
93-
camera.script.orbitCamera.distance = 4;
87+
camera.script.orbitCamera.distance = 3;
9488

9589
const directionalLight = new pc.Entity();
9690
directionalLight.addComponent('light', {

‎examples/src/examples/graphics/contact-hardening-shadows.controls.mjs ‎examples/src/examples/test/contact-hardening-shadows.controls.mjs

File renamed without changes.

‎examples/src/examples/graphics/contact-hardening-shadows.example.mjs ‎examples/src/examples/test/contact-hardening-shadows.example.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @config HIDDEN
12
// @config WEBGPU_DISABLED
23
import { data } from 'examples/observer';
34
import { deviceType, rootPath } from 'examples/utils';

0 commit comments

Comments
 (0)