Update encoding to colorSpace and add transparent image support

docs/troika-3d/scenes.md

@@ -31,6 +31,8 @@ The `<Canvas3D>` React component is your starting point. This component creates
 
 - `outputEncoding` - Sets the Three.js renderer's [`outputEncoding`](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.outputEncoding)
 
+- `outputColorSpace` - Sets the Three.js v153+ renderer's [`outputColorSpace`](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.outputColorSpace)
+
 - `pixelRatio` - Sets the pixel ratio for the canvas. Defaults to the current screen's reported `window.devicePixelRatio`.
 
 - `rendererClass` - Lets you override the Three.js `WebGLRenderer` class with a custom subclass of your own.

packages/troika-3d-ui/src/facade/UIImage3DFacade.js

@@ -15,7 +15,7 @@ class UIImage3DFacade extends Object3DFacade {
   }
 
   afterUpdate() {
-    const {offsetLeft, offsetTop, offsetWidth, offsetHeight, src, threeObject:mesh} = this
+    const {offsetLeft, offsetTop, offsetWidth, offsetHeight, src, threeObject:mesh, transparent} = this
     const material = mesh.material
     const hasLayout = !!(offsetWidth && offsetHeight)
     if (hasLayout) {
@@ -36,6 +36,7 @@ class UIImage3DFacade extends Object3DFacade {
           material.map.dispose()
         }
         material.map = texture
+        if (transparent) material.transparent = true;
         this.aspectRatio = texture.image.width / texture.image.height
         this.afterUpdate()
         this.requestRender()

packages/troika-3d/src/facade/World3DFacade.js

@@ -1,5 +1,5 @@
 import { WorldBaseFacade, utils } from 'troika-core'
-import { WebGLRenderer, Raycaster, Color, Vector2, Vector3, LinearEncoding, NoToneMapping } from 'three'
+import { WebGLRenderer, Raycaster, Color, Vector2, Vector3, NoToneMapping } from 'three'
 import Scene3DFacade from './Scene3DFacade.js'
 import {PerspectiveCamera3DFacade} from './Camera3DFacade.js'
 import {BoundingSphereOctree} from '../BoundingSphereOctree.js'
@@ -53,7 +53,15 @@ class World3DFacade extends WorldBaseFacade {
       this._bgColor = backgroundColor
     }
 
-    renderer.outputEncoding = this.outputEncoding || LinearEncoding
+
+    //backwards compatibility support for output encoding and color space
+    //set colorspace to SRGBColorSpace or LinearSRGBColorSpace
+    if ('outputColorSpace' in renderer && this.outputColorSpace) {
+      renderer.outputColorSpace = this.outputColorSpace;
+    } else {
+      renderer.outputEncoding = this.outputEncoding || 3000
+    }
+
     renderer.toneMapping = this.toneMapping || NoToneMapping
 
     // Update render canvas size

packages/troika-3d/src/react/Canvas3D.js

@@ -31,6 +31,7 @@ class Canvas3D extends ReactCanvasBase {
             background: props.background,
             environment: props.environment,
             outputEncoding: props.outputEncoding,
+            outputColorSpace: props.outputColorSpace,
             toneMapping: props.toneMapping,
             shadows: props.shadows,
             camera: props.camera,

packages/troika-three-text/src/Text.js

@@ -410,6 +410,7 @@ class Text extends Mesh {
           overflowWrap: this.overflowWrap,
           anchorX: this.anchorX,
           anchorY: this.anchorY,
+          colorSpace: this.colorSpace,
           colorRanges: this.colorRanges,
           includeCaretPositions: true, //TODO parameterize
           sdfGlyphSize: this.sdfGlyphSize,

packages/troika-three-text/src/TextBuilder.js

@@ -172,6 +172,8 @@ function getTextRenderInfo(args, callback) {
     initContextLossHandling(atlas)
   }
 
+  if (args.colorSpace) atlas.sdfTexture.colorSpace = args.colorSpace;
+
   const {sdfTexture, sdfCanvas} = atlas
   let fontGlyphs = atlas.glyphsByFont.get(args.font)
   if (!fontGlyphs) {