Skip to content

Commit 85705cd

Browse files
willeastcottwilleastcott
authored
Upgrade to Engine's shadow catcher (#146)
* Upgrade to Engine's shadow catcher * Expose vsmBlurSize * vsmBlurSize fix
1 parent dc7a06f commit 85705cd

File tree

6 files changed

+69
-125
lines changed

6 files changed

+69
-125
lines changed

‎examples/animation.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
2121
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-controllers.mjs"></pc-asset>
2222
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-navigation.mjs"></pc-asset>
23-
<pc-asset src="assets/scripts/shadow-catcher.mjs"></pc-asset>
23+
<pc-asset src="../node_modules/playcanvas/scripts/esm/shadow-catcher.mjs"></pc-asset>
2424
<pc-asset src="assets/skies/dry-lake-bed-2k.hdr" id="lake-bed"></pc-asset>
2525
<pc-asset src="assets/models/t-rex.glb" id="t-rex"></pc-asset>
2626
<!-- Scene -->
@@ -46,12 +46,19 @@
4646
<pc-script name="xrNavigation"></pc-script>
4747
</pc-scripts>
4848
</pc-entity>
49+
<!-- Light -->
50+
<pc-entity name="light">
51+
<pc-light cast-shadows shadow-distance="30" shadow-intensity="0.6" shadow-resolution="1024" shadow-type="vsm-16f"></pc-light>
52+
</pc-entity>
4953
<!-- T-Rex -->
5054
<pc-entity name="t-rex" scale="3 3 3">
5155
<pc-model asset="t-rex"></pc-model>
56+
</pc-entity>
57+
<!-- Shadow Catcher -->
58+
<pc-entity name="shadow catcher">
5259
<pc-scripts>
5360
<pc-script name="shadowCatcher" attributes='{
54-
"size": "vec2:14,14"
61+
"scale": "vec3:14,14,14"
5562
}'></pc-script>
5663
</pc-scripts>
5764
</pc-entity>

‎examples/annotations.html

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
<pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
2424
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-controllers.mjs"></pc-asset>
2525
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-navigation.mjs"></pc-asset>
26+
<pc-asset src="../node_modules/playcanvas/scripts/esm/shadow-catcher.mjs"></pc-asset>
2627
<pc-asset src="assets/scripts/annotation.mjs"></pc-asset>
27-
<pc-asset src="assets/scripts/shadow-catcher.mjs"></pc-asset>
2828
<pc-asset src="assets/skies/shanghai-riverside-4k.hdr" id="shanghai"></pc-asset>
2929
<pc-asset src="assets/models/jet-fighter.glb" id="jet-fighter"></pc-asset>
3030
<!-- Scene -->
@@ -48,14 +48,13 @@
4848
<pc-script name="xrNavigation"></pc-script>
4949
</pc-scripts>
5050
</pc-entity>
51+
<!-- Light -->
52+
<pc-entity name="light">
53+
<pc-light cast-shadows shadow-distance="30" shadow-intensity="0.6" shadow-resolution="1024" shadow-type="vsm-16f"></pc-light>
54+
</pc-entity>
5155
<!-- Jet Fighter -->
5256
<pc-entity name="jet-fighter" position="-2 1.6 0" rotation="0 0 3">
5357
<pc-model asset="jet-fighter"></pc-model>
54-
<pc-scripts>
55-
<pc-script name="shadowCatcher" attributes='{
56-
"size": "vec2:14,14"
57-
}'></pc-script>
58-
</pc-scripts>
5958
<pc-entity name="annotation1" position="5.5 1.2 0">
6059
<pc-scripts>
6160
<pc-script name="annotation" attributes='{
@@ -113,6 +112,14 @@
113112
</pc-scripts>
114113
</pc-entity>
115114
</pc-entity>
115+
<!-- Shadow Catcher -->
116+
<pc-entity name="shadow catcher">
117+
<pc-scripts>
118+
<pc-script name="shadowCatcher" attributes='{
119+
"scale": "vec3:15,15,15"
120+
}'></pc-script>
121+
</pc-scripts>
122+
</pc-entity>
116123
</pc-scene>
117124
</pc-app>
118125
<script type="module" src="js/example.mjs"></script>

‎examples/assets/scripts/shadow-catcher.mjs

Lines changed: 0 additions & 105 deletions
This file was deleted.

