Added partial support for WebGL 2.

Author: shin1m

src/Blazor.Extensions.Canvas.JS/package-lock.json

@@ -11,11 +11,11 @@
     "lodash": "^4.17.20"
   },
   "devDependencies": {
-    "@types/emscripten": "0.0.31",
-    "ts-loader": "^4.4.2",
-    "typescript": "^2.9.2",
-    "webpack": "^4.16.3",
-    "webpack-cli": "^3.1.0",
-    "uuid": "8.3.1"
+    "@types/emscripten": "^1.39.6",
+    "ts-loader": "^9.2.7",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "uuid": "8.3.2"
   }
 }

src/Blazor.Extensions.Canvas.JS/package.json

@@ -10,7 +10,7 @@ export class ContextManager {
   private readonly patterns = new Map<string, any>();
 
   private readonly webGLTypes = [
-    WebGLBuffer, WebGLShader, WebGLProgram, WebGLFramebuffer, WebGLRenderbuffer, WebGLTexture, WebGLUniformLocation
+    WebGLBuffer, WebGLShader, WebGLProgram, WebGLFramebuffer, WebGLRenderbuffer, WebGLTexture, WebGLUniformLocation, WebGLVertexArrayObject
   ];
 
   public constructor(contextName: string) {
@@ -20,6 +20,9 @@ export class ContextManager {
     else if (contextName === "webgl" || contextName === "experimental-webgl") {
       this.prototypes = WebGLRenderingContext.prototype;
       this.webGLContext = true;
+    } else if (contextName === "webgl2" || contextName === "experimental-webgl2") {
+      this.prototypes = WebGL2RenderingContext.prototype;
+      this.webGLContext = true;
     } else
       throw new Error(`Invalid context name: ${contextName}`);
   }
@@ -109,7 +112,7 @@ export class ContextManager {
     if (object.hasOwnProperty("webGLType") && object.hasOwnProperty("id")) {
       return (this.webGLObject[object["id"]]);
     } else if (Array.isArray(object) && !method.endsWith("v")) {
-      return Int8Array.of(...(object as number[]));
+      return Int8Array.from(object);
     } else if (typeof(object) === "string" && (method === "bufferData" || method === "bufferSubData")) {
       let binStr = window.atob(object);
       let length = binStr.length;

src/Blazor.Extensions.Canvas.JS/src/CanvasContextManager.ts

@@ -5,7 +5,8 @@ namespace Canvas {
   // define what this extension adds to the window object inside BlazorExtensions
   const extensionObject = {
     Canvas2d: new ContextManager("2d"),
-    WebGL: new ContextManager("webgl")
+    WebGL: new ContextManager("webgl"),
+    WebGL2: new ContextManager("webgl2")
   };
 
   export function initialize(): void {

src/Blazor.Extensions.Canvas.JS/src/InitializeCanvas.ts

@@ -35,5 +35,10 @@ public static async Task<WebGLContext> CreateWebGLAsync(this BECanvasComponent c
         {
             return await new WebGLContext(canvas, attributes).InitializeAsync().ConfigureAwait(false) as WebGLContext;
         }
+
+        public static async Task<WebGL2Context> CreateWebGL2Async(this BECanvasComponent canvas, WebGLContextAttributes attributes = null)
+        {
+            return await new WebGL2Context(canvas, attributes).InitializeAsync().ConfigureAwait(false) as WebGL2Context;
+        }
     }
 }

src/Blazor.Extensions.Canvas/CanvasContextExtensions.cs

@@ -0,0 +1,42 @@
+using System.Threading.Tasks;
+
+namespace Blazor.Extensions.Canvas.WebGL
+{
+    public class WebGL2Context : WebGLContext
+    {
+        #region Constants
+        private const string CONTEXT_NAME = "WebGL2";
+        private const string BIND_BUFFER_BASE = "bindBufferBase";
+        private const string BIND_VERTEX_ARRAY = "bindVertexArray";
+        private const string BLIT_FRAMEBUFFER = "blitFramebuffer";
+        private const string CREATE_VERTEX_ARRAY = "createVertexArray";
+        private const string DELETE_VERTEX_ARRAY = "deleteVertexArray";
+        private const string DRAW_ARRAYS_INSTANCED = "drawArraysInstanced";
+        private const string DRAW_ELEMENTS_INSTANCED = "drawElementsInstanced";
+        private const string GET_UNIFORM_BLOCK_INDEX = "getUniformBlockIndex";
+        private const string TEX_STORAGE_2D = "texStorage2D";
+        private const string UNIFORM_BLOCK_BINDING = "uniformBlockBinding";
+        private const string VERTEX_ATTRIB_DIVISOR = "vertexAttribDivisor";
+        private const string VERTEX_ATTRIB_IPOINTER = "vertexAttribIPointer";
+        #endregion
+
+        public WebGL2Context(BECanvasComponent reference, WebGLContextAttributes attributes = null) : base(reference, attributes, CONTEXT_NAME)
+        {
+        }
+
+        #region Methods
+        public async Task BindBufferBaseAsync(BufferType target, uint index, WebGLBuffer buffer) => await this.BatchCallAsync(BIND_BUFFER_BASE, isMethodCall: true, target, index, buffer);
+        public async Task BindVertexArrayAsync(WebGLVertexArrayObject vertexArray) => await this.BatchCallAsync(BIND_VERTEX_ARRAY, isMethodCall: true, vertexArray);
+        public async Task BlitFramebufferAsync(int srcX0, int srcY0, int srcX1, int srcY1, int dstX0, int dstY0, int dstX1, int dstY1, BufferBits mask, BlitFilter filter) => await this.BatchCallAsync(BLIT_FRAMEBUFFER, isMethodCall: true, srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter);
+        public async Task<WebGLVertexArrayObject> CreateVertexArrayAsync() => await this.CallMethodAsync<WebGLVertexArrayObject>(CREATE_VERTEX_ARRAY);
+        public async Task DeleteVertexArrayAsync(WebGLVertexArrayObject vertexArray) => await this.BatchCallAsync(DELETE_VERTEX_ARRAY, isMethodCall: true, vertexArray);
+        public async Task DrawArraysInstancedAsync(Primitive mode, int first, int count, int instanceCount) => await this.BatchCallAsync(DRAW_ARRAYS_INSTANCED, isMethodCall: true, mode, first, count, instanceCount);
+        public async Task DrawElementsInstancedAsync(Primitive mode, int count, DataType type, long offset, int instanceCount) => await this.BatchCallAsync(DRAW_ELEMENTS_INSTANCED, isMethodCall: true, mode, count, type, offset, instanceCount);
+        public async Task<uint> GetUniformBlockIndexAsync(WebGLProgram program, string uniformBlockName) => await this.CallMethodAsync<uint>(GET_UNIFORM_BLOCK_INDEX, program, uniformBlockName);
+        public async Task TexStorage2DAsync(Texture2DType target, int levels, PixelFormat internalformat, int width, int height) => await this.BatchCallAsync(TEX_STORAGE_2D, isMethodCall: true, target, levels, internalformat, width, height);
+        public async Task UniformBlockBindingAsync(WebGLProgram program, uint uniformBlockIndex, uint uniformBlockBinding) => await this.BatchCallAsync(UNIFORM_BLOCK_BINDING, isMethodCall: true, program, uniformBlockIndex, uniformBlockBinding);
+        public async Task VertexAttribDivisorAsync(uint index, uint divisor) => await this.BatchCallAsync(VERTEX_ATTRIB_DIVISOR, isMethodCall: true, index, divisor);
+        public async Task VertexAttribIPointerAsync(uint index, int size, DataType type, int stride, long offset) => await this.BatchCallAsync(VERTEX_ATTRIB_IPOINTER, isMethodCall: true, index, size, type, stride, offset);
+        #endregion
+    }
+}

src/Blazor.Extensions.Canvas/WebGL/WebGL2Context.cs

@@ -125,7 +125,7 @@ public class WebGLContext : RenderingContext
         public int DrawingBufferHeight { get; private set; }
         #endregion
 
-        public WebGLContext(BECanvasComponent reference, WebGLContextAttributes attributes = null) : base(reference, CONTEXT_NAME, attributes)
+        public WebGLContext(BECanvasComponent reference, WebGLContextAttributes attributes = null, string contextName = CONTEXT_NAME) : base(reference, contextName, attributes)
         {
         }
 
@@ -289,12 +289,12 @@ protected override async Task ExtendedInitializeAsync()
         public async Task BufferDataAsync(BufferType target, int size, BufferUsageHint usage) => await this.BatchCallAsync(BUFFER_DATA, isMethodCall: true, target, size, usage);
 
         [Obsolete("Use the async version instead, which is already called internally.")]
-        public void BufferData<T>(BufferType target, T[] data, BufferUsageHint usage) => this.CallMethod<object>(BUFFER_DATA, target, this.ConvertToByteArray(data), usage);
-        public async Task BufferDataAsync<T>(BufferType target, T[] data, BufferUsageHint usage) => await this.BatchCallAsync(BUFFER_DATA, isMethodCall: true, target, this.ConvertToByteArray(data), usage);
+        public void BufferData<T>(BufferType target, T[] data, BufferUsageHint usage) where T : unmanaged => this.CallMethod<object>(BUFFER_DATA, target, this.ConvertToByteArray(data), usage);
+        public async Task BufferDataAsync<T>(BufferType target, T[] data, BufferUsageHint usage) where T : unmanaged => await this.BatchCallAsync(BUFFER_DATA, isMethodCall: true, target, this.ConvertToByteArray(data), usage);
 
         [Obsolete("Use the async version instead, which is already called internally.")]
-        public void BufferSubData<T>(BufferType target, uint offset, T[] data) => this.CallMethod<object>(BUFFER_SUB_DATA, target, offset, this.ConvertToByteArray(data));
-        public async Task BufferSubDataAsync<T>(BufferType target, uint offset, T[] data) => await this.BatchCallAsync(BUFFER_SUB_DATA, isMethodCall: true, target, offset, this.ConvertToByteArray(data));
+        public void BufferSubData<T>(BufferType target, uint offset, T[] data) where T : unmanaged => this.CallMethod<object>(BUFFER_SUB_DATA, target, offset, this.ConvertToByteArray(data));
+        public async Task BufferSubDataAsync<T>(BufferType target, uint offset, T[] data) where T : unmanaged => await this.BatchCallAsync(BUFFER_SUB_DATA, isMethodCall: true, target, offset, this.ConvertToByteArray(data));
 
         [Obsolete("Use the async version instead, which is already called internally.")]
         public WebGLBuffer CreateBuffer() => this.CallMethod<WebGLBuffer>(CREATE_BUFFER);
@@ -410,7 +410,7 @@ public void TexImage2D<T>(Texture2DType target, int level, PixelFormat internalF
             => this.CallMethod<object>(TEX_IMAGE_2D, target, level, internalFormat, width, height, format, type, pixels);
         public async Task TexImage2DAsync<T>(Texture2DType target, int level, PixelFormat internalFormat, int width, int height, PixelFormat format, PixelType type, T[] pixels)
             where T : struct
-            => await this.BatchCallAsync(TEX_IMAGE_2D, isMethodCall: true, target, level, internalFormat, width, height, format, type, pixels);
+            => await this.BatchCallAsync(TEX_IMAGE_2D, isMethodCall: true, target, level, internalFormat, width, height, 0, format, type, pixels);
 
         [Obsolete("Use the async version instead, which is already called internally.")]
         public void TexSubImage2D<T>(Texture2DType target, int level, int xoffset, int yoffset, int width, int height, PixelFormat format, PixelType type, T[] pixels)
@@ -730,10 +730,18 @@ public async Task VertexAttribAsync(uint index, params float[] value)
         public void Flush() => this.CallMethod<object>(FLUSH);
         public async Task FlushAsync() => await this.BatchCallAsync(FLUSH, isMethodCall: true);
 
-        private byte[] ConvertToByteArray<T>(T[] arr)
+        private byte[] ConvertToByteArray<T>(T[] arr) where T : unmanaged
         {
             byte[] byteArr = new byte[arr.Length * Marshal.SizeOf<T>()];
-            Buffer.BlockCopy(arr, 0, byteArr, 0, byteArr.Length);
+            var handle = GCHandle.Alloc(arr, GCHandleType.Pinned);
+            try
+            {
+                Marshal.Copy(handle.AddrOfPinnedObject(), byteArr, 0, byteArr.Length);
+            }
+            finally
+            {
+                handle.Free();
+            }
             return byteArr;
         }
         private async Task<int> GetDrawingBufferWidthAsync() => await this.GetPropertyAsync<int>(DRAWING_BUFFER_WIDTH);

src/Blazor.Extensions.Canvas/WebGL/WebGLContext.cs

@@ -134,7 +134,8 @@ public enum BufferUsageHint
     public enum BufferType
     {
         ARRAY_BUFFER = 0x8892,
-        ELEMENT_ARRAY_BUFFER = 0x8893
+        ELEMENT_ARRAY_BUFFER = 0x8893,
+        UNIFORM_BUFFER = 0x8A11
     }
 
     public enum BufferParameter
@@ -209,15 +210,24 @@ public enum HintTarget
 
     public enum PixelFormat
     {
+        DEPTH_COMPONENT = 0x1902,
+        RED = 0x1903,
         ALPHA = 0x1906,
         RGB = 0x1907,
         RGBA = 0x1908,
         LUMINANCE = 0x1909,
-        LUMINANCE_ALPHA = 0x190A
+        LUMINANCE_ALPHA = 0x190A,
+        RGBA8 = 0x8058,
+        R8 = 0x8229,
+        RGBA16F = 0x881A,
+        DEPTH_COMPONENT32F = 0x8CAC,
+        RGBA16UI = 0x8D76,
+        R8_SNORM = 0x8F94
     }
 
     public enum PixelType
     {
+        BYTE = 0x1400,
         UNSIGNED_BYTE = 0x1401,
         UNSIGNED_SHORT_4_4_4_4 = 0x8033,
         UNSIGNED_SHORT_5_5_5_1 = 0x8034,
@@ -293,7 +303,8 @@ public enum TextureParameter
         TEXTURE_MAG_FILTER = 0x2800,
         TEXTURE_MIN_FILTER = 0x2801,
         TEXTURE_WRAP_S = 0x2802,
-        TEXTURE_WRAP_T = 0x2803
+        TEXTURE_WRAP_T = 0x2803,
+        TEXTURE_MAX_LEVEL = 0x813D
     }
 
     public enum TextureParameterValue
@@ -309,6 +320,12 @@ public enum TextureParameterValue
         MIRRORED_REPEAT = 0x8370
     }
 
+    public enum BlitFilter
+    {
+        NEAREST = 0x2600,
+        LINEAR = 0x2601
+    }
+
     public enum UniformType
     {
         FLOAT_VEC2 = 0x8B50,
@@ -345,7 +362,9 @@ public enum RenderbufferType
 
     public enum FramebufferType
     {
-        FRAMEBUFFER = 0x8D40
+        FRAMEBUFFER = 0x8D40,
+        READ_FRAMEBUFFER = 0x8CA8,
+        DRAW_FRAMEBUFFER = 0x8CA9
     }
 
     public enum RenderbufferParameter
@@ -450,4 +469,4 @@ public enum Texture
         TEXTURE30,
         TEXTURE31
     }
-}
+}

src/Blazor.Extensions.Canvas/WebGL/WebGLEnums.cs

@@ -56,4 +56,7 @@ public class WebGLShader : WebGLObject
 
     public class WebGLUniformLocation : WebGLObject
     { }
+
+    public class WebGLVertexArrayObject : WebGLObject
+    { }
 }