feat: roughness example works

bhouston · Jun 23, 2020 · 0132ba9 · 0132ba9
1 parent fc62362
commit 0132ba9
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/src/examples/gettingstarted/5_reflectivePolyhedral/index.ts b/src/examples/gettingstarted/5_reflectivePolyhedral/index.ts
@@ -39,8 +39,7 @@ async function init(): Promise<null> {
   const uniforms = {
     localToWorld: new Matrix4(),
     worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
-    // viewToScreen: makeMatrix4Perspective(-0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
-    viewToScreen: makeMatrix4PerspectiveFov(45, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
+    viewToScreen: makeMatrix4PerspectiveFov(60, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
     cubeMap: makeTexImage2DFromCubeTexture(context, cubeTexture),
   };
   const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);

diff --git a/src/examples/gettingstarted/7_metallicRoughness/fragment.glsl b/src/examples/gettingstarted/7_metallicRoughness/fragment.glsl
@@ -4,10 +4,13 @@ varying vec3 v_viewPosition;
 varying vec3 v_viewNormal;
 
 uniform samplerCube cubeMap;
+uniform float perceptualRoughness;
+uniform int mipCount;
 
 void main() {
 
   vec3 reflectDir = reflect( normalize( v_viewPosition ),normalize(v_viewNormal) );
-  gl_FragColor = textureCube(cubeMap, reflectDir);
+  float lod = clamp(perceptualRoughness * float(mipCount), 0.0, float(mipCount));
+  gl_FragColor = textureCubeLodEXT(cubeMap, reflectDir, lod);
 
 }
diff --git a/src/examples/gettingstarted/7_metallicRoughness/index.ts b/src/examples/gettingstarted/7_metallicRoughness/index.ts
@@ -5,7 +5,7 @@ import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
 import { Euler } from "../../../lib/math/Euler";
 import { Matrix4 } from "../../../lib/math/Matrix4";
 import {
-  makeMatrix4Perspective,
+  makeMatrix4PerspectiveFov,
   makeMatrix4RotationFromEuler,
   makeMatrix4Translation,
 } from "../../../lib/math/Matrix4.Functions";
@@ -40,8 +40,9 @@ async function init(): Promise<null> {
   const uniforms = {
     localToWorld: new Matrix4(),
     worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
-    viewToScreen: makeMatrix4Perspective(-0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
-    roughnessFactor: 0,
+    viewToScreen: makeMatrix4PerspectiveFov(60, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
+    perceptualRoughness: 0,
+    mipCount: cubeTexture.mipCount,
     cubeMap: makeTexImage2DFromCubeTexture(context, cubeTexture),
   };
   const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
@@ -55,7 +56,7 @@ async function init(): Promise<null> {
       new Euler(now * 0.0001, now * 0.00033, now * 0.000077),
       uniforms.localToWorld,
     );
-    uniforms.roughnessFactor = Math.sin(now * 0.0001) * 0.5 + 0.5;
+    uniforms.perceptualRoughness = Math.sin(now * 0.001) * 0.5 + 0.5;
     canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
   }
 

diff --git a/src/lib/renderers/webgl/shaders/Shader.ts b/src/lib/renderers/webgl/shaders/Shader.ts
@@ -32,12 +32,19 @@ export class Shader implements IDisposable {
       this.glShader = glShader;
     }
 
+    const prefix = [];
     if (glslVersion === 300) {
-      sourceCode = "#version 300 es\n" + sourceCode;
+      prefix.push("#version 300 es");
+    }
+    if (shaderType === ShaderType.Fragment) {
+      prefix.push("#extension GL_EXT_shader_texture_lod : enable");
+      prefix.push("#extension GL_OES_standard_derivatives : enable");
     }
 
+    const combinedSourceCode = prefix.join("\n") + "\n" + sourceCode;
+    console.log("combinedSourceCode:\n", combinedSourceCode);
     // Set the shader source code.
-    gl.shaderSource(this.glShader, sourceCode);
+    gl.shaderSource(this.glShader, combinedSourceCode);
 
     // Compile the shader
     gl.compileShader(this.glShader);

diff --git a/src/lib/textures/VirtualTexture.ts b/src/lib/textures/VirtualTexture.ts
@@ -21,6 +21,13 @@ export class VirtualTexture {
     public anisotropicLevels = 1,
   ) {}
 
+  get mipCount(): number {
+    if (!this.generateMipmaps) {
+      return 1;
+    }
+    return Math.floor(Math.log2(Math.max(this.size.width, this.size.height)));
+  }
+
   dirty(): void {
     this.version++;
   }