@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.0.0

package/src/index.ts

@@ -0,0 +1,23 @@
+import { RenderingEngine } from './RenderingEngine';
+import { ThreejsData } from './types/ThreejsData';
+import { ENVIRONMENT_MAP, ENVIRONMENT_MAP_CUBE, ENVIRONMENT_MAP_EMPTY } from './loaders/EnvironmentMapLoader';
+import { IThreejsData } from './types/IThreejsData';
+import { POST_PROCESSING_EFFECT_TYPE, IPostProcessingEffectDefinition, IDepthOfFieldEffectDefinition, IOutlineEffectDefinition, IBloomEffectDefinition, IChromaticAberrationEffectDefinition, IDotScreenEffectDefinition, IGodRaysEffectDefinition, ISSAOEffectDefinition, IHueSaturationEffectDefinition, INoiseEffectDefinition, IPixelationEffectDefinition, IScanlineEffectDefinition, ISelectiveBloomEffectDefinition, ISepiaEffectDefinition, ITiltShiftEffectDefinition, IVignetteEffectDefinition, IGridEffectDefinition, ANTI_ALIASING_TECHNIQUE, IHBAOEffectDefinition, IPostProcessingEffectsArray } from './interfaces/IPostProcessingEffectDefinitions';
+import { PostProcessingManager } from './managers/PostProcessingManager';
+import { BlendFunction, BloomEffect, ChromaticAberrationEffect, DepthOfFieldEffect, DotScreenEffect, EdgeDetectionMode, Effect, EffectComposer, FXAAEffect, GodRaysEffect, GridEffect, HueSaturationEffect, KernelSize, NoiseEffect, OutlineEffect, PixelationEffect, PredicationMode, Resolution, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SMAAEffect, SMAAPreset, SSAOEffect, TiltShiftEffect, VignetteEffect, VignetteTechnique } from 'postprocessing';
+import { MultiPointsMaterial } from './materials/MultiPointsMaterial';
+
+export {
+  RenderingEngine, IThreejsData, ThreejsData, ENVIRONMENT_MAP, ENVIRONMENT_MAP_CUBE, ENVIRONMENT_MAP_EMPTY
+};
+
+export {
+  MultiPointsMaterial
+};
+
+export {
+  PostProcessingManager, ANTI_ALIASING_TECHNIQUE, POST_PROCESSING_EFFECT_TYPE, IPostProcessingEffectDefinition, Effect, EffectComposer, IPostProcessingEffectsArray,
+  IBloomEffectDefinition, IChromaticAberrationEffectDefinition, IDepthOfFieldEffectDefinition, IDotScreenEffectDefinition, IGodRaysEffectDefinition, IGridEffectDefinition, IHBAOEffectDefinition, IHueSaturationEffectDefinition, INoiseEffectDefinition, IOutlineEffectDefinition, IPixelationEffectDefinition, ISSAOEffectDefinition, IScanlineEffectDefinition, ISelectiveBloomEffectDefinition, ISepiaEffectDefinition, ITiltShiftEffectDefinition, IVignetteEffectDefinition,
+  BloomEffect, ChromaticAberrationEffect, DepthOfFieldEffect, DotScreenEffect, FXAAEffect, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, SMAAEffect, SSAOEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, TiltShiftEffect, VignetteEffect,
+  BlendFunction, VignetteTechnique, KernelSize, SMAAPreset, EdgeDetectionMode, PredicationMode, Resolution
+};

package/src/injectors/Tag3dGeometryCreationInjector.ts

