Add depthTexture to gbuffer.

examples/gbuffer-plugin/script.ts

@@ -1,6 +1,7 @@
 import {
     _testFinish,
     downloadBlob,
+    FloatType,
     GBufferPlugin,
     HalfFloatType,
     IObject3D,
@@ -12,11 +13,18 @@ import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
     msaa: true,
+    zPrepass: true,
 })
 
 async function init() {
 
-    const gbufferPlugin = viewer.addPluginSync(new GBufferPlugin(HalfFloatType))
+    const gbufferPlugin = viewer.addPluginSync(new GBufferPlugin(
+        HalfFloatType,
+        true, // isPrimaryGBuffer (used for zprepass etc)
+        true, // enabled by default
+        true, // render the flags buffer (used for eg selective tonemapping)
+        true, // render depth texture
+        FloatType)) // render depth texture as Float type. available - UnsignedShort(16 bits), UnsignedInt(24 bits) or Float(32 bits)
 
     await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
     const model = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/kira.glb', {
@@ -48,10 +56,12 @@ async function init() {
 
     const getNormalDepth = ()=>({texture: gbufferPlugin.normalDepthTexture})
     const getFlags = ()=>({texture: gbufferPlugin.flagsTexture})
+    const getDepthTexture = ()=>({texture: gbufferPlugin.depthTexture})
 
     const targetPreview = await viewer.addPlugin(RenderTargetPreviewPlugin)
     targetPreview.addTarget(getNormalDepth, 'normalDepth')
     targetPreview.addTarget(getFlags, 'gBufferFlags')
+    targetPreview.addTarget(getDepthTexture, 'depthTexture')
 
     const screenPass = viewer.renderManager.screenPass
 
@@ -66,6 +76,11 @@ async function init() {
             screenPass.overrideReadBuffer = screenPass.overrideReadBuffer?.texture === rt.texture ? null : rt
             viewer.setDirty()
         },
+        ['Toggle Depth Texture']: () => {
+            const rt = getDepthTexture()
+            screenPass.overrideReadBuffer = screenPass.overrideReadBuffer?.texture === rt.texture ? null : rt
+            viewer.setDirty()
+        },
         ['Download snapshot']: async(btn: HTMLButtonElement) => {
             btn.disabled = true
             const blob = await viewer.getScreenshotBlob({mimeType: 'image/png'})

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "threepipe",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "threepipe",
-      "version": "0.0.21",
+      "version": "0.0.22",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1020/package.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "threepipe",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/plugins/pipeline/GBufferPlugin.ts

@@ -2,7 +2,9 @@ import {
     BufferGeometry,
     Camera,
     Color,
+    DepthTexture,
     DoubleSide,
+    FloatType,
     GLSL1,
     GLSL3,
     IUniform,
@@ -17,6 +19,8 @@ import {
     UniformsLib,
     UniformsUtils,
     UnsignedByteType,
+    UnsignedIntType,
+    UnsignedShortType,
     Vector2,
     Vector4,
     WebGLMultipleRenderTargets,
@@ -82,6 +86,12 @@ export class GBufferPlugin
     get flagsTexture(): ITexture|undefined {
         return this.textures[1]
     }
+
+    @uiImage(/* {readOnly: true}*/)
+    get depthTexture(): (ITexture&DepthTexture)|undefined {
+        return this.target?.depthTexture
+    }
+
     // @uiConfig() // not supported in this material yet
     material?: GBufferMaterial
 
@@ -115,12 +125,14 @@ export class GBufferPlugin
         extraUniforms: {
             tNormalDepth: ()=>({value: this.normalDepthTexture}),
             tGBufferFlags: ()=>({value: this.flagsTexture}),
+            tGBufferDepthTexture: ()=>({value: this.depthTexture}),
         },
         extraDefines: {
             // ['GBUFFER_PACKING']: BasicDepthPacking,
             ['HAS_NORMAL_DEPTH_BUFFER']: ()=>this.normalDepthTexture ? 1 : undefined,
-            // ['HAS_FLAGS_BUFFER']: ()=>this.flagsTexture ? 1 : undefined,
+            ['GBUFFER_HAS_DEPTH_TEXTURE']: ()=>this.depthTexture ? 1 : undefined,
             ['GBUFFER_HAS_FLAGS']: ()=>this.flagsTexture ? 1 : undefined,
+            // ['HAS_FLAGS_BUFFER']: ()=>this.flagsTexture ? 1 : undefined,
             ['HAS_GBUFFER']: ()=>this.isPrimaryGBuffer && this.normalDepthTexture ? 1 : undefined,
         },
         priority: 100,
@@ -139,6 +151,8 @@ export class GBufferPlugin
                     samples: this._viewer.renderManager.composerTarget.samples || 0,
                     type: this.bufferType,
                     textureCount: useMultiple ? 2 : 1,
+                    depthTexture: this.renderDepthTexture,
+                    depthTextureType: this.depthTextureType,
                     // magFilter: NearestFilter,
                     // minFilter: NearestFilter,
                     // generateMipmaps: false,
@@ -208,7 +222,9 @@ export class GBufferPlugin
         bufferType: TextureDataType = UnsignedByteType,
         isPrimaryGBuffer = true,
         enabled = true,
-        public renderFlagsBuffer: boolean = true
+        public renderFlagsBuffer: boolean = true,
+        public renderDepthTexture: boolean = false,
+        public depthTextureType: typeof UnsignedShortType | typeof UnsignedIntType | typeof FloatType /* | typeof UnsignedInt248Type*/ = UnsignedIntType,
         // packing: DepthPackingStrategies = BasicDepthPacking,
     ) {
         super()

src/plugins/pipeline/shaders/GBufferPlugin.unpack.glsl

@@ -48,6 +48,18 @@ ivec4 getGBufferFlags(const in vec2 uv){
     return ivec4(1);
     #endif
 }
+
+#if defined(GBUFFER_HAS_DEPTH_TEXTURE) && GBUFFER_HAS_DEPTH_TEXTURE == 1
+// NOT TESTED
+uniform sampler2D tGBufferDepthTexture;
+// needs <packing>. Its made sure that its included in the unpackExtension
+float getDepthTexture( vec2 coord, float cameraNear, float cameraFar ) {
+    float fragCoordZ = texture2D( tGBufferDepthTexture, coord ).x;
+    float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
+    return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+}
+#endif
+
 //#if DEPTH_NORMAL_TEXTURE == 1
 //uniform sampler2D tNormalDepth;
 //#else

src/rendering/RenderTarget.ts

@@ -1,10 +1,16 @@
 import {
     ColorSpace,
+    DepthFormat,
+    DepthStencilFormat,
     EventDispatcher,
+    FloatType,
     MagnificationTextureFilter,
     MinificationTextureFilter,
     Texture,
     TextureDataType,
+    UnsignedInt248Type,
+    UnsignedIntType,
+    UnsignedShortType,
     Wrapping,
 } from 'three'
 import {Vector4} from 'three/src/math/Vector4'
@@ -75,6 +81,8 @@ export interface CreateRenderTargetOptions {
     format?: number
     depthBuffer?: boolean
     depthTexture?: boolean
+    depthTextureType?: typeof UnsignedShortType | typeof UnsignedInt248Type | typeof UnsignedIntType | typeof FloatType
+    depthTextureFormat?: typeof DepthFormat | typeof DepthStencilFormat
     textureCount?: number
     wrapS?: Wrapping
     wrapT?: Wrapping

src/rendering/RenderTargetManager.ts

@@ -3,6 +3,7 @@ import {createRenderTargetKey, CreateRenderTargetOptions, IRenderTarget} from '.
 import {
     BaseEvent,
     ClampToEdgeWrapping,
+    DepthFormat,
     DepthTexture,
     EventDispatcher,
     LinearFilter,
@@ -11,6 +12,7 @@ import {
     RGBAFormat,
     Texture,
     UnsignedByteType,
+    UnsignedIntType,
     Vector2,
     WebGLCubeRenderTarget,
     WebGLMultipleRenderTargets,
@@ -58,6 +60,8 @@ export abstract class RenderTargetManager<E extends BaseEvent = BaseEvent, ET ex
         format = RGBAFormat,
         depthBuffer = true,
         depthTexture = false,
+        depthTextureType = UnsignedIntType,
+        depthTextureFormat = DepthFormat,
         size = undefined,
         textureCount = 1,
         ...op
@@ -68,7 +72,8 @@ export abstract class RenderTargetManager<E extends BaseEvent = BaseEvent, ET ex
         size = size || this.renderSize.clone().multiplyScalar(this.renderScale * (sizeMultiplier = sizeMultiplier || 1))
         size.width = Math.floor(size.width)
         size.height = Math.floor(size.height)
-        const depthTex = depthTexture ? new DepthTexture(size.width, size.height, UnsignedByteType) : undefined
+        const depthTex = depthTexture ? new DepthTexture(size.width, size.height, depthTextureType) : undefined
+        if (depthTex) depthTex.format = depthTextureFormat
         const target = this.createTargetCustom<T>(textureCount > 1 ? {
             width: size.width,
             height: size.height,

src/viewer/version.ts

@@ -1 +1 @@
-export const VERSION = '0.0.21'
+export const VERSION = '0.0.22'