Add MeshDepthMaterialOverride for overriding proper material properties, changes in DepthBufferPlugin, NormalBufferPlugin, add AddBlendTexturePass, minor changes

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "threepipe",
-  "version": "0.0.10",
+  "version": "0.0.11-dev.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "threepipe",
-      "version": "0.0.10",
+      "version": "0.0.11-dev.1",
       "license": "Apache-2.0",
       "dependencies": {
-        "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
+        "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1012/package.tgz",
         "@types/webxr": "^0.5.1",
         "@types/wicg-file-system-access": "^2020.9.5",
         "ts-browser-helpers": "^0.8.0"
@@ -662,9 +662,9 @@
       "dev": true
     },
     "node_modules/@types/three": {
-      "version": "0.152.1011",
-      "resolved": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
-      "integrity": "sha512-ZnWZWjxjNybypRf6aBaydSVPICNQ3HRdeHJXvhHWESFre1Whc7/WuF4VRd0EwfWPHMF8jSO4Y/TAQ0S+PG1hUA==",
+      "version": "0.152.1012",
+      "resolved": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1012/package.tgz",
+      "integrity": "sha512-G3Hyma5qGM+Wc1F2dapnIrdNY2uPr33eNYMzaDPbrvHJMHmoZyshrrl9tAodVpND+BVxXSvGiXpfunRGYPOtJg==",
       "dependencies": {
         "@tweenjs/tween.js": "~18.6.4",
         "fflate": "~0.6.9",
@@ -10807,8 +10807,8 @@
       "dev": true
     },
     "@types/three": {
-      "version": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
-      "integrity": "sha512-ZnWZWjxjNybypRf6aBaydSVPICNQ3HRdeHJXvhHWESFre1Whc7/WuF4VRd0EwfWPHMF8jSO4Y/TAQ0S+PG1hUA==",
+      "version": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1012/package.tgz",
+      "integrity": "sha512-G3Hyma5qGM+Wc1F2dapnIrdNY2uPr33eNYMzaDPbrvHJMHmoZyshrrl9tAodVpND+BVxXSvGiXpfunRGYPOtJg==",
       "requires": {
         "@tweenjs/tween.js": "~18.6.4",
         "fflate": "~0.6.9",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "threepipe",
-  "version": "0.0.10",
+  "version": "0.0.11-dev.1",
   "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -10,7 +10,7 @@
   "scripts": {
     "new:pack": "npm run prepare && clean-package && npm pack && clean-package restore",
     "new:publish": "npm run prepare && clean-package && npm publish && clean-package restore",
-    "build": "rimraf dist && NODE_ENV=production rollup -c",
+    "build": "rimraf dist && npm run update-version && NODE_ENV=production rollup -c",
     "dev": "rollup -c -w",
     "build-examples": "tsc --project examples/tsconfig.build.json",
     "dev-examples": "tsc --project examples/tsconfig.build.json -w",
@@ -18,7 +18,8 @@
     "serve": "ws -d . -p 9229",
     "docs": "npx typedoc && markdown-to-html",
     "build-plugins": "node scripts/build-plugins.mjs",
-    "prepare": "npm run build && npm run build-plugins && npm run build-examples"
+    "prepare": "npm run build && npm run build-plugins && npm run build-examples",
+    "update-version": "echo \"export const VERSION = '$npm_package_version'\" > src/viewer/version.ts"
   },
   "clean-package": {
     "remove": [
@@ -100,7 +101,7 @@
     "rollup-plugin-replace": "^2.2.0"
   },
   "dependencies": {
-    "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
+    "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1012/package.tgz",
     "@types/webxr": "^0.5.1",
     "@types/wicg-file-system-access": "^2020.9.5",
     "ts-browser-helpers": "^0.8.0"
@@ -111,8 +112,8 @@
       "ts-browser-helpers": "^0.8.0",
       "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2012/package.tgz",
       "three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2012.tar.gz",
-      "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
-      "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1011.tar.gz",
+      "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1012/package.tgz",
+      "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1012.tar.gz",
       "@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three"
     },
     "local_dependencies": {

src/plugins/pipeline/DepthBufferPlugin.ts

@@ -1,12 +1,19 @@
 import {
     BasicDepthPacking,
+    BufferGeometry,
+    Camera,
     Color,
     DepthPackingStrategies,
+    DoubleSide,
+    FrontSide,
     MeshDepthMaterial,
     NoBlending,
+    Object3D,
+    Scene,
     Texture,
     TextureDataType,
     UnsignedByteType,
+    WebGLRenderer,
     WebGLRenderTarget,
 } from 'three'
 import {GBufferRenderPass} from '../../postprocessing'
@@ -18,6 +25,7 @@ import {shaderReplaceString} from '../../utils'
 import {onChange} from 'ts-browser-helpers'
 import DepthBufferUnpack from './shaders/DepthBufferPlugin.unpack.glsl'
 import {threeConstMappings} from '../../three'
+import {IMaterial, PhysicalMaterial} from '../../core'
 
 export type DepthBufferPluginEventTypes = ''
 // type DepthBufferPluginTarget = WebGLMultipleRenderTargets | WebGLRenderTarget
@@ -41,9 +49,10 @@ export class DepthBufferPlugin
 
     @uiImage('Depth Buffer' /* {readOnly: true}*/) texture?: Texture
 
-    readonly material: MeshDepthMaterial = new MeshDepthMaterial({
+    readonly material: MeshDepthMaterial = new MeshDepthMaterialOverride({
         depthPacking: BasicDepthPacking,
         blending: NoBlending,
+        transparent: true,
     })
 
     @onChange(DepthBufferPlugin.prototype._depthPackingChanged)
@@ -158,3 +167,45 @@ export class DepthBufferPlugin
 
 }
 
+class MeshDepthMaterialOverride extends MeshDepthMaterial {
+    onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D) {
+        super.onBeforeRender(renderer, scene, camera, geometry, object)
+
+        let material = (object as any).material as IMaterial & Partial<PhysicalMaterial>
+        if (Array.isArray(material)) { // todo: add support for multi materials.
+            material = material[0]
+        }
+        if (!material) return
+
+        if (material.map !== undefined) this.map = material.map // in case there is alpha in the map.
+        if (material.side !== undefined) this.side = DoubleSide
+        if (material.alphaMap !== undefined) this.alphaMap = material.alphaMap
+        if (material.alphaTest !== undefined) this.alphaTest = material.alphaTest < 1e-4 ? 1e-4 : material.alphaTest
+
+        if (material.displacementMap !== undefined) this.displacementMap = material.displacementMap
+        if (material.displacementScale !== undefined) this.displacementScale = material.displacementScale
+        if (material.displacementBias !== undefined) this.displacementBias = material.displacementBias
+
+        if (material.wireframe !== undefined) this.wireframe = material.wireframe
+        if (material.wireframeLinewidth !== undefined) this.wireframeLinewidth = material.wireframeLinewidth
+
+        this.needsUpdate = true
+
+    }
+
+    onAfterRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D) {
+        super.onAfterRender(renderer, scene, camera, geometry, object)
+
+        this.map = null
+        this.side = FrontSide
+        this.alphaMap = null
+        this.alphaTest = 0.001
+
+        this.displacementMap = null
+        this.displacementScale = 1
+        this.displacementBias = 0
+
+        this.wireframe = false
+        this.wireframeLinewidth = 1
+    }
+}

src/plugins/pipeline/NormalBufferPlugin.ts

@@ -41,7 +41,7 @@ export class NormalBufferPlugin
 
     target?: NormalBufferPluginTarget
     @uiImage('Normal Buffer' /* {readOnly: true}*/) texture?: Texture
-    readonly material: MeshNormalMaterial = new MeshNormalMaterial2({
+    readonly material: MeshNormalMaterial = new MeshNormalMaterialOverride({
         blending: NoBlending,
     })
 
@@ -105,7 +105,7 @@ export class NormalBufferPlugin
 
 }
 
-class MeshNormalMaterial2 extends MeshNormalMaterial {
+class MeshNormalMaterialOverride extends MeshNormalMaterial {
     onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D) {
         super.onBeforeRender(renderer, scene, camera, geometry, object)
 
@@ -114,6 +114,8 @@ class MeshNormalMaterial2 extends MeshNormalMaterial {
 
         if (material.bumpMap !== undefined) this.bumpMap = material.bumpMap
         if (material.bumpScale !== undefined) this.bumpScale = material.bumpScale
+        // if (material.alphaMap !== undefined) this.alphaMap = material.alphaMap
+        if (material.alphaTest !== undefined) this.alphaTest = material.alphaTest
 
         if (material.normalMap !== undefined) this.normalMap = material.normalMap
         if (material.normalMapType !== undefined) this.normalMapType = material.normalMapType
@@ -126,6 +128,10 @@ class MeshNormalMaterial2 extends MeshNormalMaterial {
         if (material.flatShading !== undefined) this.flatShading = material.flatShading
 
         if (material.side !== undefined) this.side = material.side
+
+        if (material.wireframe !== undefined) this.wireframe = material.wireframe
+        if (material.wireframeLinewidth !== undefined) this.wireframeLinewidth = material.wireframeLinewidth
+
     }
 
     onAfterRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D) {
@@ -133,6 +139,8 @@ class MeshNormalMaterial2 extends MeshNormalMaterial {
 
         this.bumpMap = null
         this.bumpScale = 1
+        // this.alphaMap = null
+        this.alphaTest = 0
 
         this.normalMap = null
         this.normalMapType = TangentSpaceNormalMap
@@ -144,5 +152,8 @@ class MeshNormalMaterial2 extends MeshNormalMaterial {
         this.flatShading = false
 
         this.side = FrontSide
+
+        this.wireframe = false
+        this.wireframeLinewidth = 1
     }
 }

src/postprocessing/AddBlendTexturePass.ts

@@ -0,0 +1,47 @@
+import {Texture, Vector4} from 'three'
+import {CopyShader} from 'three/examples/jsm/shaders/CopyShader.js'
+import {ExtendedShaderPass} from './ExtendedShaderPass'
+import {IPass} from './Pass'
+import {glsl} from 'ts-browser-helpers'
+
+export class AddBlendTexturePass extends ExtendedShaderPass implements IPass {
+    constructor(texture?: Texture) {
+        super({
+            vertexShader: CopyShader.vertexShader,
+            fragmentShader: glsl`
+                uniform vec4 weight;
+                uniform vec4 weight2;
+                varying vec2 vUv;
+                void main() {
+                    vec4 texel = clamp(weight * tDiffuseTexelToLinear ( texture2D( tDiffuse, vUv ) ) + weight2 * tDiffuse2TexelToLinear ( texture2D( tDiffuse2, vUv ) ), vec4(0), vec4(8));
+                    gl_FragColor = texel;
+                    #include <encodings_fragment>
+                }
+            `,
+            uniforms: {
+                'tDiffuse': {value: null},
+                'tDiffuse2': {value: texture},
+                'weight': {value: new Vector4(1, 1, 1, 1)},
+                'weight2': {value: new Vector4(1, 1, 1, 1)},
+            },
+        }, 'tDiffuse', 'tDiffuse2')
+        this.clear = false
+        this.needsSwap = true
+    }
+    set weights2(value: Vector4) {
+        (this.uniforms.weight2.value as Vector4).copy(value)
+    }
+    get weights2(): Vector4 {
+        return this.uniforms.weight2.value as Vector4
+    }
+    set weights1(value: Vector4) {
+        (this.uniforms.weight.value as Vector4).copy(value)
+    }
+    get weights1(): Vector4 {
+        return this.uniforms.weight.value as Vector4
+    }
+    set blendTexture(value: Texture) {
+        this.uniforms.tDiffuse2.value = value
+    }
+
+}

src/postprocessing/GenericBlendTexturePass.ts

@@ -11,14 +11,13 @@ export class GenericBlendTexturePass extends ExtendedShaderPass implements IPass
             fragmentShader: `
                 varying vec2 vUv;
                 ${extraFrag}
-                void blend(in vec4 a, in vec4 b, inout vec4 c){
-                ${blendFunc}
-                }
                 void main() {
-                    vec4 texel = vec4(0);
-                    blend(tDiffuseTexelToLinear ( texture2D( tDiffuse, vUv ) ), tDiffuse2TexelToLinear ( texture2D( tDiffuse2, vUv ) ), texel);
-                    texel = clamp(texel, vec4(0), vec4(8));
-                    gl_FragColor = texel;
+                    vec4 a = tDiffuseTexelToLinear ( texture2D( tDiffuse, vUv ) )
+                    vec4 b = tDiffuse2TexelToLinear ( texture2D( tDiffuse2, vUv ) )
+                    vec4 c = vec4(0);
+                    ${blendFunc}
+                    c = clamp(c, vec4(0), vec4(8));
+                    gl_FragColor = c;
                     #include <encodings_fragment>
                 }
             `,

src/viewer/ThreeViewer.ts

@@ -43,6 +43,7 @@ import {DropzonePlugin, DropzonePluginOptions} from '../plugins/interaction/Drop
 import {uiConfig, uiFolderContainer, UiObjectConfig} from 'uiconfig.js'
 import {IRenderTarget} from '../rendering'
 import {TonemapPlugin} from '../plugins'
+import {VERSION} from './version'
 
 export type IViewerEvent = BaseEvent & {
     type: 'update'|'preRender'|'postRender'|'preFrame'|'postFrame'|'dispose'|'addPlugin'|'renderEnabled'|'renderDisabled'
@@ -135,8 +136,6 @@ export interface ThreeViewerOptions {
     useGBufferDepth?: boolean
 }
 
-const VIEWER_VERSION = '0.0.10-dev.1'
-
 /**
  * Three Viewer
  *
@@ -145,7 +144,7 @@ const VIEWER_VERSION = '0.0.10-dev.1'
  */
 @uiFolderContainer('Viewer')
 export class ThreeViewer extends EventDispatcher<IViewerEvent, IViewerEventTypes> {
-    public static readonly VERSION = VIEWER_VERSION
+    public static readonly VERSION = VERSION
     public static readonly ConfigTypeSlug = 'vjson'
     uiConfig!: UiObjectConfig
 

src/viewer/version.ts

@@ -0,0 +1 @@
+export const VERSION = '0.0.11-dev.1'