@@ -0,0 +1,170 @@
+import * as THREE from 'three';
+import {
+    AttributeData,
+    GeometryData,
+    MaterialStandardData,
+    PRIMITIVE_MODE,
+    PrimitiveData
+} from '@shapediver/viewer.shared.types';
+import { Font } from '../three/loaders/FontLoader';
+import { font } from '../three/font';
+import { ITag3D } from '@shapediver/viewer.data-engine.shared-types';
+import { ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree';
+import { StateEngine } from '@shapediver/viewer.shared.services';
+import { Tag3dEngine } from '@shapediver/viewer.data-engine.tag3d-engine';
+import { TextGeometry } from '../three/geometries/TextGeometry';
+import { IManager } from '@shapediver/viewer.rendering-engine.rendering-engine';
+
+export class Tag3dGeometryCreationInjector implements IManager {
+    // #region Properties (2)
+
+    readonly #stateEngine: StateEngine = StateEngine.instance;
+
+    public _font!: Font;
+
+    // #endregion Properties (2)
+
+    // #region Constructors (1)
+
+    constructor() {}
+
+    // #endregion Constructors (1)
+
+    // #region Public Methods (2)
+
+    public close(): void {
+        Tag3dEngine.instance.geometryCreator = undefined;
+    }
+
+    public init(): void {
+        if (!this._font) {
+            this._font = new Font(font);
+            this.#stateEngine.fontLoaded.resolve(true);
+        }
+
+        Tag3dEngine.instance.geometryCreator = this.convertTag3dToGeometry.bind(this);
+    }
+
+    // #endregion Public Methods (2)
+
+    // #region Private Methods (1)
+
+    private convertTag3dToGeometry(tag3dInfo: ITag3D): ITreeNode | undefined {
+        const node = new TreeNode('tag3d_' + tag3dInfo.version);
+
+        tag3dInfo.size = tag3dInfo.size ? +tag3dInfo.size : 1;
+        if (tag3dInfo.text === undefined || tag3dInfo.text === '' || /^[ \t\n\r]*$/.test(tag3dInfo.text))
+            return;
+
+        const tagLines = tag3dInfo.text.split(/\r\n|\r|\n/g);
+        const lineArray = [];
+
+        for (let lineIndex = 0; lineIndex < tagLines.length; ++lineIndex) {
+            if (tagLines[lineIndex] === '') continue;
+            // create tag mesh object
+            const tag = new TextGeometry(tagLines[lineIndex], { size: tag3dInfo.size, height: tag3dInfo.size / 10, font: this._font });
+            lineArray.push(tag);
+        }
+
+        // create temporary object
+        const parentObject = new THREE.Object3D();
+        for (const line of lineArray) {
+            parentObject.add(new THREE.Mesh(line, new THREE.MeshPhongMaterial()));
+        }
+
+        // align lines
+        let bb, tempExtentsY, lineHeight = 0;
+        {
+            lineHeight = 0;
+            for (const child of parentObject.children) {
+                bb = new THREE.Box3().setFromObject(child);
+                tempExtentsY = bb.max.y - bb.min.y;
+                lineHeight = Math.max(lineHeight, tempExtentsY);
+            }
+        }
+        lineHeight *= 1.15;
+
+        lineArray.forEach((line, i) => {
+            line.translate(0, (-i - 1) * lineHeight, 0);
+        });
+
+        // justification
+        bb = new THREE.Box3().setFromObject(parentObject);
+
+        const extentsX = bb.max.x - bb.min.x;
+        const extentsY = bb.max.y - bb.min.y;
+        const tagJustTranslation = new THREE.Vector3(0, 0, 0);
+
+        switch ((tag3dInfo.justification as string)) {
+            case 'TL':
+                break;
+            case 'TC':
+                tagJustTranslation.x = -extentsX * 0.5;
+                break;
+            case 'TR':
+                tagJustTranslation.x = -extentsX;
+                break;
+            case 'ML':
+                tagJustTranslation.y = extentsY * 0.5;
+                break;
+            case 'MC':
+                tagJustTranslation.x = -extentsX * 0.5;
+                tagJustTranslation.y = extentsY * 0.5;
+                break;
+            case 'MR':
+                tagJustTranslation.x = -extentsX;
+                tagJustTranslation.y = extentsY * 0.5;
+                break;
+            case 'BL':
+                tagJustTranslation.y = extentsY;
+                break;
+            case 'BC':
+                tagJustTranslation.x = -extentsX * 0.5;
+                tagJustTranslation.y = extentsY;
+                break;
+            case 'BR':
+                tagJustTranslation.x = -extentsX;
+                tagJustTranslation.y = extentsY;
+                break;
+        }
+
+        for (const line of lineArray) {
+            line.translate(tagJustTranslation.x, tagJustTranslation.y, tagJustTranslation.z);
+        }
+
+        // rotation
+        if (tag3dInfo.location.xAxis !== undefined) {
+            const rotMatrix = new THREE.Matrix4();
+            rotMatrix.set(tag3dInfo.location.xAxis.X, tag3dInfo.location.yAxis.X, tag3dInfo.location.normal.X, 0, tag3dInfo.location.xAxis.Y, tag3dInfo.location.yAxis.Y, tag3dInfo.location.normal.Y, 0, tag3dInfo.location.xAxis.Z, tag3dInfo.location.yAxis.Z, tag3dInfo.location.normal.Z, 0, 0, 0, 0, 1);
+            for (const line of lineArray) {
+                line.applyMatrix4(rotMatrix);
+                line.translate(tag3dInfo.location.origin.X, tag3dInfo.location.origin.Y, tag3dInfo.location.origin.Z);
+            }
+        }
+
+        for (const line of lineArray) {
+            const attributes: {
+                [key: string]: AttributeData
+            } = {};
+            for (const attribute in line.attributes) {
+                let attributeName = attribute.toUpperCase();
+                if (/\d/.test(attributeName) && !attributeName.includes('_')) {
+                    const index = attributeName.search(/\d/);
+                    attributeName = attributeName.substring(0, index) + '_' + attributeName.substring(index, attributeName.length);
+                } else if (attributeName === 'TEXCOORD' || attributeName === 'COLOR' || attributeName === 'JOINTS' || attributeName === 'WEIGHTS') {
+                    attributeName += '_0';
+                } else if (attributeName === 'UV') {
+                    attributeName = 'TEXCOORD_0';
+                }
+                attributes[attributeName] = new AttributeData(<Float32Array>(<THREE.BufferAttribute>line.attributes[attribute]).array, line.attributes[attribute].itemSize, 0, 0, 0, false, (<Float32Array>(<THREE.BufferAttribute>line.attributes[attribute]).array).length / line.attributes[attribute].itemSize);
+            }
+            const child = new TreeNode('tag3d_' + line);
+            child.data.push(new GeometryData(new PrimitiveData(attributes, null), PRIMITIVE_MODE.TRIANGLES, new MaterialStandardData({ color: tag3dInfo.color, metalness: 0, roughness: 1 })));
+            node.children.push(child);
+        }
+
+        return node;
+    }
+
+    // #endregion Private Methods (1)
+}

package/src/injectors/TextureUnifierInjector.ts

@@ -0,0 +1,224 @@
+import * as THREE from 'three';
+import { IManager } from '@shapediver/viewer.rendering-engine.rendering-engine';
+import { GLTFConverter } from '@shapediver/viewer.data-engine.gltf-converter';
+
+export class TextureUnifierInjector implements IManager {
+    // #region Properties (5)
+
+    private _mergeShader?: THREE.ShaderMaterial;
+    private _quad?: THREE.Mesh;
+    private _quadCamera?: THREE.OrthographicCamera;
+    private _quadScene?: THREE.Scene;
+    private _renderer?: THREE.WebGLRenderer;
+
+    // #endregion Properties (5)
+
+    // #region Constructors (1)
+
+    constructor() { }
+
+    // #endregion Constructors (1)
+
+    // #region Public Methods (2)
+
+    public close(): void {
+        GLTFConverter.instance.combineTextures = undefined;
+    }
+
+    public init(): void {
+        GLTFConverter.instance.combineTextures = this.combineTextures.bind(this);
+    }
+
+    // #endregion Public Methods (2)
+
+    // #region Private Methods (2)
+
+    private async combineTextures(red?: HTMLImageElement | ArrayBuffer, green?: HTMLImageElement | ArrayBuffer, blue?: HTMLImageElement | ArrayBuffer): Promise<{ image: HTMLImageElement | ArrayBuffer, blob: Blob }> {
+        if (!red && !green && !blue)
+            throw new Error('No maps supplied.');
+
+        if (red && red instanceof ArrayBuffer)
+            return { image: red, blob: new Blob([new Uint8Array(red)], { type: 'image/jpeg' }) };
+
+        if (green && green instanceof ArrayBuffer)
+            return { image: green, blob: new Blob([new Uint8Array(green)], { type: 'image/jpeg' }) };
+
+        if (blue && blue instanceof ArrayBuffer)
+            return { image: blue, blob: new Blob([new Uint8Array(blue)], { type: 'image/jpeg' }) };
+
+        if (!this._renderer)
+            this.createThreeJsUtils();
+
+        let width = 0, height = 0;
+        const textures = [red, green, blue];
+        for (const t of textures) {
+            if (t) {
+                if (width === 0 && height === 0) {
+                    width = t.width;
+                    height = t.height;
+                } else if (t.width !== width && t.height !== height) {
+                    throw new Error('Maps have different sizes. Combining not supported.');
+                }
+            }
+        }
+
+        if (red) {
+            const redTexture = new THREE.Texture(red);
+            redTexture.needsUpdate = true;
+            this._mergeShader!.uniforms.tRed.value = redTexture;
+            this._mergeShader!.uniforms.activeRed.value = true;
+        } else {
+            this._mergeShader!.uniforms.activeRed.value = false;
+        }
+
+        if (green) {
+            const greenTexture = new THREE.Texture(green);
+            greenTexture.needsUpdate = true;
+            this._mergeShader!.uniforms.tGreen.value = greenTexture;
+            this._mergeShader!.uniforms.activeGreen.value = true;
+        } else {
+            this._mergeShader!.uniforms.activeGreen.value = false;
+        }
+
+        if (blue) {
+            const blueTexture = new THREE.Texture(blue);
+            blueTexture.needsUpdate = true;
+            this._mergeShader!.uniforms.tBlue.value = blueTexture;
+            this._mergeShader!.uniforms.activeBlue.value = true;
+        } else {
+            this._mergeShader!.uniforms.activeBlue.value = false;
+        }
+
+        // The different render targets that are used by the passes
+        const renderTarget = new THREE.WebGLRenderTarget(width, height, {
+            minFilter: THREE.LinearFilter,
+            magFilter: THREE.LinearFilter,
+            format: THREE.RGBAFormat
+        });
+        renderTarget.texture.name = 'target.rt';
+        this._renderer!.setRenderTarget(renderTarget);
+
+        this._renderer!.render(this._quadScene!, this._quadCamera!);
+
+        const buffer = new Uint8ClampedArray(4 * width * height);
+        this._renderer!.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);
+
+        const imageData = new ImageData(buffer, width, height);
+        const canvas = document.createElement('canvas');
+        const ctx = <CanvasRenderingContext2D>canvas.getContext('2d');
+        canvas.width = imageData.width;
+        canvas.height = imageData.height;
+        ctx.putImageData(imageData, 0, 0);
+
+        const imageOut = new Image();
+        const promises = [];
+        promises.push(new Promise<void>((resolve, reject) => {
+            imageOut.onload = () => resolve();
+            imageOut.onerror = reject;
+        }));
+
+        imageOut.crossOrigin = 'anonymous';
+        const mimeType = 'image/jpeg';
+        imageOut.src = canvas.toDataURL(mimeType, 1.0);
+
+        let blob!: Blob;
+        promises.push(new Promise<void>((resolve, reject) => {
+            canvas.toBlob((b) => {
+                if (!b) {
+                    reject('Could not create blob.');
+                } else {
+                    blob = b;
+                }
+                resolve();
+            }, mimeType, 1.0);
+        }));
+
+        await Promise.all(promises);
+
+        return { image: imageOut, blob };
+    }
+
+    private createThreeJsUtils() {
+        this._mergeShader = new THREE.ShaderMaterial({
+            uniforms: {
+                tRed: { value: null },
+                activeRed: { value: false },
+                defaultRed: { value: 1.0 },
+                tGreen: { value: null },
+                activeGreen: { value: false },
+                defaultGreen: { value: 1.0 },
+                tBlue: { value: null },
+                activeBlue: { value: false },
+                defaultBlue: { value: 1.0 },
+            },
+            vertexShader: `// @author Michael Oppitz 
+        
+            uniform sampler2D tRed;
+            uniform bool activeRed;
+            uniform float defaultRed;
+            
+            uniform sampler2D tGreen;		
+            uniform bool activeGreen;
+            uniform float defaultGreen;
+            
+            uniform sampler2D tBlue;		
+            uniform bool activeBlue;
+            uniform float defaultBlue;
+        
+            varying vec2 vUv;
+            
+            void main() {
+                vUv = uv;
+                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            }`,
+            fragmentShader: `// @author Michael Oppitz 
+        
+            uniform sampler2D tRed;
+            uniform bool activeRed;
+            uniform float defaultRed;
+            
+            uniform sampler2D tGreen;		
+            uniform bool activeGreen;
+            uniform float defaultGreen;
+            
+            uniform sampler2D tBlue;		
+            uniform bool activeBlue;
+            uniform float defaultBlue;
+            
+            varying vec2 vUv;
+            
+            void main() {
+                vec4 outColor = vec4(0.0, 0.0, 0.0, 1.0);
+        
+                if(activeRed == true) {
+                    outColor.r = texture2D(tRed, vUv).r;
+                } else {
+                    outColor.r = defaultRed;
+                }
+            
+                if(activeGreen == true) {
+                    outColor.g = texture2D(tGreen, vUv).g;
+                } else {
+                    outColor.g = defaultGreen;
+                }
+            
+                if(activeBlue == true) {
+                    outColor.b = texture2D(tBlue, vUv).b;
+                } else {
+                    outColor.b = defaultBlue;
+                }
+            
+                gl_FragColor = outColor;
+            }`
+        });
+
+        this._quadCamera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0, 1);
+        this._quadScene = new THREE.Scene();
+        this._quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this._mergeShader);
+        this._quadScene.add(this._quad);
+
+        this._renderer = new THREE.WebGLRenderer();
+    }
+
+    // #endregion Private Methods (2)
+}

package/src/interfaces/ILoader.ts

@@ -0,0 +1,3 @@
+export interface ILoader {
+    init(): void;
+}