video-texture/image-texture: Support more shaders

Signed-off-by: Squareys <squareys@googlemail.com>
playkostudios · Apr 30, 2023 · 4a460f4 · 4a460f4
1 parent eaae690
commit 4a460f4
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 29 deletions.
diff --git a/image-texture.js b/image-texture.js
@@ -1,4 +1,5 @@
-import {Component, Type} from '@wonderlandengine/api';
+import {Component, Property} from '@wonderlandengine/api';
+import {setFirstMaterialTexture} from './utils/utils.js';
 
 /**
  * Downloads an image from URL and applies it as `diffuseTexture` or `flatTexture`
@@ -15,9 +16,11 @@ export class ImageTexture extends Component {
     static TypeName = 'image-texture';
     static Properties = {
         /** URL to download the image from */
-        url: {type: Type.String},
+        url: Property.string(),
         /** Material to apply the video texture to */
-        material: {type: Type.Material},
+        material: Property.material(),
+        /** Name of the texture property to set */
+        textureProperty: Property.string('auto'),
     };
 
     start() {
@@ -29,17 +32,8 @@ export class ImageTexture extends Component {
             .load(this.url, 'anonymous')
             .then((texture) => {
                 const mat = this.material;
-                const shader = mat.shader;
-                if (shader === 'Flat Opaque Textured') {
-                    mat.flatTexture = texture;
-                } else if (shader === 'Phong Opaque Textured' || shader === 'Foliage') {
-                    mat.diffuseTexture = texture;
-                } else if (shader === 'Background') {
-                    mat.texture = texture;
-                } else if (shader === 'Physical Opaque Textured') {
-                    mat.albedoTexture = texture;
-                } else {
-                    console.error('Shader', shader, 'not supported by image-texture');
+                if (!setFirstMaterialTexture(mat, texture, this.textureProperty)) {
+                    console.error('Shader', mat.shader, 'not supported by image-texture');
                 }
             })
             .catch(console.err);

diff --git a/utils/utils.ts b/utils/utils.ts
@@ -0,0 +1,55 @@
+import {Material, Texture} from '@wonderlandengine/api';
+
+/**
+ * Set the diffuse/flat texture of known pipelines.
+ *
+ * @param mat Material to set the texture on
+ * @param texture Texture to set
+ * @param customTextureProperty Texture property to set or `'auto'` to automatically
+ *      detect the right texture property based on known pipeline.
+ * @returns `true` if the property was set, `false` otherwise.
+ */
+export function setFirstMaterialTexture(
+    mat: Material,
+    texture: Texture,
+    customTextureProperty: string
+) {
+    if (customTextureProperty !== 'auto') {
+        // @ts-ignore
+        mat[customTextureProperty] = texture;
+        return true;
+    }
+
+    const shader = mat.shader;
+    if (shader === 'Flat Opaque Textured') {
+        // @ts-ignore
+        mat.flatTexture = texture;
+        return true;
+    } else if (
+        shader === 'Phong Opaque Textured' ||
+        shader === 'Foliage' ||
+        shader === 'Phong Normalmapped' ||
+        shader === 'Phong Lightmapped'
+    ) {
+        // @ts-ignore
+        mat.diffuseTexture = texture;
+        return true;
+    } else if (shader === 'Particle') {
+        // @ts-ignore
+        mat.mainTexture = texture;
+        return true;
+    } else if (shader === 'DistanceFieldVector') {
+        // @ts-ignore
+        mat.vectorTexture = texture;
+        return true;
+    } else if (shader === 'Background' || shader === 'Sky') {
+        // @ts-ignore
+        mat.texture = texture;
+        return true;
+    } else if (shader === 'Physical Opaque Textured') {
+        // @ts-ignore
+        mat.albedoTexture = texture;
+        return true;
+    }
+    return false;
+}
diff --git a/video-texture.js b/video-texture.js
@@ -1,4 +1,5 @@
-import {Component, Texture, Type} from '@wonderlandengine/api';
+import {Component, Texture, Property} from '@wonderlandengine/api';
+import {setFirstMaterialTexture} from './utils/utils.js';
 
 /**
  * Downloads a video from URL and applies it as `diffuseTexture` or `flatTexture`
@@ -30,15 +31,17 @@ export class VideoTexture extends Component {
     static TypeName = 'video-texture';
     static Properties = {
         /** URL to download video from */
-        url: {type: Type.String},
+        url: Property.string(),
         /** Material to apply the video texture to */
-        material: {type: Type.Material},
+        material: Property.material(),
         /** Whether to loop the video */
-        loop: {type: Type.Bool, default: true},
+        loop: Property.bool(true),
         /** Whether to automatically start playing the video */
-        autoplay: {type: Type.Bool, default: true},
+        autoplay: Property.bool(true),
         /** Whether to mute sound */
-        muted: {type: Type.Bool, default: true},
+        muted: Property.bool(true),
+        /** Name of the texture property to set */
+        textureProperty: Property.string('auto'),
     };
 
     init() {
@@ -77,15 +80,7 @@ export class VideoTexture extends Component {
         const shader = mat.shader;
         const texture = (this.texture = new Texture(this.engine, this.video));
 
-        if (shader === 'Flat Opaque Textured') {
-            mat.flatTexture = texture;
-        } else if (shader === 'Phong Opaque Textured' || shader === 'Foliage') {
-            mat.diffuseTexture = texture;
-        } else if (shader === 'Background') {
-            mat.texture = texture;
-        } else if (shader === 'Physical Opaque Textured') {
-            mat.albedoTexture = texture;
-        } else {
+        if (!setFirstMaterialTexture(mat, texture, this.textureProperty)) {
             console.error('Shader', shader, 'not supported by video-texture');
         }