@expofp/renderer 3.1.0 → 3.1.1

package/dist/index.d.ts

@@ -470,6 +470,7 @@ export declare class Renderer {
     private memoryInfoExtension;
     private memoryInfo?;
     private eventSystem;
+    private lightsSystem;
     private layerSystem;
     private viewportSystem;
     private updatesSystem;

package/dist/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
-import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Frustum, Sphere, Box3, DynamicDrawUsage, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, LessEqualDepth, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, LinearSRGBColorSpace, Mesh, Camera, Spherical, MathUtils, Plane, Raycaster, PerspectiveCamera, Scene, Clock, WebGLRenderer } from "three";
+import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Frustum, Sphere, Box3, DynamicDrawUsage, Vector4, AlwaysDepth, DoubleSide, MeshPhongMaterial, MeshBasicMaterial, LessEqualDepth, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, LinearSRGBColorSpace, Mesh, AmbientLight, DirectionalLight, Camera, Spherical, MathUtils, Plane, Raycaster, PerspectiveCamera, Scene, Clock, WebGLRenderer } from "three";
 import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import createLog from "debug";
 import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
@@ -1102,12 +1102,13 @@ class MaterialSystem {
    * @returns MeshBasicMaterial instance
    */
   createColorMaterial(params = {}) {
-    const material = new MeshBasicMaterial({
+    const materialConstructor = params.lightingEnable ? MeshPhongMaterial : MeshBasicMaterial;
+    const material = new materialConstructor({
       ...sharedParameters,
       color: params.color ?? 16777215,
       opacity: params.opacity ?? 1
     });
-    if (params.is3D) material.depthFunc = LessEqualDepth;
+    if (params.depthEnable) material.depthFunc = LessEqualDepth;
     addDimToMaterial(material);
     this.addPolygonOffset(material);
     return material;
@@ -1119,7 +1120,7 @@ class MaterialSystem {
    */
   createTextureMaterial(params) {
     const material = new MeshBasicMaterial({ ...sharedParameters, map: params.map });
-    if (params.is3D) material.depthFunc = LessEqualDepth;
+    if (params.depthEnable) material.depthFunc = LessEqualDepth;
     if (params.uvOffset) {
       material.onBeforeCompile = (shader) => {
         shader.vertexShader = shader.vertexShader.replace(
@@ -1509,7 +1510,11 @@ class ImageSystem extends RenderableSystem {
       ).sort((a, b) => a.originalIndex - b.originalIndex);
       const instanceCount = rectsWithDef.length;
       const texture = createAtlas(bin);
-      const instanceMaterial = this.materialSystem.createTextureMaterial({ map: texture, uvOffset: true, is3D });
+      const instanceMaterial = this.materialSystem.createTextureMaterial({
+        map: texture,
+        uvOffset: true,
+        depthEnable: is3D
+      });
       const instanceGeometry = new PlaneGeometry();
       const vertexCount = instanceGeometry.attributes["position"].count;
       const indexCount = ((_a2 = instanceGeometry.index) == null ? void 0 : _a2.count) ?? 0;
@@ -2024,11 +2029,10 @@ class MeshSystem extends RenderableSystem {
     __publicField(this, "rotation", new Quaternion());
     __publicField(this, "scale", new Vector3());
     __publicField(this, "matrix", new Matrix4());
-    __publicField(this, "rectGeometry", new PlaneGeometry(1, 1));
+    __publicField(this, "rectGeometry", new PlaneGeometry(1, 1).deleteAttribute("uv").deleteAttribute("normal"));
+    __publicField(this, "rectGeometry3D", new PlaneGeometry(1, 1).deleteAttribute("uv").toNonIndexed());
     __publicField(this, "mapInstanceIdToShapeType", /* @__PURE__ */ new Map());
     this.materialSystem = materialSystem;
-    this.rectGeometry.deleteAttribute("normal");
-    this.rectGeometry.deleteAttribute("uv");
   }
   buildLayer(layer) {
     const is3D = layer.mode === "3D";
@@ -2081,7 +2085,9 @@ class MeshSystem extends RenderableSystem {
         logger$a.warn("Polygon geometry changing not supported %O", shapeDef);
         return;
       }
-      mesh.setGeometryAt(geometryId, this.buildPolygonGeometry(shape));
+      const geometry = this.buildPolygonGeometry(shape);
+      if (mesh.geometry.hasAttribute("normal")) geometry.computeVertexNormals();
+      mesh.setGeometryAt(geometryId, geometry);
     } else if (isRect) {
       this.updateRect(shape, mesh, instanceId);
     }
@@ -2106,23 +2112,28 @@ class MeshSystem extends RenderableSystem {
     let indexCount = 0;
     let rectAdded = false;
     const shapeDefToGeometry = /* @__PURE__ */ new Map();
+    const rectGeom = is3D ? this.rectGeometry3D : this.rectGeometry;
     for (const shapeDef of shapes) {
       let vertices = 0;
       let indices = 0;
       if (shapeDef.shape instanceof Rect && !rectAdded) {
         rectAdded = true;
-        ({ vertices, indices } = countGeometry(this.rectGeometry));
+        ({ vertices, indices } = countGeometry(rectGeom));
       } else if (shapeDef.shape instanceof Polygon) {
-        const geometry = this.buildPolygonGeometry(shapeDef.shape);
+        let geometry = this.buildPolygonGeometry(shapeDef.shape);
+        if (is3D) {
+          geometry = geometry.toNonIndexed();
+          geometry.computeVertexNormals();
+        }
         shapeDefToGeometry.set(shapeDef, geometry);
         ({ vertices, indices } = countGeometry(geometry));
       }
       vertexCount += vertices;
       indexCount += indices;
     }
-    const material = this.materialSystem.createColorMaterial({ opacity, is3D });
+    const material = this.materialSystem.createColorMaterial({ opacity, depthEnable: is3D, lightingEnable: is3D });
     const batchedMesh = new BatchedMesh(shapes.length, vertexCount, indexCount, material);
-    const rectGeometryId = rectAdded ? batchedMesh.addGeometry(this.rectGeometry) : void 0;
+    const rectGeometryId = rectAdded ? batchedMesh.addGeometry(rectGeom) : void 0;
     batchedMesh.setCustomSort((list) => this.sortInstances(batchedMesh, list));
     for (const shapeDef of shapes) {
       let instanceId;
@@ -2259,7 +2270,7 @@ class TextSystem extends RenderableSystem {
     const is3D = layer.mode === "3D";
     const textDefs = layer.children;
     const batchedText = new BatchedText();
-    batchedText.material = this.materialSystem.createColorMaterial({ is3D });
+    batchedText.material = this.materialSystem.createColorMaterial({ depthEnable: is3D });
     const mappingData = [];
     let instanceId = 0;
     for (const textDef of textDefs) {
@@ -2572,6 +2583,36 @@ class LayerSystem {
     return fullName;
   }
 }
+class LightsSystem {
+  constructor() {
+    __publicField(this, "color", 16777215);
+    __publicField(this, "intensity", 0.5);
+    __publicField(this, "mapSceneToLight", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Initializes a directional light for the given scene.
+   * @param scene {@link Scene} to add the light to
+   */
+  initLights(scene) {
+    const ambientLight = new AmbientLight(16777215, this.intensity);
+    scene.add(ambientLight);
+    const directionalLight = new DirectionalLight(this.color, this.intensity * Math.PI * 2);
+    scene.add(directionalLight);
+    scene.add(directionalLight.target);
+    this.mapSceneToLight.set(scene, directionalLight);
+  }
+  /**
+   * Updates the light direction to match the camera's viewing direction.
+   * @param scene {@link Scene} containing the light
+   * @param camera {@link Camera} to derive the light direction from
+   */
+  updateLights(scene, camera) {
+    const light = this.mapSceneToLight.get(scene);
+    if (!light) return;
+    const e = scene.matrixWorld.elements;
+    camera.getWorldDirection(light.position).multiply({ x: Math.sign(e[0]), y: Math.sign(e[5]), z: Math.sign(e[10]) }).normalize().negate();
+  }
+}
 const logger$7 = createLogger("");
 function assertNotDisposed(renderer, funcName) {
   if (renderer.isDisposed) {
@@ -6705,7 +6746,7 @@ class SceneSystem {
     const scaleFactor = Math.min(visibleRectSize.width, visibleRectSize.height);
     const { x: centerX, y: centerY } = viewbox.center;
     this.translationMatrix.makeTranslation(-centerX, -centerY, 0);
-    this.scaleMatrix.makeScale(scaleFactor, scaleFactor, -1);
+    this.scaleMatrix.makeScale(scaleFactor, scaleFactor, -scaleFactor);
     targetMatrix.copy(this.translationMatrix).premultiply(this.scaleMatrix);
     const viewportRectCenter = this.tempVector2.copy(viewportRectPx.center);
     const offset = viewportRectCenter.sub({ x: bufferW / 2, y: bufferH / 2 });
@@ -6948,6 +6989,7 @@ class Renderer {
     __publicField(this, "memoryInfoExtension", null);
     __publicField(this, "memoryInfo");
     __publicField(this, "eventSystem");
+    __publicField(this, "lightsSystem");
     __publicField(this, "layerSystem");
     __publicField(this, "viewportSystem");
     __publicField(this, "updatesSystem");
@@ -6966,7 +7008,8 @@ class Renderer {
     const rendererOptions = {
       antialias: true,
       context: gl,
-      canvas: this.canvas
+      canvas: this.canvas,
+      precision: "highp"
     };
     this.clock = new Clock();
     this.renderer = new WebGLRenderer(rendererOptions);
@@ -6975,6 +7018,7 @@ class Renderer {
     this.renderer.autoClear = !this.isExternalMode;
     this.ctx = this.createRendererContext();
     this.eventSystem = new EventSystem();
+    this.lightsSystem = new LightsSystem();
     this.layerSystem = new LayerSystem(this.ctx);
     this.viewportSystem = new ViewportSystem(this.ctx, this.eventSystem);
     this.updatesSystem = new UpdatesSystem(this.ctx, this.layerSystem);
@@ -7152,6 +7196,7 @@ class Renderer {
       const hasDefsUpdated = this.updatesSystem.processPendingUpdates(frustum2, 3);
       const forceRedraw = hasControlsUpdated || hasDefsUpdated || justLoaded || this.isExternalMode || this.ui;
       if (this.isExternalMode) patchMatricesInExternalMode(scene);
+      this.lightsSystem.updateLights(scene, camera);
       if (this.needsRedraw || forceRedraw) this.renderer.render(scene, camera);
       if (hasDefsUpdated || this.needsRedraw) this.viewportSystem.invalidateSceneBounds(sceneState);
     }
@@ -7188,7 +7233,9 @@ class Renderer {
   }
   initScene(sceneDef, sceneId) {
     const root = this.layerSystem.buildScene(sceneDef);
-    this.viewportSystem.initScene(sceneDef, sceneId).add(root);
+    const scene = this.viewportSystem.initScene(sceneDef, sceneId);
+    scene.add(root);
+    this.lightsSystem.initLights(scene);
   }
   // https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
   resizeCanvasToDisplaySize() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "type": "module",
   "files": [
     "dist"