‎examples/shoe-configurator.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
2121
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-controllers.mjs"></pc-asset>
2222
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-navigation.mjs"></pc-asset>
23-
<pc-asset src="assets/scripts/shadow-catcher.mjs"></pc-asset>
23+
<pc-asset src="../node_modules/playcanvas/scripts/esm/shadow-catcher.mjs"></pc-asset>
2424
<pc-asset src="assets/skies/octagon-lamps-photo-studio-2k.hdr" id="studio"></pc-asset>
2525
<pc-asset src="assets/models/shoe.glb" id="shoe"></pc-asset>
2626
<!-- Scene -->
@@ -47,13 +47,19 @@
4747
<pc-script name="xrNavigation"></pc-script>
4848
</pc-scripts>
4949
</pc-entity>
50+
<!-- Light -->
51+
<pc-entity name="light">
52+
<pc-light type="directional" cast-shadows shadow-distance="1" shadow-intensity="0.6" shadow-resolution="1024" shadow-type="vsm-16f"></pc-light>
53+
</pc-entity>
5054
<!-- Shoe -->
5155
<pc-entity name="shoe">
5256
<pc-model asset="shoe"></pc-model>
57+
</pc-entity>
58+
<!-- Shadow Catcher -->
59+
<pc-entity name="shadow catcher">
5360
<pc-scripts>
5461
<pc-script name="shadowCatcher" attributes='{
55-
"size": "vec2:0.5,0.5",
56-
"shadowDistance": 1
62+
"scale": "vec3:0.5,0.5,0.5"
5763
}'></pc-script>
5864
</pc-scripts>
5965
</pc-entity>

‎examples/video-texture.html

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
2424
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-controllers.mjs"></pc-asset>
2525
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-navigation.mjs"></pc-asset>
26-
<pc-asset src="assets/scripts/shadow-catcher.mjs"></pc-asset>
26+
<pc-asset src="../node_modules/playcanvas/scripts/esm/shadow-catcher.mjs"></pc-asset>
2727
<pc-asset src="assets/scripts/video-texture.mjs"></pc-asset>
2828
<pc-asset src="assets/skies/octagon-lamps-photo-studio-2k.hdr" id="studio"></pc-asset>
2929
<pc-asset src="assets/models/vintage-pc.glb" id="vintage-pc"></pc-asset>
@@ -54,23 +54,26 @@
5454
</pc-entity>
5555
<!-- Light -->
5656
<pc-entity name="light" rotation="45 -35 0">
57-
<pc-light cast-shadows shadow-distance="5"></pc-light>
57+
<pc-light cast-shadows shadow-distance="5" shadow-intensity="0.4" shadow-resolution="1024" shadow-type="vsm-16f" vsm-blur-size="16"></pc-light>
5858
</pc-entity>
5959
<!-- PC -->
6060
<pc-entity name="pc">
6161
<pc-model asset="vintage-pc"></pc-model>
6262
<pc-scripts>
63-
<pc-script name="shadowCatcher" attributes='{
64-
"size": "vec2:3,3",
65-
"shadowDistance": 4,
66-
"blurSize": 16
67-
}'></pc-script>
6863
<pc-script name="videoTexture" attributes='{
6964
"materialName": "Screen",
7065
"url": "assets/videos/doom.mp4"
7166
}'></pc-script>
7267
</pc-scripts>
7368
</pc-entity>
69+
<!-- Shadow Catcher -->
70+
<pc-entity name="shadow catcher">
71+
<pc-scripts>
72+
<pc-script name="shadowCatcher" attributes='{
73+
"scale": "vec3:2,3,3"
74+
}'></pc-script>
75+
</pc-scripts>
76+
</pc-entity>
7477
</pc-scene>
7578
</pc-app>
7679
<script type="module" src="js/example.mjs"></script>

‎src/components/light-component.ts

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ class LightComponentElement extends ComponentElement {
5252

5353
private _vsmBias = 0.01;
5454

55+
private _vsmBlurSize = 11;
56+
5557
/** @ignore */
5658
constructor() {
5759
super('light');
@@ -72,7 +74,8 @@ class LightComponentElement extends ComponentElement {
7274
shadowResolution: this._shadowResolution,
7375
shadowType: shadowTypes.get(this._shadowType),
7476
type: this._type,
75-
vsmBias: this._vsmBias
77+
vsmBias: this._vsmBias,
78+
vsmBlurSize: this._vsmBlurSize
7679
};
7780
}
7881

@@ -365,6 +368,25 @@ class LightComponentElement extends ComponentElement {
365368
return this._vsmBias;
366369
}
367370

371+
/**
372+
* Sets the VSM blur size of the light. Minimum is 1, maximum is 25. Default is 11.
373+
* @param value - The VSM blur size.
374+
*/
375+
set vsmBlurSize(value: number) {
376+
this._vsmBlurSize = value;
377+
if (this.component) {
378+
this.component.vsmBlurSize = value;
379+
}
380+
}
381+
382+
/**
383+
* Gets the VSM blur size of the light.
384+
* @returns The VSM blur size.
385+
*/
386+
get vsmBlurSize() {
387+
return this._vsmBlurSize;
388+
}
389+
368390
static get observedAttributes() {
369391
return [
370392
...super.observedAttributes,
@@ -381,7 +403,8 @@ class LightComponentElement extends ComponentElement {
381403
'shadow-resolution',
382404
'shadow-type',
383405
'type',
384-
'vsm-bias'
406+
'vsm-bias',
407+
'vsm-blur-size'
385408
];
386409
}
387410

@@ -431,6 +454,9 @@ class LightComponentElement extends ComponentElement {
431454
case 'vsm-bias':
432455
this.vsmBias = Number(newValue);
433456
break;
457+
case 'vsm-blur-size':
458+
this.vsmBlurSize = Number(newValue);
459+
break;
434460
}
435461
}
436462
}

0 commit comments

Comments
 (0)