feat: allow specifying WebGLContextAttributes when creating Rendering…

…Context feat: optimize LayerCompositor engine via now required antialias, depth and stencil
bhouston · Aug 28, 2020 · 254afb9 · 254afb9
1 parent 9aa7100
commit 254afb9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/src/lib/engines/layerCompositor/Layer.ts b/src/lib/engines/layerCompositor/Layer.ts
@@ -30,4 +30,5 @@ export class Layer {
     const uvToTextureScale = makeMatrix3Scale(this.uvScale);
     const uvToTextureTranslation = makeMatrix3Translation(this.uvOffset);
     this.uvToTexture = makeMatrix3Concatenation(uvToTextureTranslation, uvToTextureScale);
+  }
 }
diff --git a/src/lib/engines/layerCompositor/LayerCompositor.ts b/src/lib/engines/layerCompositor/LayerCompositor.ts
@@ -82,7 +82,13 @@ export class LayerCompositor {
   framebufferScreenToView = new Matrix4();
 
   constructor(canvas: HTMLCanvasElement) {
-    this.context = new RenderingContext(canvas);
+    this.context = new RenderingContext(canvas, {
+      alpha: true,
+      antialias: false,
+      depth: false,
+      premultipliedAlpha: true,
+      stencil: false,
+    });
     const plane = planeGeometry(1, 1, 1, 1);
     transformGeometry(plane, makeMatrix4Translation(new Vector3(0.5, 0.5, -1.0)));
     this.#bufferGeometry = makeBufferGeometryFromGeometry(this.context, plane);

diff --git a/src/lib/renderers/webgl/RenderingContext.ts b/src/lib/renderers/webgl/RenderingContext.ts
@@ -53,15 +53,17 @@ export class RenderingContext {
   #maskState: MaskState = new MaskState();
   #cullingState: CullingState = new CullingState();
 
-  constructor(public canvas: HTMLCanvasElement) {
-    const options: WebGLContextAttributes = {};
-    options.alpha = true;
-    options.antialias = true;
-    options.depth = true;
-    options.premultipliedAlpha = true;
-    options.stencil = true;
+  constructor(public canvas: HTMLCanvasElement, attributes: WebGLContextAttributes | undefined = undefined) {
+    if (attributes === undefined) {
+      attributes = {};
+      attributes.alpha = true;
+      attributes.antialias = true;
+      attributes.depth = true;
+      attributes.premultipliedAlpha = true;
+      attributes.stencil = true;
+    }
     {
-      const gl = canvas.getContext("webgl", options);
+      const gl = canvas.getContext("webgl", attributes);
       if (gl === null) {
         throw new Error("webgl not supported");
       }