feat: Migrate to WebGL2

packages/engine/src/index.ts

@@ -4,9 +4,9 @@ export function render(
 ) {
   const canvas = document.createElement('canvas');
   container.appendChild(canvas);
-  const gl = canvas.getContext('webgl');
+  const gl = canvas.getContext('webgl2');
   if (gl === null) {
-    throw new Error('Error creating WebGL context.');
+    throw new Error('Error creating WebGL2 context.');
   }
   const callback = app(gl);
   const frameRequestCallback: FrameRequestCallback = (time) => {

packages/examples/src/fs.glsl

@@ -1,11 +1,12 @@
+#version 300 es
 
 precision mediump float;
 
-varying vec4 v_position;
-varying vec2 v_texCoord;
-varying vec3 v_normal;
-varying vec3 v_surfaceToLight;
-varying vec3 v_surfaceToView;
+in vec4 v_position;
+in vec2 v_texCoord;
+in vec3 v_normal;
+in vec3 v_surfaceToLight;
+in vec3 v_surfaceToView;
 
 uniform vec4 u_lightColor;
 uniform vec4 u_ambient;
@@ -14,25 +15,19 @@ uniform vec4 u_specular;
 uniform float u_shininess;
 uniform float u_specularFactor;
 
-vec4 lit(float l ,float h, float m) {
-  return vec4(1.0,
-              max(l, 0.0),
-              (l > 0.0) ? pow(max(0.0, h), m) : 0.0,
-              1.0);
+out vec4 outColor;
+
+vec4 lit(float l, float h, float m) {
+  return vec4(1.0f, max(l, 0.0f), (l > 0.0f) ? pow(max(0.0f, h), m) : 0.0f, 1.0f);
 }
 
 void main() {
-  vec4 diffuseColor = texture2D(u_diffuse, v_texCoord);
+  vec4 diffuseColor = texture(u_diffuse, v_texCoord);
   vec3 a_normal = normalize(v_normal);
   vec3 surfaceToLight = normalize(v_surfaceToLight);
   vec3 surfaceToView = normalize(v_surfaceToView);
   vec3 halfVector = normalize(surfaceToLight + surfaceToView);
-  vec4 litR = lit(dot(a_normal, surfaceToLight),
-                    dot(a_normal, halfVector), u_shininess);
-  vec4 outColor = vec4((
-  u_lightColor * (diffuseColor * litR.y + diffuseColor * u_ambient +
-                u_specular * litR.z * u_specularFactor)).rgb,
-      diffuseColor.a);
-  gl_FragColor = outColor;
+  vec4 litR = lit(dot(a_normal, surfaceToLight), dot(a_normal, halfVector), u_shininess);
+  outColor = vec4((u_lightColor * (diffuseColor * litR.y + diffuseColor * u_ambient +
+    u_specular * litR.z * u_specularFactor)).rgb, diffuseColor.a);
 }
-

packages/examples/src/twgl-cube.ts

@@ -26,8 +26,8 @@ export default function (gl: WebGLRenderingContext) {
       14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23,
     ],
   };
-  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
-  const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
+  const programInfo = twgl.createProgramInfo(gl, [vs, fs], ["position", "normal", "texcoord"]);
+  const vertexArrayInfo = twgl.createVertexArrayInfo(gl, programInfo, twgl.createBufferInfoFromArrays(gl, arrays));
   const tex = twgl.createTexture(gl, {
     min: gl.NEAREST,
     mag: gl.NEAREST,
@@ -83,8 +83,8 @@ export default function (gl: WebGLRenderingContext) {
     });
 
     gl.useProgram(programInfo.program);
-    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+    twgl.setBuffersAndAttributes(gl, programInfo, vertexArrayInfo);
     twgl.setUniforms(programInfo, uniforms);
-    gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
+    twgl.drawBufferInfo(gl, vertexArrayInfo);
   };
 }

packages/examples/src/vs.glsl

@@ -1,19 +1,20 @@
+#version 300 es
 
 uniform mat4 u_worldViewProjection;
 uniform vec3 u_lightWorldPos;
 uniform mat4 u_world;
 uniform mat4 u_viewInverse;
 uniform mat4 u_worldInverseTranspose;
 
-attribute vec4 position;
-attribute vec3 normal;
-attribute vec2 texcoord;
+in vec4 position;
+in vec3 normal;
+in vec2 texcoord;
 
-varying vec4 v_position;
-varying vec2 v_texCoord;
-varying vec3 v_normal;
-varying vec3 v_surfaceToLight;
-varying vec3 v_surfaceToView;
+out vec4 v_position;
+out vec2 v_texCoord;
+out vec3 v_normal;
+out vec3 v_surfaceToLight;
+out vec3 v_surfaceToView;
 
 void main() {
   v_texCoord = texcoord;
@@ -23,4 +24,3 @@ void main() {
   v_surfaceToView = (u_viewInverse[3] - (u_world * position)).xyz;
   gl_Position = v_position;
 }
-