feat: depth texture example

bhouston · Jun 24, 2020 · f85573e · f85573e
1 parent 7777f76
commit f85573e
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 22 deletions.
diff --git a/examples/gettingstarted/11_depthTexture/index.html b/examples/gettingstarted/11_depthTexture/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Threeify - Getting Started - 11 Depth Texture</title>
+    <script type="module" src="/dist/examples/gettingstarted/11_depthTexture/index.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/examples/gettingstarted/10_renderToTexture/index.ts b/src/examples/gettingstarted/10_renderToTexture/index.ts
@@ -13,17 +13,16 @@ import { makeBufferGeometryFromGeometry } from "../../../lib/renderers/webgl/buf
 import { ClearState } from "../../../lib/renderers/webgl/ClearState";
 import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl/DepthTestState";
 import { AttachmentBits } from "../../../lib/renderers/webgl/framebuffers/AttachmentBits";
-import { AttachmentPoints } from "../../../lib/renderers/webgl/framebuffers/AttachmentPoints";
+import { AttachmentPoint } from "../../../lib/renderers/webgl/framebuffers/AttachmentPoint";
 import { Framebuffer } from "../../../lib/renderers/webgl/framebuffers/Framebuffer";
 import { FramebufferAttachment } from "../../../lib/renderers/webgl/framebuffers/VirtualFramebuffer";
 import { makeProgramFromShaderMaterial } from "../../../lib/renderers/webgl/programs/Program";
 import { RenderingContext } from "../../../lib/renderers/webgl/RenderingContext";
 import { DataType } from "../../../lib/renderers/webgl/textures/DataType";
-import { PixelFormat } from "../../../lib/renderers/webgl/textures/PixelFormat";
-import { makeTexImage2DFromTexture, TexImage2D } from "../../../lib/renderers/webgl/textures/TexImage2D";
-import { TexParameters } from "../../../lib/renderers/webgl/textures/TexParameters";
-import { TextureFilter } from "../../../lib/renderers/webgl/textures/TextureFilter";
-import { TextureTarget } from "../../../lib/renderers/webgl/textures/TextureTarget";
+import {
+  makeFramebufferAttachmentTexImage2D,
+  makeTexImage2DFromTexture,
+} from "../../../lib/renderers/webgl/textures/TexImage2D";
 import { fetchImage } from "../../../lib/textures/loaders/Image";
 import { Texture } from "../../../lib/textures/Texture";
 import fragmentSourceCode from "./fragment.glsl";
@@ -41,22 +40,13 @@ async function init(): Promise<null> {
     document.body.appendChild(canvas);
   }
 
