Skip to content

Commit 3abde17

Browse files
willeastcottwilleastcott
authored
Expose shadow type, intensity and vsm bias (#68)
1 parent 86bcf1e commit 3abde17

File tree

2 files changed

+109
-9
lines changed

2 files changed

+109
-9
lines changed

‎examples/basic-shapes.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
6-
<title>PlayCanvas Web Components - Primitive Shapes</title>
6+
<title>PlayCanvas Web Components - Basic Shapes</title>
77
<script type="importmap">
88
{
99
"imports": {
@@ -31,8 +31,8 @@
3131
<pc-scene>
3232
<!-- Camera (with XR support) -->
3333
<pc-entity name="camera root">
34-
<pc-entity name="camera" position="-3 2 -3.25">
35-
<pc-camera></pc-camera>
34+
<pc-entity name="camera" position="-3 2 -3">
35+
<pc-camera clear-color="lightskyblue"></pc-camera>
3636
<pc-scripts>
3737
<pc-script name="cameraControls" attributes='{
3838
"enableFly": false,
@@ -49,15 +49,15 @@
4949
</pc-entity>
5050
<!-- Key Light (Spot) -->
5151
<pc-entity name="keyLight" position="3 5 -3" rotation="-45 -45 0">
52-
<pc-light type="spot" intensity="2" cast-shadows shadow-resolution="2048"></pc-light>
52+
<pc-light type="directional" intensity="0.75" cast-shadows shadow-type="vsm-16f" vsm-bias="0.01"></pc-light>
5353
</pc-entity>
5454
<!-- Fill Light (Omni) -->
55-
<pc-entity name="fillLight" position="-4 3 4">
55+
<pc-entity name="fillLight" position="0 2 0">
5656
<pc-light type="omni" intensity="0.5"></pc-light>
5757
</pc-entity>
5858
<!-- Rim Light (Spot) -->
5959
<pc-entity name="rimLight" position="-2 4 -4" rotation="-40 45 0">
60-
<pc-light type="spot" intensity="1.5" cast-shadows shadow-resolution="2048"></pc-light>
60+
<pc-light type="directional" intensity="0.75" cast-shadows shadow-type="vsm-16f" vsm-bias="0.01"></pc-light>
6161
</pc-entity>
6262
<!-- Box-->
6363
<pc-entity name="box" position="1.5 0.5 0">

‎src/components/light-component.ts‎

Lines changed: 103 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
import { Color, LightComponent } from 'playcanvas';
1+
import { Color, LightComponent, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF3_32F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_PCSS_32F, SHADOW_VSM_16F, SHADOW_VSM_32F } from 'playcanvas';
22

33
import { ComponentElement } from './component';
44
import { parseColor } from '../utils';
55

6+
const shadowTypes = new Map([
7+
['pcf1-16f', SHADOW_PCF1_16F],
8+
['pcf1-32f', SHADOW_PCF1_32F],
9+
['pcf3-16f', SHADOW_PCF3_16F],
10+
['pcf3-32f', SHADOW_PCF3_32F],
11+
['pcf5-16f', SHADOW_PCF5_16F],
12+
['pcf5-32f', SHADOW_PCF5_32F],
13+
['vsm-16f', SHADOW_VSM_16F],
14+
['vsm-32f', SHADOW_VSM_32F],
15+
['pcss-32f', SHADOW_PCSS_32F]
16+
]);
17+
618
/**
719
* The LightComponentElement interface provides properties and methods for manipulating
820
* `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
@@ -29,10 +41,16 @@ class LightComponentElement extends ComponentElement {
2941

3042
private _shadowDistance = 16;
3143

44+
private _shadowIntensity = 1;
45+
3246
private _shadowResolution = 1024;
3347

48+
private _shadowType: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f' = 'pcf3-32f';
49+
3450
private _type = 'directional';
3551

52+
private _vsmBias = 0.01;
53+
3654
/** @ignore */
3755
constructor() {
3856
super('light');
@@ -49,8 +67,11 @@ class LightComponentElement extends ComponentElement {
4967
range: this._range,
5068
shadowBias: this._shadowBias,
5169
shadowDistance: this._shadowDistance,
70+
shadowIntensity: this._shadowIntensity,
5271
shadowResolution: this._shadowResolution,
53-
type: this._type
72+
shadowType: shadowTypes.get(this._shadowType),
73+
type: this._type,
74+
vsmBias: this._vsmBias
5475
};
5576
}
5677

@@ -233,6 +254,25 @@ class LightComponentElement extends ComponentElement {
233254
return this._shadowDistance;
234255
}
235256

257+
/**
258+
* Sets the shadow intensity of the light.
259+
* @param value - The shadow intensity.
260+
*/
261+
set shadowIntensity(value: number) {
262+
this._shadowIntensity = value;
263+
if (this.component) {
264+
this.component.shadowIntensity = value;
265+
}
266+
}
267+
268+
/**
269+
* Gets the shadow intensity of the light.
270+
* @returns The shadow intensity.
271+
*/
272+
get shadowIntensity() {
273+
return this._shadowIntensity;
274+
}
275+
236276
/**
237277
* Sets the shadow resolution of the light.
238278
* @param value - The shadow resolution.
@@ -252,6 +292,35 @@ class LightComponentElement extends ComponentElement {
252292
return this._shadowResolution;
253293
}
254294

295+
/**
296+
* Sets the shadow type of the light.
297+
* @param value - The shadow type. Can be:
298+
*
299+
* - `pcf1-16f` - 1-tap percentage-closer filtered shadow map with 16-bit depth.
300+
* - `pcf1-32f` - 1-tap percentage-closer filtered shadow map with 32-bit depth.
301+
* - `pcf3-16f` - 3-tap percentage-closer filtered shadow map with 16-bit depth.
302+
* - `pcf3-32f` - 3-tap percentage-closer filtered shadow map with 32-bit depth.
303+
* - `pcf5-16f` - 5-tap percentage-closer filtered shadow map with 16-bit depth.
304+
* - `pcf5-32f` - 5-tap percentage-closer filtered shadow map with 32-bit depth.
305+
* - `vsm-16f` - Variance shadow map with 16-bit depth.
306+
* - `vsm-32f` - Variance shadow map with 32-bit depth.
307+
* - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
308+
*/
309+
set shadowType(value: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f') {
310+
this._shadowType = value;
311+
if (this.component) {
312+
this.component.shadowType = shadowTypes.get(value) ?? SHADOW_PCF3_32F;
313+
}
314+
}
315+
316+
/**
317+
* Gets the shadow type of the light.
318+
* @returns The shadow type.
319+
*/
320+
get shadowType() {
321+
return this._shadowType;
322+
}
323+
255324
/**
256325
* Sets the type of the light.
257326
* @param value - The type.
@@ -276,6 +345,25 @@ class LightComponentElement extends ComponentElement {
276345
return this._type;
277346
}
278347

348+
/**
349+
* Sets the VSM bias of the light.
350+
* @param value - The VSM bias.
351+
*/
352+
set vsmBias(value: number) {
353+
this._vsmBias = value;
354+
if (this.component) {
355+
this.component.vsmBias = value;
356+
}
357+
}
358+
359+
/**
360+
* Gets the VSM bias of the light.
361+
* @returns The VSM bias.
362+
*/
363+
get vsmBias() {
364+
return this._vsmBias;
365+
}
366+
279367
static get observedAttributes() {
280368
return [
281369
...super.observedAttributes,
@@ -288,8 +376,11 @@ class LightComponentElement extends ComponentElement {
288376
'range',
289377
'shadow-bias',
290378
'shadow-distance',
379+
'shadow-intensity',
291380
'shadow-resolution',
292-
'type'
381+
'shadow-type',
382+
'type',
383+
'vsm-bias'
293384
];
294385
}
295386

@@ -327,9 +418,18 @@ class LightComponentElement extends ComponentElement {
327418
case 'shadow-resolution':
328419
this.shadowResolution = Number(newValue);
329420
break;
421+
case 'shadow-intensity':
422+
this.shadowIntensity = Number(newValue);
423+
break;
424+
case 'shadow-type':
425+
this.shadowType = newValue as 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f';
426+
break;
330427
case 'type':
331428
this.type = newValue;
332429
break;
430+
case 'vsm-bias':
431+
this.vsmBias = Number(newValue);
432+
break;
333433
}
334434
}
335435
}

0 commit comments

Comments
 (0)