fix: use willReadFrequently when creating offscreen canvas (#1586)

* fix: create canvas2d context with willReadFrequently attribute

* fix: path should not downgrade to line when billboard enabled

* chore: commit changeset

* chore: add deploy gh-pages action

.changeset/smart-kings-boil.md

@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-lite': patch
+---
+
+Path should not downgrade to line when billboard enabled.

.github/workflows/deploy.yml

@@ -0,0 +1,30 @@
+name: Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - next
+
+jobs:
+  deploy-site:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn install
+      - run: cd site && yarn install
+      - run: cd site && npm run build
+      - run: cp ./site/CNAME ./site/dist/CNAME
+      - run: |
+          cd site/dist
+          git init
+          git config --local user.name antv
+          git config --local user.email antv@antfin.com
+          git add .
+          git commit -m "update by release action"
+      - uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{secrets.PERSONAL_ACCESS_TOKEN}}
+          directory: site/dist
+          branch: gh-pages
+          force: true

packages/g-lite/src/services/OffscreenCanvasCreator.ts

@@ -24,19 +24,28 @@ export class OffscreenCanvasCreator {
     // user-defined offscreen canvas
     if (offscreenCanvas || runtime.offscreenCanvas) {
       this.canvas = offscreenCanvas || runtime.offscreenCanvas;
-      this.context = this.canvas.getContext('2d', contextAttributes);
+      this.context = this.canvas.getContext('2d', {
+        willReadFrequently: true,
+        ...contextAttributes,
+      });
     } else {
       try {
         // OffscreenCanvas2D measureText can be up to 40% faster.
         this.canvas = new window.OffscreenCanvas(0, 0) as unknown as CanvasLike;
-        this.context = this.canvas.getContext('2d', contextAttributes);
+        this.context = this.canvas.getContext('2d', {
+          willReadFrequently: true,
+          ...contextAttributes,
+        });
         if (!this.context || !this.context.measureText) {
           this.canvas = document.createElement('canvas');
           this.context = this.canvas.getContext('2d');
         }
       } catch (ex) {
         this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext('2d', contextAttributes);
+        this.context = this.canvas.getContext('2d', {
+          willReadFrequently: true,
+          ...contextAttributes,
+        });
       }
     }
 

packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts

@@ -12,9 +12,18 @@ import { RenderHelper } from '../render';
 import { TexturePool } from '../TexturePool';
 import { LightPool } from '../LightPool';
 import { BatchContext } from '../renderer';
+import { enumToObject } from '../utils';
 
 const SEGMENT_NUM = 12;
 
+enum FillVertexAttributeBufferIndex {
+  PACKED_STYLE = VertexAttributeBufferIndex.POSITION + 1,
+}
+
+enum FillVertexAttributeLocation {
+  PACKED_STYLE3 = VertexAttributeLocation.MAX,
+}
+
 export class InstancedFillDrawcall extends Instanced {
   protected mergeAnchorIntoModelMatrix = true;
 
@@ -124,6 +133,18 @@ export class InstancedFillDrawcall extends Instanced {
       // use default common attributes
       super.createGeometry(objects);
 
+      const packedStyle: number[] = [];
+      objects.forEach((object) => {
+        const { isBillboard, billboardRotation, isSizeAttenuation } =
+          object.parsedStyle;
+        packedStyle.push(
+          isBillboard ? 1 : 0,
+          billboardRotation ?? 0,
+          isSizeAttenuation ? 1 : 0,
+          0,
+        );
+      });
+
       this.geometry.setVertexBuffer({
         bufferIndex: VertexAttributeBufferIndex.POSITION,
         byteStride: 4 * 3,
@@ -137,7 +158,20 @@ export class InstancedFillDrawcall extends Instanced {
         ],
         data: new Float32Array(pointsBuffer),
       });
-
+      this.geometry.setVertexBuffer({
+        bufferIndex: FillVertexAttributeBufferIndex.PACKED_STYLE,
+        byteStride: 4 * 4,
+        stepMode: VertexStepMode.INSTANCE,
+        attributes: [
+          {
+            format: Format.F32_RGBA,
+            bufferByteOffset: 4 * 0,
+            location: FillVertexAttributeLocation.PACKED_STYLE3,
+            divisor: 1,
+          },
+        ],
+        data: new Float32Array(packedStyle),
+      });
       this.geometry.setVertexBuffer({
         bufferIndex: VertexAttributeBufferIndex.UV,
         byteStride: 4 * 2,
@@ -161,6 +195,7 @@ export class InstancedFillDrawcall extends Instanced {
     this.material.fragmentShader = meshFrag;
     this.material.defines = {
       ...this.material.defines,
+      ...enumToObject(FillVertexAttributeLocation),
       INSTANCED: true,
     };
   }
@@ -174,5 +209,30 @@ export class InstancedFillDrawcall extends Instanced {
     super.updateAttribute(objects, startIndex, name, value);
 
     this.updateBatchedAttribute(objects, startIndex, name, value);
+
+    if (
+      name === 'isBillboard' ||
+      name === 'billboardRotation' ||
+      name === 'isSizeAttenuation'
+    ) {
+      const packed: number[] = [];
+      objects.forEach((object) => {
+        const { isBillboard, billboardRotation, isSizeAttenuation } =
+          object.parsedStyle;
+        packed.push(
+          isBillboard ? 1 : 0,
+          billboardRotation ?? 0,
+          isSizeAttenuation ? 1 : 0,
+          0,
+        );
+      });
+
+      this.geometry.updateVertexBuffer(
+        FillVertexAttributeBufferIndex.PACKED_STYLE,
+        FillVertexAttributeLocation.PACKED_STYLE3,
+        startIndex,
+        new Uint8Array(new Float32Array(packed).buffer),
+      );
+    }
   }
 }

packages/g-plugin-device-renderer/src/renderer/Path.ts

@@ -1,7 +1,7 @@
 /**
  * @see https://www.khronos.org/assets/uploads/developers/presentations/Crazy_Panda_How_to_draw_lines_in_WebGL.pdf
  */
-import type { CSSRGB, DisplayObject, ParsedBaseStyleProps } from '@antv/g-lite';
+import type { CSSRGB, DisplayObject, ParsedPathStyleProps } from '@antv/g-lite';
 import { Shape } from '@antv/g-lite';
 import {
   Instanced,
@@ -24,8 +24,8 @@ export class PathRenderer extends Batch {
   // ];
 
   getDrawcallCtors(object: DisplayObject) {
-    const { fill, stroke, opacity, strokeOpacity, lineWidth } =
-      object.parsedStyle as ParsedBaseStyleProps;
+    const { fill, stroke, opacity, strokeOpacity, lineWidth, isBillboard } =
+      object.parsedStyle as ParsedPathStyleProps;
     const hasStroke = stroke && !(stroke as CSSRGB).isNone;
     const subpathNum = InstancedPathDrawcall.calcSubpathNum(object);
 
@@ -43,7 +43,7 @@ export class PathRenderer extends Batch {
         !(strokeOpacity === 0 || opacity === 0 || lineWidth === 0 || !hasStroke)
       ) {
         const isLine = InstancedLineDrawcall.isLine(object, i);
-        if (isLine) {
+        if (!isBillboard && isLine) {
           drawcalls.push(InstancedLineDrawcall);
         } else {
           drawcalls.push(InstancedPathDrawcall);

packages/g-plugin-device-renderer/src/shader/mesh.vert

@@ -1,9 +1,11 @@
 #pragma glslify: import('@antv/g-shader-components/scene.both.glsl')
-
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
+#pragma glslify: billboard = require('@antv/g-shader-components/billboard.vert')
 
 layout(location = POSITION) in vec3 a_Position;
+layout(location = PACKED_STYLE3) in vec4 a_StylePacked3;
+
 #ifdef USE_UV
   layout(location = UV) in vec2 a_Uv;
   out vec2 v_Uv;
@@ -13,5 +15,12 @@ void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.vert')
   #pragma glslify: import('@antv/g-shader-components/uv.vert')
 
-  gl_Position = project(vec4(a_Position.xy, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+  bool isBillboard = a_StylePacked3.x > 0.5;
+  if (isBillboard) {
+    float rotation = a_StylePacked3.y;
+    bool isSizeAttenuation = a_StylePacked3.z > 0.5;
+    gl_Position = billboard(a_Position.xy, rotation, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+  } else {
+    gl_Position = project(vec4(a_Position.xy, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+  }
 }

site/examples/3d/3d-basic/demo/billboard.js

@@ -192,6 +192,8 @@ const canvas = new Canvas({
         ['Z'],
       ],
       stroke: '#1890FF',
+      fill: '#1890FF',
+      fillOpacity: 0.5,
       lineWidth: 10,
       lineCap: 'round',
       lineJoin: 'round',