-  const texParams = new TexParameters();
-  texParams.generateMipmaps = false;
-  texParams.magFilter = TextureFilter.Linear;
-  texParams.minFilter = TextureFilter.Linear;
-  const renderTexture = new TexImage2D(
+  const colorRenderTexture = makeFramebufferAttachmentTexImage2D(
     context,
-    [],
     new Vector2(1024, 1024),
-    0,
-    PixelFormat.RGBA,
+    AttachmentPoint.Color0,
     DataType.UnsignedByte,
-    PixelFormat.RGBA,
-    TextureTarget.Texture2D,
-    texParams,
   );
-  const framebuffer = new Framebuffer(context, [new FramebufferAttachment(AttachmentPoints.Color0, renderTexture)]);
+  const framebuffer = new Framebuffer(context, [new FramebufferAttachment(AttachmentPoint.Color0, colorRenderTexture)]);
 
   const program = makeProgramFromShaderMaterial(context, material);
   const uvTestTexture = makeTexImage2DFromTexture(context, texture);
@@ -84,7 +74,7 @@ async function init(): Promise<null> {
     framebuffer.clear(AttachmentBits.All, whiteClearState);
     framebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
 
-    uniforms.map = renderTexture;
+    uniforms.map = colorRenderTexture;
     canvasFramebuffer.clear(AttachmentBits.All, whiteClearState);
     canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
   }

diff --git a/src/examples/gettingstarted/11_depthTexture/fragment.glsl b/src/examples/gettingstarted/11_depthTexture/fragment.glsl
@@ -0,0 +1,18 @@
+precision highp float;
+
+varying vec3 v_viewPosition;
+varying vec3 v_viewNormal;
+varying vec2 v_uv;
+
+uniform sampler2D map;
+uniform vec3 viewLightPosition;
+
+void main() {
+
+  vec3 albedo = texture2D(map, v_uv).xxx;
+  vec3 directionToLight = normalize( viewLightPosition - v_viewPosition );
+  float lambertianIntensity = dot( directionToLight, v_viewNormal );
+
+  gl_FragColor = vec4( albedo * lambertianIntensity, 1.0 );
+
+}
diff --git a/src/examples/gettingstarted/11_depthTexture/index.ts b/src/examples/gettingstarted/11_depthTexture/index.ts
@@ -0,0 +1,95 @@
+import { box } from "../../../lib/geometry/primitives/Box";
+import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
+import { Euler } from "../../../lib/math/Euler";
+import { Matrix4 } from "../../../lib/math/Matrix4";
+import {
+  makeMatrix4OrthographicSimple,
+  makeMatrix4RotationFromEuler,
+  makeMatrix4Translation,
+} from "../../../lib/math/Matrix4.Functions";
+import { Vector2 } from "../../../lib/math/Vector2";
+import { Vector3 } from "../../../lib/math/Vector3";
+import { makeBufferGeometryFromGeometry } from "../../../lib/renderers/webgl/buffers/BufferGeometry";
+import { ClearState } from "../../../lib/renderers/webgl/ClearState";
+import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl/DepthTestState";
+import { AttachmentBits } from "../../../lib/renderers/webgl/framebuffers/AttachmentBits";
+import { AttachmentPoint } from "../../../lib/renderers/webgl/framebuffers/AttachmentPoint";
+import { Framebuffer } from "../../../lib/renderers/webgl/framebuffers/Framebuffer";
+import { FramebufferAttachment } from "../../../lib/renderers/webgl/framebuffers/VirtualFramebuffer";
+import { makeProgramFromShaderMaterial } from "../../../lib/renderers/webgl/programs/Program";
+import { RenderingContext } from "../../../lib/renderers/webgl/RenderingContext";
+import { DataType } from "../../../lib/renderers/webgl/textures/DataType";
+import {
+  makeFramebufferAttachmentTexImage2D,
+  makeTexImage2DFromTexture,
+} from "../../../lib/renderers/webgl/textures/TexImage2D";
+import { fetchImage } from "../../../lib/textures/loaders/Image";
+import { Texture } from "../../../lib/textures/Texture";
+import fragmentSourceCode from "./fragment.glsl";
+import vertexSourceCode from "./vertex.glsl";
+
+async function init(): Promise<null> {
+  const geometry = box(0.75, 0.75, 0.75);
+  const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
+  const texture = new Texture(await fetchImage("/assets/textures/uv_grid_opengl.jpg"));
+
+  const context = new RenderingContext();
+  const canvasFramebuffer = context.canvasFramebuffer;
+  const canvas = canvasFramebuffer.canvas;
+  if (canvas instanceof HTMLCanvasElement) {
+    document.body.appendChild(canvas);
+  }
+
+  const colorRenderTexture = makeFramebufferAttachmentTexImage2D(
+    context,
+    new Vector2(1024, 1024),
+    AttachmentPoint.Color0,
+    DataType.UnsignedByte,
+  );
+  const depthRenderTexture = makeFramebufferAttachmentTexImage2D(
+    context,
+    new Vector2(1024, 1024),
+    AttachmentPoint.Depth,
+  );
+  const framebuffer = new Framebuffer(context, [
+    new FramebufferAttachment(AttachmentPoint.Color0, colorRenderTexture),
+    new FramebufferAttachment(AttachmentPoint.Depth, depthRenderTexture),
+  ]);
+
+  const program = makeProgramFromShaderMaterial(context, material);
+  const uvTestTexture = makeTexImage2DFromTexture(context, texture);
+  const uniforms = {
+    localToWorld: new Matrix4(),
+    worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
+    viewToScreen: makeMatrix4OrthographicSimple(1.5, new Vector2(), 0.1, 2.0, 1.0, canvasFramebuffer.aspectRatio),
+    viewLightPosition: new Vector3(0, 0, 0),
+    map: uvTestTexture,
+  };
+  const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
+  const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
+  const whiteClearState = new ClearState(new Vector3(1, 1, 1), 1.0);
+
+  function animate(): void {
+    requestAnimationFrame(animate);
+
+    const now = Date.now();
+    uniforms.localToWorld = makeMatrix4RotationFromEuler(
+      new Euler(now * 0.001, now * 0.0033, now * 0.00077),
+      uniforms.localToWorld,
+    );
+    uniforms.map = uvTestTexture;
+
+    framebuffer.clear(AttachmentBits.All, whiteClearState);
+    framebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
+
+    uniforms.map = depthRenderTexture;
+    canvasFramebuffer.clear(AttachmentBits.All, whiteClearState);
+    canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
+  }
+
+  animate();
+
+  return null;
+}
+
+init();
diff --git a/src/examples/gettingstarted/11_depthTexture/vertex.glsl b/src/examples/gettingstarted/11_depthTexture/vertex.glsl
@@ -0,0 +1,20 @@
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+
+uniform mat4 localToWorld;
+uniform mat4 worldToView;
+uniform mat4 viewToScreen;
+
+varying vec3 v_viewPosition;
+varying vec3 v_viewNormal;
+varying vec2 v_uv;
+
+void main() {
+
+  v_viewNormal = normalize( ( worldToView * localToWorld * vec4( normal, 0.0 ) ).xyz );
+  v_viewPosition = ( worldToView * localToWorld * vec4( position, 1.0 ) ).xyz;
+  v_uv = uv;
+  gl_Position = viewToScreen * vec4( v_viewPosition, 1.0 );
+
+}
diff --git a/...rs/webgl/framebuffers/AttachmentPoints.ts → ...ers/webgl/framebuffers/AttachmentPoint.ts b/...rs/webgl/framebuffers/AttachmentPoints.ts → ...ers/webgl/framebuffers/AttachmentPoint.ts
@@ -1,6 +1,6 @@
 import { GL } from "../GL";
 
-export enum AttachmentPoints {
+export enum AttachmentPoint {
   Color0 = GL.COLOR_ATTACHMENT0,
   Depth = GL.DEPTH_ATTACHMENT,
   DepthStencil = GL.DEPTH_STENCIL_ATTACHMENT,

diff --git a/src/lib/renderers/webgl/framebuffers/VirtualFramebuffer.ts b/src/lib/renderers/webgl/framebuffers/VirtualFramebuffer.ts
@@ -23,7 +23,7 @@ import { numPixelFormatComponents, PixelFormat } from "../textures/PixelFormat";
 import { TexImage2D } from "../textures/TexImage2D";
 import { VertexArrayObject } from "../VertexArrayObject";
 import { AttachmentBits } from "./AttachmentBits";
-import { AttachmentPoints } from "./AttachmentPoints";
+import { AttachmentPoint } from "./AttachmentPoint";
 
 const GL = WebGLRenderingContext;
 
@@ -123,7 +123,7 @@ export abstract class VirtualFramebuffer implements IDisposable {
   }
 
   readPixels(pixelBuffer: ArrayBufferView): ArrayBufferView {
-    const attachment = this.attachments.find((attachment) => attachment.attachmentPoint === AttachmentPoints.Color0);
+    const attachment = this.attachments.find((attachment) => attachment.attachmentPoint === AttachmentPoint.Color0);
     if (attachment === undefined) {
       throw new Error("can not find Color0 attachment");
     }

diff --git a/src/lib/renderers/webgl/textures/TexImage2D.ts b/src/lib/renderers/webgl/textures/TexImage2D.ts
@@ -12,11 +12,13 @@ import { ArrayBufferImage } from "../../../textures/ArrayBufferImage";
 import { CubeTexture } from "../../../textures/CubeTexture";
 import { Texture, TextureImage } from "../../../textures/Texture";
 import { Pool } from "../../Pool";
+import { AttachmentPoint } from "../framebuffers/AttachmentPoint";
 import { GL } from "../GL";
 import { RenderingContext } from "../RenderingContext";
 import { DataType } from "./DataType";
 import { PixelFormat } from "./PixelFormat";
 import { TexParameters } from "./TexParameters";
+import { TextureFilter } from "./TextureFilter";
 import { TextureTarget } from "./TextureTarget";
 
 export class TexImage2D implements IDisposable {
@@ -47,6 +49,18 @@ export class TexImage2D implements IDisposable {
     console.log(this.target, this.glTexture);
     gl.bindTexture(this.target, this.glTexture);
     if (images.length === 0) {
+      console.log(
+        "texImage2D",
+        this.target,
+        this.level,
+        this.internalFormat,
+        this.size.width,
+        this.size.height,
+        0,
+        this.pixelFormat,
+        this.dataType,
+        null,
+      );
       gl.texImage2D(
         this.target,
         this.level,
@@ -172,3 +186,48 @@ export class TexImage2DPool extends Pool<Texture, TexImage2D> {
     });
   }
 }
+
+export function makeFramebufferAttachmentTexImage2D(
+  context: RenderingContext,
+  size: Vector2,
+  attachmentPoint: AttachmentPoint,
+  dataType: DataType | undefined = undefined,
+): TexImage2D {
+  if (attachmentPoint === AttachmentPoint.Color0) {
+    const texParams = new TexParameters();
+    texParams.generateMipmaps = false;
+    texParams.magFilter = TextureFilter.Linear;
+    texParams.minFilter = TextureFilter.Linear;
+    return new TexImage2D(
+      context,
+      [],
+      size,
+      0,
+      PixelFormat.RGBA,
+      dataType ?? DataType.UnsignedByte,
+      PixelFormat.RGBA,
+      TextureTarget.Texture2D,
+      texParams,
+    );
+  }
+  if (attachmentPoint === AttachmentPoint.Depth) {
+    const texParams = new TexParameters();
+    texParams.generateMipmaps = false;
+    texParams.magFilter = TextureFilter.Nearest;
+    texParams.minFilter = TextureFilter.Nearest;
+    return new TexImage2D(
+      context,
+      [],
+      size,
+      0,
+      PixelFormat.DepthComponent,
+      DataType.UnsignedShort, // context.glx.WEBGL_depth_texture.UNSIGNED_INT_24_8_WEBGL as DataType,
+      PixelFormat.DepthComponent,
+      TextureTarget.Texture2D,
+      texParams,
+    );
+
+    // gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, 512, 512, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
+  }
+  throw new Error("unsupported attachment point");
+}