feat: upgrade shaders to es 300 (WebGL2 only)

bhouston · Jun 22, 2020 · 62e7da7 · 62e7da7
1 parent d13d64e
commit 62e7da7
Show file tree

Hide file tree

Showing 20 changed files with 179 additions and 42 deletions.
diff --git a/examples/gettingstarted/7_metallicRoughness/index.html b/examples/gettingstarted/7_metallicRoughness/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Threeify - Getting Started - 7 Metallic Roughness</title>
+    <script type="module" src="/dist/examples/gettingstarted/7_metallicRoughness/index.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/examples/gettingstarted/1_triangle/fragment.glsl b/src/examples/gettingstarted/1_triangle/fragment.glsl
@@ -1,9 +1,11 @@
 precision highp float;
 
-varying vec3 v_color;
+in vec3 v_color;
+
+out vec4 fragColor;
 
 void main() {
 
-  gl_FragColor = vec4(v_color, 1.0);
+  fragColor = vec4(v_color, 1.0);
 
 }
diff --git a/src/examples/gettingstarted/1_triangle/index.ts b/src/examples/gettingstarted/1_triangle/index.ts
@@ -11,7 +11,7 @@ const geometry = new Geometry();
 geometry.attributes["position"] = makeFloat32Attribute([0, 0.5, 0.5, -0.5, -0.5, -0.5], 2);
 geometry.attributes["color"] = makeUint8Attribute([255, 0, 0, 0, 255, 0, 0, 0, 255], 3, true);
 
-const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
+const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode, 300);
 
 const context = new RenderingContext();
 const canvasFramebuffer = context.canvasFramebuffer;

diff --git a/src/examples/gettingstarted/1_triangle/vertex.glsl b/src/examples/gettingstarted/1_triangle/vertex.glsl
@@ -1,7 +1,7 @@
-attribute vec2 position;
-attribute vec3 color;
+in vec2 position;
+in vec3 color;
 
