Add "transparent" as a setting for images

src/editor/nodes/ImageNode.js

@@ -16,12 +16,13 @@ export default class ImageNode extends EditorNodeMixin(Image) {
   static async deserialize(editor, json, loadAsync, onError) {
     const node = await super.deserialize(editor, json);
 
-    const { src, projection, controls } = json.components.find(c => c.name === "image").props;
+    const { src, projection, controls, transparent } = json.components.find(c => c.name === "image").props;
 
     loadAsync(
       (async () => {
         await node.load(src, onError);
         node.controls = controls || false;
+        node.transparent = transparent === undefined ? true : transparent;
         node.projection = projection;
       })()
     );
@@ -34,6 +35,7 @@ export default class ImageNode extends EditorNodeMixin(Image) {
 
     this._canonicalUrl = "";
     this.controls = true;
+    this.transparent = false;
   }
 
   get src() {
@@ -103,6 +105,7 @@ export default class ImageNode extends EditorNodeMixin(Image) {
     super.copy(source, recursive);
 
     this.controls = source.controls;
+    this.transparent = source.transparent;
     this._canonicalUrl = source._canonicalUrl;
 
     return this;
@@ -113,6 +116,7 @@ export default class ImageNode extends EditorNodeMixin(Image) {
       image: {
         src: this._canonicalUrl,
         controls: this.controls,
+        transparent: this.transparent,
         projection: this.projection
       }
     });
@@ -123,6 +127,7 @@ export default class ImageNode extends EditorNodeMixin(Image) {
     this.addGLTFComponent("image", {
       src: this._canonicalUrl,
       controls: this.controls,
+      transparent: this.transparent,
       projection: this.projection
     });
     this.addGLTFComponent("networked", {

src/editor/objects/Image.js

@@ -6,7 +6,6 @@ import {
   Mesh,
   sRGBEncoding,
   LinearFilter,
-  RGBAFormat,
   PlaneBufferGeometry
 } from "three";
 import loadTexture from "../utils/loadTexture";
@@ -21,10 +20,12 @@ export default class Image extends Object3D {
     super();
     this._src = null;
     this._projection = "flat";
+    this._transparent = false;
 
     const geometry = new PlaneBufferGeometry();
     const material = new MeshBasicMaterial();
     material.side = DoubleSide;
+    material.transparent = this._transparent;
     this._mesh = new Mesh(geometry, material);
     this._mesh.name = "ImageMesh";
     this.add(this._mesh);
@@ -43,6 +44,15 @@ export default class Image extends Object3D {
     return loadTexture(src);
   }
 
+  get transparent() {
+    return this._transparent;
+  }
+
+  set transparent(v) {
+    this._transparent = v;
+    this._mesh.material.transparent = v;
+  }
+
   get projection() {
     return this._projection;
   }
@@ -63,9 +73,7 @@ export default class Image extends Object3D {
 
     material.map = this._texture;
 
-    if (this._texture && this._texture.format === RGBAFormat) {
-      material.transparent = true;
-    }
+    material.transparent = this._transparent;
 
     this._projection = projection;
 
@@ -106,9 +114,7 @@ export default class Image extends Object3D {
 
     this.onResize();
 
-    if (texture.format === RGBAFormat) {
-      this._mesh.material.transparent = true;
-    }
+    this._mesh.material.transparent = this._transparent;
 
     this._mesh.material.map = this._texture;
     this._mesh.material.needsUpdate = true;

src/ui/properties/ImageNodeEditor.js

@@ -16,6 +16,7 @@ export default function ImageNodeEditor(props) {
   const onChangeSrc = useSetPropertySelected(editor, "src");
   const onChangeControls = useSetPropertySelected(editor, "controls");
   const onChangeProjection = useSetPropertySelected(editor, "projection");
+  const onChangeTransparent = useSetPropertySelected(editor, "transparent");
 
   return (
     <NodeEditor description={ImageNodeEditor.description} {...props}>
@@ -25,6 +26,9 @@ export default function ImageNodeEditor(props) {
       <InputGroup name="Controls" info="Toggle the visibility of the media controls in Hubs.">
         <BooleanInput value={node.controls} onChange={onChangeControls} />
       </InputGroup>
+      <InputGroup name="Transparent" info="Enable transparency">
+        <BooleanInput value={node.transparent} onChange={onChangeTransparent} />
+      </InputGroup>
       <InputGroup name="Projection">
         <SelectInput options={imageProjectionOptions} value={node.projection} onChange={onChangeProjection} />
       </InputGroup>