Initial support for creating WebGL 2 contexts.

This support is very incomplete and only works for a bare minimum of
functionality. It hasn't been tested against the WebGL 2 CTS. To create
a WebGL 2 context, use the "createWebGL2Context" attribute in the
creation options struct.

Implementation notes:
 - in native code, we use a single native class for both context types
 - we assign enum constants dynamically, so we replace gl.ENUM with
   this.ENUM in the context helper functions
 - only adds VAOs from the set of new WebGL 2 object types

This contribution is funded by https://higharc.com/

Author: null77

index.d.ts

@@ -26,7 +26,19 @@ declare namespace createContext {
 declare function createContext(
   width: number,
   height: number,
-  options?: WebGLContextAttributes,
+  options?: WebGLContextAttributes & { createWebGL2Context?: false },
 ): WebGLRenderingContext & createContext.StackGLExtension;
 
+declare function createContext(
+  width: number,
+  height: number,
+  options: WebGLContextAttributes & { createWebGL2Context: true }
+): WebGL2RenderingContext & createContext.StackGLExtension;
+
+declare function createContext(
+  width: number,
+  height: number,
+  options?: WebGLContextAttributes & { createWebGL2Context?: boolean }
+): (WebGLRenderingContext | WebGL2RenderingContext) & createContext.StackGLExtension;
+
 export = createContext;

index.js

@@ -4,3 +4,4 @@ if (typeof WebGLRenderingContext !== 'undefined') {
   module.exports = require('./src/javascript/node-index')
 }
 module.exports.WebGLRenderingContext = require('./src/javascript/webgl-rendering-context').WebGLRenderingContext
+module.exports.WebGL2RenderingContext = require('./src/javascript/webgl-rendering-context').WebGL2RenderingContext

src/javascript/extensions/ext-color-buffer-float.js

@@ -0,0 +1,14 @@
+class EXTColorBufferFloat {}
+
+function getEXTColorBufferFloat (context) {
+  let result = null
+  const exts = context.getSupportedExtensions()
+
+  if (exts && exts.indexOf('EXT_color_buffer_float') >= 0) {
+    result = new EXTColorBufferFloat()
+  }
+
+  return result
+}
+
+module.exports = { getEXTColorBufferFloat, EXTColorBufferFloat }

src/javascript/node-index.js

@@ -1,6 +1,6 @@
 const bits = require('bit-twiddle')
 const { WebGLContextAttributes } = require('./webgl-context-attributes')
-const { WebGLRenderingContext, wrapContext } = require('./webgl-rendering-context')
+const { WebGLRenderingContext, WebGL2RenderingContext, wrapContext } = require('./webgl-rendering-context')
 const { WebGLTextureUnit } = require('./webgl-texture-unit')
 const { WebGLVertexArrayObjectState, WebGLVertexArrayGlobalState } = require('./webgl-vertex-attribute')
 
@@ -28,15 +28,17 @@ function createContext (width, height, options) {
     flag(options, 'premultipliedAlpha', true),
     flag(options, 'preserveDrawingBuffer', false),
     flag(options, 'preferLowPowerToHighPerformance', false),
-    flag(options, 'failIfMajorPerformanceCaveat', false))
+    flag(options, 'failIfMajorPerformanceCaveat', false),
+    flag(options, 'createWebGL2Context', false))
 
   // Can only use premultipliedAlpha if alpha is set
   contextAttributes.premultipliedAlpha =
     contextAttributes.premultipliedAlpha && contextAttributes.alpha
 
+  const WebGLContext = contextAttributes.createWebGL2Context ? WebGL2RenderingContext : WebGLRenderingContext
   let ctx
   try {
-    ctx = new WebGLRenderingContext(
+    ctx = new WebGLContext(
       1,
       1,
       contextAttributes.alpha,
@@ -46,7 +48,8 @@ function createContext (width, height, options) {
       contextAttributes.premultipliedAlpha,
       contextAttributes.preserveDrawingBuffer,
       contextAttributes.preferLowPowerToHighPerformance,
-      contextAttributes.failIfMajorPerformanceCaveat)
+      contextAttributes.failIfMajorPerformanceCaveat,
+      contextAttributes.createWebGL2Context)
   } catch (e) {}
   if (!ctx) {
     return null
@@ -73,11 +76,16 @@ function createContext (width, height, options) {
   ctx._checkStencil = false
   ctx._stencilState = true
 
+  if (contextAttributes.createWebGL2Context) {
+    ctx._vaos = {}
+    ctx._activeVertexArrayObject = null
+  }
+
   // Initialize texture units
   const numTextures = ctx.getParameter(ctx.MAX_COMBINED_TEXTURE_IMAGE_UNITS)
   ctx._textureUnits = new Array(numTextures)
   for (let i = 0; i < numTextures; ++i) {
-    ctx._textureUnits[i] = new WebGLTextureUnit(i)
+    ctx._textureUnits[i] = new WebGLTextureUnit(ctx, i)
   }
   ctx._activeTextureUnit = 0
   ctx.activeTexture(ctx.TEXTURE0)

src/javascript/webgl-context-attributes.js

@@ -7,7 +7,8 @@ class WebGLContextAttributes {
     premultipliedAlpha,
     preserveDrawingBuffer,
     preferLowPowerToHighPerformance,
-    failIfMajorPerformanceCaveat) {
+    failIfMajorPerformanceCaveat,
+    createWebGL2Context) {
     this.alpha = alpha
     this.depth = depth
     this.stencil = stencil
@@ -16,6 +17,7 @@ class WebGLContextAttributes {
     this.preserveDrawingBuffer = preserveDrawingBuffer
     this.preferLowPowerToHighPerformance = preferLowPowerToHighPerformance
     this.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat
+    this.createWebGL2Context = createWebGL2Context
   }
 }