Skip to content

Commit

Permalink
Expose shadow type, intensity and vsm bias (#68)
Browse files Browse the repository at this point in the history
  • Loading branch information
@willeastcott
willeastcott authored Dec 7, 2024
1 parent 86bcf1e commit 3abde17
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 9 deletions.
12 changes: 6 additions & 6 deletions examples/basic-shapes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>PlayCanvas Web Components - Primitive Shapes</title>
<title>PlayCanvas Web Components - Basic Shapes</title>
<script type="importmap">
{
"imports": {
Expand Down Expand Up @@ -31,8 +31,8 @@
<pc-scene>
<!-- Camera (with XR support) -->
<pc-entity name="camera root">
<pc-entity name="camera" position="-3 2 -3.25">
<pc-camera></pc-camera>
<pc-entity name="camera" position="-3 2 -3">
<pc-camera clear-color="lightskyblue"></pc-camera>
<pc-scripts>
<pc-script name="cameraControls" attributes='{
"enableFly": false,
Expand All @@ -49,15 +49,15 @@
</pc-entity>
<!-- Key Light (Spot) -->
<pc-entity name="keyLight" position="3 5 -3" rotation="-45 -45 0">
<pc-light type="spot" intensity="2" cast-shadows shadow-resolution="2048"></pc-light>
<pc-light type="directional" intensity="0.75" cast-shadows shadow-type="vsm-16f" vsm-bias="0.01"></pc-light>
</pc-entity>
<!-- Fill Light (Omni) -->
<pc-entity name="fillLight" position="-4 3 4">
<pc-entity name="fillLight" position="0 2 0">
<pc-light type="omni" intensity="0.5"></pc-light>
</pc-entity>
<!-- Rim Light (Spot) -->
<pc-entity name="rimLight" position="-2 4 -4" rotation="-40 45 0">
<pc-light type="spot" intensity="1.5" cast-shadows shadow-resolution="2048"></pc-light>
<pc-light type="directional" intensity="0.75" cast-shadows shadow-type="vsm-16f" vsm-bias="0.01"></pc-light>
</pc-entity>
<!-- Box-->
<pc-entity name="box" position="1.5 0.5 0">
Expand Down
106 changes: 103 additions & 3 deletions src/components/light-component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
import { Color, LightComponent } from 'playcanvas';
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';

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

const shadowTypes = new Map([
['pcf1-16f', SHADOW_PCF1_16F],
['pcf1-32f', SHADOW_PCF1_32F],
['pcf3-16f', SHADOW_PCF3_16F],
['pcf3-32f', SHADOW_PCF3_32F],
['pcf5-16f', SHADOW_PCF5_16F],
['pcf5-32f', SHADOW_PCF5_32F],
['vsm-16f', SHADOW_VSM_16F],
['vsm-32f', SHADOW_VSM_32F],
['pcss-32f', SHADOW_PCSS_32F]
]);

/**
* The LightComponentElement interface provides properties and methods for manipulating
* `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
Expand All @@ -29,10 +41,16 @@ class LightComponentElement extends ComponentElement {

private _shadowDistance = 16;

private _shadowIntensity = 1;

private _shadowResolution = 1024;

private _shadowType: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f' = 'pcf3-32f';

private _type = 'directional';

private _vsmBias = 0.01;

/** @ignore */
constructor() {
super('light');
Expand All @@ -49,8 +67,11 @@ class LightComponentElement extends ComponentElement {
range: this._range,
shadowBias: this._shadowBias,
shadowDistance: this._shadowDistance,
shadowIntensity: this._shadowIntensity,
shadowResolution: this._shadowResolution,
type: this._type
shadowType: shadowTypes.get(this._shadowType),
type: this._type,
vsmBias: this._vsmBias
};
}

Expand Down Expand Up @@ -233,6 +254,25 @@ class LightComponentElement extends ComponentElement {
return this._shadowDistance;
}

/**
* Sets the shadow intensity of the light.
* @param value - The shadow intensity.
*/
set shadowIntensity(value: number) {
this._shadowIntensity = value;
if (this.component) {
this.component.shadowIntensity = value;
}
}

/**
* Gets the shadow intensity of the light.
* @returns The shadow intensity.
*/
get shadowIntensity() {
return this._shadowIntensity;
}

/**
* Sets the shadow resolution of the light.
* @param value - The shadow resolution.
Expand All @@ -252,6 +292,35 @@ class LightComponentElement extends ComponentElement {
return this._shadowResolution;
}

/**
* Sets the shadow type of the light.
* @param value - The shadow type. Can be:
*
* - `pcf1-16f` - 1-tap percentage-closer filtered shadow map with 16-bit depth.
* - `pcf1-32f` - 1-tap percentage-closer filtered shadow map with 32-bit depth.
* - `pcf3-16f` - 3-tap percentage-closer filtered shadow map with 16-bit depth.
* - `pcf3-32f` - 3-tap percentage-closer filtered shadow map with 32-bit depth.
* - `pcf5-16f` - 5-tap percentage-closer filtered shadow map with 16-bit depth.
* - `pcf5-32f` - 5-tap percentage-closer filtered shadow map with 32-bit depth.
* - `vsm-16f` - Variance shadow map with 16-bit depth.
* - `vsm-32f` - Variance shadow map with 32-bit depth.
* - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
*/
set shadowType(value: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f') {
this._shadowType = value;
if (this.component) {
this.component.shadowType = shadowTypes.get(value) ?? SHADOW_PCF3_32F;
}
}

/**
* Gets the shadow type of the light.
* @returns The shadow type.
*/
get shadowType() {
return this._shadowType;
}

/**
* Sets the type of the light.
* @param value - The type.
Expand All @@ -276,6 +345,25 @@ class LightComponentElement extends ComponentElement {
return this._type;
}

/**
* Sets the VSM bias of the light.
* @param value - The VSM bias.
*/
set vsmBias(value: number) {
this._vsmBias = value;
if (this.component) {
this.component.vsmBias = value;
}
}

/**
* Gets the VSM bias of the light.
* @returns The VSM bias.
*/
get vsmBias() {
return this._vsmBias;
}

static get observedAttributes() {
return [
...super.observedAttributes,
Expand All @@ -288,8 +376,11 @@ class LightComponentElement extends ComponentElement {
'range',
'shadow-bias',
'shadow-distance',
'shadow-intensity',
'shadow-resolution',
'type'
'shadow-type',
'type',
'vsm-bias'
];
}

Expand Down Expand Up @@ -327,9 +418,18 @@ class LightComponentElement extends ComponentElement {
case 'shadow-resolution':
this.shadowResolution = Number(newValue);
break;
case 'shadow-intensity':
this.shadowIntensity = Number(newValue);
break;
case 'shadow-type':
this.shadowType = newValue as 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f';
break;
case 'type':
this.type = newValue;
break;
case 'vsm-bias':
this.vsmBias = Number(newValue);
break;
}
}
}
Expand Down

0 comments on commit 3abde17

Please sign in to comment.