fix: merge anchor into modelmatrix #1440

.changeset/curvy-laws-kick.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-device-renderer': patch
+---
+
+Merge anchor into modelmatrix.

.changeset/hip-geckos-melt.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-device-renderer': patch
+---
+
+Fix dash effect in webgl.

.changeset/late-items-fry.md

@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-gesture': patch
+---
+
+Stop propagation in g-gesture.

packages/g-gesture/src/gesture.ts

@@ -90,13 +90,14 @@ class Gesture extends EventEmitter {
       el.ownerDocument?.defaultView.addEventListener('pointermove', this._move);
     } else {
       el.isMutationObserved = true;
-      el.on(ElementEvent.MOUNTED, (e) =>
+      el.on(ElementEvent.MOUNTED, (e) => {
+        e.stopPropagation();
         el.ownerDocument?.defaultView.addEventListener(
           'pointermove',
           // @ts-ignore
           this._move,
-        ),
-      );
+        );
+      });
     }
 
     el.addEventListener('pointerdown', this._start);
@@ -105,10 +106,11 @@ class Gesture extends EventEmitter {
       // @ts-ignore
       el.ownerDocument?.defaultView.addEventListener('pointerup', this._end);
     } else {
-      el.on(ElementEvent.MOUNTED, (e) =>
+      el.on(ElementEvent.MOUNTED, (e) => {
+        e.stopPropagation();
         // @ts-ignore
-        el.ownerDocument?.defaultView.addEventListener('pointerup', this._end),
-      );
+        el.ownerDocument?.defaultView.addEventListener('pointerup', this._end);
+      });
     }
 
     el.addEventListener('pointercancel', this._cancel);

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

@@ -16,6 +16,8 @@ import { BatchContext } from '../renderer';
 const SEGMENT_NUM = 12;
 
 export class InstancedFillDrawcall extends Instanced {
+  protected mergeAnchorIntoModelMatrix = true;
+
   constructor(
     protected renderHelper: RenderHelper,
     protected texturePool: TexturePool,

packages/g-plugin-device-renderer/src/shader/instanced-line.frag

@@ -37,6 +37,6 @@ void main() {
     outputColor.a = outputColor.a
       * blur
       * u_Opacity * u_StrokeOpacity
-      * ceil(mod(v_Dash.x + u_dash_offset, u_dash_array) - (u_dash_array * u_dash_ratio));
+      * (u_dash_array < 1.0 ? (ceil((u_dash_array * u_dash_ratio) - mod(v_Dash.x + u_dash_offset, u_dash_array))) : 1.0);
   }
 }

packages/g-plugin-device-renderer/src/shader/instanced-line.vert

@@ -33,9 +33,7 @@ void main() {
   float clampedStrokeWidth = max(strokeWidth, 1.0);
 
   float isBillboard = a_Dash.w;
-  bool isPerspective = isPerspectiveMatrix(u_ProjectionMatrix);
-
-  if (isBillboard > 0.5 && isPerspective) {
+  if (isBillboard > 0.5) {
     // clip space
     vec4 clip0 = project(vec4(a_PointA, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
     vec4 clip1 = project(vec4(a_PointB, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);

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

@@ -0,0 +1,153 @@
+import {
+  runtime,
+  Canvas,
+  CanvasEvent,
+  Line,
+  Text,
+  Rect,
+  Image,
+  Circle,
+  Path,
+} from '@antv/g';
+import { Renderer } from '@antv/g-webgl';
+import {
+  MeshPhongMaterial,
+  SphereGeometry,
+  DirectionalLight,
+  Mesh,
+  Plugin as Plugin3D,
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
+import * as lil from 'lil-gui';
+import Stats from 'stats.js';
+
+runtime.enableCSSParsing = false;
+
+// create a renderer
+const renderer = new Renderer();
+renderer.registerPlugin(new Plugin3D());
+renderer.registerPlugin(new PluginControl());
+
+// create a canvas
+const canvas = new Canvas({
+  container: 'container',
+  width: 400,
+  height: 400,
+  renderer,
+});
+
+(async () => {
+  // wait for canvas' initialization complete
+  await canvas.ready;
+  // use GPU device
+  const plugin = renderer.getPlugin('device-renderer');
+  const device = plugin.getDevice();
+
+  const origin = new Image({
+    style: {
+      x: 200,
+      y: 200,
+      z: 0,
+      width: 20,
+      height: 20,
+      src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(origin);
+
+  const x = origin.cloneNode();
+  x.attr({
+    x: 300,
+  });
+  canvas.appendChild(x);
+
+  const y = origin.cloneNode();
+  y.attr({
+    y: 100,
+  });
+  canvas.appendChild(y);
+
+  const z = origin.cloneNode();
+  z.attr({
+    z: 100,
+  });
+  canvas.appendChild(z);
+
+  const xAxis = new Line({
+    style: {
+      x1: 200,
+      y1: 200,
+      z1: 0,
+      x2: 300,
+      y2: 200,
+      z2: 0,
+      stroke: 'black',
+      lineWidth: 2,
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(xAxis);
+
+  const yAxis = new Line({
+    style: {
+      x1: 200,
+      y1: 200,
+      z1: 0,
+      x2: 200,
+      y2: 100,
+      z2: 0,
+      stroke: 'black',
+      lineWidth: 2,
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(yAxis);
+
+  const zAxis = new Line({
+    style: {
+      x1: 200,
+      y1: 200,
+      z1: 0,
+      x2: 200,
+      y2: 200,
+      z2: 100,
+      stroke: 'black',
+      lineWidth: 2,
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(zAxis);
+
+  // add a directional light into scene
+  const light = new DirectionalLight({
+    style: {
+      fill: 'white',
+      direction: [-1, 0, 1],
+    },
+  });
+  canvas.appendChild(light);
+
+  // adjust camera's position
+  // const camera = canvas.getCamera();
+  // camera.setPerspective(0.1, 5000, 90, 400 / 400);
+
+  // stats
+  const stats = new Stats();
+  stats.showPanel(0);
+  const $stats = stats.dom;
+  $stats.style.position = 'absolute';
+  $stats.style.left = '0px';
+  $stats.style.top = '0px';
+  const $wrapper = document.getElementById('container');
+  $wrapper.appendChild($stats);
+  canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+    if (stats) {
+      stats.update();
+    }
+  });
+
+  // GUI
+  const gui = new lil.GUI({ autoPlace: false });
+  $wrapper.appendChild(gui.domElement);
+})();

site/examples/3d/3d-basic/demo/meta.json

@@ -20,6 +20,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*nKFQQZdL3-IAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "billboard.js",
+      "title": {
+        "zh": "公告牌效果",
+        "en": "Billboard effect"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*V44QR4my8ZwAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "sprite.js",
       "title": {