From 3abde17f96275a158b03a335ff303159f3c00c9d Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Sat, 7 Dec 2024 13:51:58 +0000
Subject: [PATCH] Expose shadow type, intensity and vsm bias (#68)

---
 examples/basic-shapes.html        |  12 ++--
 src/components/light-component.ts | 106 +++++++++++++++++++++++++++++-
 2 files changed, 109 insertions(+), 9 deletions(-)
diff --git a/examples/basic-shapes.html b/examples/basic-shapes.html
index e46cd2e..7db8c07 100644
--- a/examples/basic-shapes.html
+++ b/examples/basic-shapes.html
@@ -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": {
@@ -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,
@@ -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">
diff --git a/src/components/light-component.ts b/src/components/light-component.ts
index 1fa9b40..5eb1a20 100644
--- a/src/components/light-component.ts
+++ b/src/components/light-component.ts
@@ -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
@@ -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');
@@ -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
         };
     }
 
@@ -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.
@@ -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.
@@ -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,
@@ -288,8 +376,11 @@ class LightComponentElement extends ComponentElement {
             'range',
             'shadow-bias',
             'shadow-distance',
+            'shadow-intensity',
             'shadow-resolution',
-            'type'
+            'shadow-type',
+            'type',
+            'vsm-bias'
         ];
     }
 
@@ -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;
         }
     }
 }