-varying vec3 v_color;
+out vec3 v_color;
 
 void main() {
 

diff --git a/src/examples/gettingstarted/2_animatedUniforms/fragment.glsl b/src/examples/gettingstarted/2_animatedUniforms/fragment.glsl
@@ -2,8 +2,10 @@ precision highp float;
 
 uniform vec3 color;
 
+out vec4 fragColor;
+
 void main() {
 
-  gl_FragColor = vec4(color, 1.0);
+  fragColor = vec4(color, 1.0);
 
 }
diff --git a/src/examples/gettingstarted/2_animatedUniforms/vertex.glsl b/src/examples/gettingstarted/2_animatedUniforms/vertex.glsl
@@ -1,4 +1,4 @@
-attribute vec2 position;
+in vec2 position;
 
 uniform float scale;
 

diff --git a/src/examples/gettingstarted/3_texturedPlane/fragment.glsl b/src/examples/gettingstarted/3_texturedPlane/fragment.glsl
@@ -1,11 +1,13 @@
 precision highp float;
 
+in vec2 v_texCoord;
+
 uniform sampler2D map;
 
-varying vec2 v_texCoord;
+out vec4 fragColor;
 
 void main() {
 
-  gl_FragColor = texture2D(map, v_texCoord);
+  fragColor = texture(map, v_texCoord);
 
 }
diff --git a/src/examples/gettingstarted/3_texturedPlane/vertex.glsl b/src/examples/gettingstarted/3_texturedPlane/vertex.glsl
@@ -1,7 +1,7 @@
-attribute vec3 position;
-attribute vec2 uv;
+in vec3 position;
+in vec2 uv;
 
-varying vec2 v_texCoord;
+out vec2 v_texCoord;
 
 void main() {
 

diff --git a/src/examples/gettingstarted/4_lambertCube/fragment.glsl b/src/examples/gettingstarted/4_lambertCube/fragment.glsl
@@ -1,18 +1,20 @@
 precision highp float;
 
+in vec3 v_viewPosition;
+in vec3 v_viewNormal;
+in vec2 v_uv;
+
 uniform sampler2D map;
 uniform vec3 viewLightPosition;
 
-varying vec3 v_viewPosition;
-varying vec3 v_viewNormal;
-varying vec2 v_uv;
+out vec4 fragColor;
 
 void main() {
 
-  vec3 albedo = texture2D(map, v_uv).xyz;
+  vec3 albedo = texture(map, v_uv).xyz;
   vec3 directionToLight = normalize( viewLightPosition - v_viewPosition );
   float lambertianIntensity = dot( directionToLight, v_viewNormal );
 
-  gl_FragColor = vec4( albedo * lambertianIntensity, 1.0 );
+  fragColor = vec4( albedo * lambertianIntensity, 1.0 );
 
 }
diff --git a/src/examples/gettingstarted/4_lambertCube/vertex.glsl b/src/examples/gettingstarted/4_lambertCube/vertex.glsl
@@ -1,15 +1,15 @@
-attribute vec3 position;
-attribute vec3 normal;
-attribute vec2 uv;
-
-varying vec3 v_viewPosition;
-varying vec3 v_viewNormal;
-varying vec2 v_uv;
+in vec3 position;
+in vec3 normal;
+in vec2 uv;
 
 uniform mat4 localToWorld;
 uniform mat4 worldToView;
 uniform mat4 viewToScreen;
 
+out vec3 v_viewPosition;
+out vec3 v_viewNormal;
+out vec2 v_uv;
+
 void main() {
 
   v_viewNormal = normalize( ( worldToView * localToWorld * vec4( normal, 0.0 ) ).xyz );

diff --git a/src/examples/gettingstarted/5_reflectivePolyhedral/fragment.glsl b/src/examples/gettingstarted/5_reflectivePolyhedral/fragment.glsl
@@ -1,13 +1,15 @@
 precision highp float;
 
+in vec3 v_viewPosition;
+in vec3 v_viewNormal;
+
 uniform samplerCube cubeMap;
 
-varying vec3 v_viewPosition;
-varying vec3 v_viewNormal;
+out vec4 fragColor;
 
 void main() {
 
   vec3 reflectDir = reflect( normalize( v_viewPosition ),normalize(v_viewNormal) );
-  gl_FragColor = textureCube(cubeMap, reflectDir);
+  fragColor = texture(cubeMap, reflectDir);
 
 }
diff --git a/src/examples/gettingstarted/5_reflectivePolyhedral/vertex.glsl b/src/examples/gettingstarted/5_reflectivePolyhedral/vertex.glsl
@@ -1,13 +1,13 @@
-attribute vec3 position;
-attribute vec3 normal;
-
-varying vec3 v_viewPosition;
-varying vec3 v_viewNormal;
+in vec3 position;
+in vec3 normal;
 
 uniform mat4 localToWorld;
 uniform mat4 worldToView;
 uniform mat4 viewToScreen;
 
+out vec3 v_viewPosition;
+out vec3 v_viewNormal;
+
 void main() {
 
   v_viewNormal = normalize( ( worldToView * localToWorld * vec4( normal, 0.0 ) ).xyz );

diff --git a/src/examples/gettingstarted/6_interleavedBuffers/fragment.glsl b/src/examples/gettingstarted/6_interleavedBuffers/fragment.glsl
@@ -1,9 +1,11 @@
 precision highp float;
 
-varying vec3 v_color;
+in vec3 v_color;
+
+out vec4 fragColor;
 
 void main() {
 
-  gl_FragColor = vec4(v_color, 1.0);
+  fragColor = vec4(v_color, 1.0);
 
 }
diff --git a/src/examples/gettingstarted/6_interleavedBuffers/vertex.glsl b/src/examples/gettingstarted/6_interleavedBuffers/vertex.glsl
@@ -1,7 +1,7 @@
-attribute vec2 position;
-attribute vec3 color;
+in vec2 position;
+in vec3 color;
 
-varying vec3 v_color;
+out vec3 v_color;
 
 void main() {
 

diff --git a/src/examples/gettingstarted/7_metallicRoughness/fragment.glsl b/src/examples/gettingstarted/7_metallicRoughness/fragment.glsl
@@ -0,0 +1,15 @@
+precision highp float;
+
+in vec3 v_viewPosition;
+in vec3 v_viewNormal;
+
+uniform samplerCube cubeMap;
+
+out vec4 fragColor;
+
+void main() {
+
+  vec3 reflectDir = reflect( normalize( v_viewPosition ),normalize(v_viewNormal) );
+  fragColor = texture(cubeMap, reflectDir);
+
+}
diff --git a/src/examples/gettingstarted/7_metallicRoughness/index.ts b/src/examples/gettingstarted/7_metallicRoughness/index.ts
@@ -0,0 +1,66 @@
+import { convertToInterleavedGeometry } from "../../../lib/geometry/Geometry.Functions";
+import { icosahedron } from "../../../lib/geometry/primitives/Polyhedrons";
+import { fetchImage } from "../../../lib/io/loaders/Image";
+import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
+import { Euler } from "../../../lib/math/Euler";
+import { Matrix4 } from "../../../lib/math/Matrix4";
+import {
+  makeMatrix4Perspective,
+  makeMatrix4RotationFromEuler,
+  makeMatrix4Translation,
+} from "../../../lib/math/Matrix4.Functions";
+import { Vector3 } from "../../../lib/math/Vector3";
+import { BufferGeometry } from "../../../lib/renderers/webgl2/buffers/BufferGeometry";
+import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl2/DepthTestState";
+import { Program } from "../../../lib/renderers/webgl2/programs/Program";
+import { RenderingContext } from "../../../lib/renderers/webgl2/RenderingContext";
+import { TexImage2D } from "../../../lib/renderers/webgl2/textures/TexImage2D";
+import { CubeTexture } from "../../../lib/textures/CubeTexture";
+import fragmentSourceCode from "./fragment.glsl";
+import vertexSourceCode from "./vertex.glsl";
+
+async function init(): Promise<null> {
+  const geometry = convertToInterleavedGeometry(icosahedron(0.75, 3));
+  const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
+  const cubeTexture = new CubeTexture([
+    await fetchImage("/assets/textures/cube/pisa/px.png"),
+    await fetchImage("/assets/textures/cube/pisa/nx.png"),
+    await fetchImage("/assets/textures/cube/pisa/py.png"),
+    await fetchImage("/assets/textures/cube/pisa/ny.png"),
+    await fetchImage("/assets/textures/cube/pisa/pz.png"),
+    await fetchImage("/assets/textures/cube/pisa/nz.png"),
+  ]);
+
+  const context = new RenderingContext();
+  const canvasFramebuffer = context.canvasFramebuffer;
+  document.body.appendChild(canvasFramebuffer.canvas);
+
+  const program = new Program(context, material);
+  const uniforms = {
+    localToWorld: new Matrix4(),
+    worldToView: makeMatrix4Translation(new Matrix4(), new Vector3(0, 0, -1)),
+    viewToScreen: makeMatrix4Perspective(new Matrix4(), -0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
+    roughnessFactor: 0,
+    cubeMap: new TexImage2D(context, cubeTexture),
+  };
+  const bufferGeometry = new BufferGeometry(context, geometry);
+  const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
+
+  function animate(): void {
+    requestAnimationFrame(animate);
+
+    const now = Date.now();
+    uniforms.localToWorld = makeMatrix4RotationFromEuler(
+      uniforms.localToWorld,
+      new Euler(now * 0.0001, now * 0.00033, now * 0.000077),
+    );
+    uniforms.roughnessFactor = Math.sin(now * 0.0001) * 0.5 + 0.5;
+    canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
+  }
+
+  animate();
+
+  return null;
+}
+
+init();
diff --git a/src/examples/gettingstarted/7_metallicRoughness/vertex.glsl b/src/examples/gettingstarted/7_metallicRoughness/vertex.glsl
@@ -0,0 +1,17 @@
+in vec3 position;
+in vec3 normal;
+
+uniform mat4 localToWorld;
+uniform mat4 worldToView;
+uniform mat4 viewToScreen;
+
+out vec3 v_viewPosition;
+out vec3 v_viewNormal;
+
+void main() {
+
+  v_viewNormal = normalize( ( worldToView * localToWorld * vec4( normal, 0.0 ) ).xyz );
+  v_viewPosition = ( worldToView * localToWorld * vec4( position, 1.0 ) ).xyz;
+  gl_Position = viewToScreen * vec4( v_viewPosition, 1.0 );
+
+}
diff --git a/src/lib/materials/ShaderMaterial.ts b/src/lib/materials/ShaderMaterial.ts
@@ -15,7 +15,7 @@ export class ShaderMaterial implements IIdentifiable, IVersionable, IDisposable,
   disposed = false;
   name = "";
 
-  constructor(public vertexShaderCode: string, public fragmentShaderCode: string) {}
+  constructor(public vertexShaderCode: string, public fragmentShaderCode: string, public glslVersion = 300) {}
 
   dirty(): void {
     this.version++;

diff --git a/src/lib/renderers/webgl2/programs/Program.ts b/src/lib/renderers/webgl2/programs/Program.ts
@@ -26,8 +26,18 @@ export class Program implements IDisposable {
   attributes: { [key: string]: ProgramAttribute | undefined } = {};
 
   constructor(public context: RenderingContext, shaderMaterial: ShaderMaterial) {
-    this.vertexShader = new Shader(this.context, shaderMaterial.vertexShaderCode, ShaderType.Vertex);
-    this.fragmentShader = new Shader(this.context, shaderMaterial.fragmentShaderCode, ShaderType.Fragment);
+    this.vertexShader = new Shader(
+      this.context,
+      shaderMaterial.vertexShaderCode,
+      ShaderType.Vertex,
+      shaderMaterial.glslVersion,
+    );
+    this.fragmentShader = new Shader(
+      this.context,
+      shaderMaterial.fragmentShaderCode,
+      ShaderType.Fragment,
+      shaderMaterial.glslVersion,
+    );
 
     const gl = this.context.gl;
 

diff --git a/src/lib/renderers/webgl2/shaders/Shader.ts b/src/lib/renderers/webgl2/shaders/Shader.ts
@@ -13,7 +13,12 @@ export class Shader implements IDisposable {
   disposed = false;
   glShader: WebGLShader;
 
-  constructor(public context: RenderingContext, public sourceCode: string, public shaderType: ShaderType) {
+  constructor(
+    public context: RenderingContext,
+    public sourceCode: string,
+    public shaderType: ShaderType,
+    public glslVersion = 300,
+  ) {
     const gl = this.context.gl;
 
     // Create the shader object
@@ -26,6 +31,10 @@ export class Shader implements IDisposable {
       this.glShader = glShader;
     }
 
+    if (glslVersion === 300) {
+      sourceCode = "#version 300 es\n" + sourceCode;
+    }
+
     // Set the shader source code.
     gl.shaderSource(this.glShader, sourceCode);