diff --git a/.changeset/curvy-laws-kick.md b/.changeset/curvy-laws-kick.md new file mode 100644 index 000000000..cdea35d67 --- /dev/null +++ b/.changeset/curvy-laws-kick.md @@ -0,0 +1,5 @@ +--- +'@antv/g-plugin-device-renderer': patch +--- + +Merge anchor into modelmatrix. diff --git a/.changeset/hip-geckos-melt.md b/.changeset/hip-geckos-melt.md new file mode 100644 index 000000000..6ac91fad8 --- /dev/null +++ b/.changeset/hip-geckos-melt.md @@ -0,0 +1,5 @@ +--- +'@antv/g-plugin-device-renderer': patch +--- + +Fix dash effect in webgl. diff --git a/.changeset/late-items-fry.md b/.changeset/late-items-fry.md new file mode 100644 index 000000000..2cf707601 --- /dev/null +++ b/.changeset/late-items-fry.md @@ -0,0 +1,6 @@ +--- +'@antv/g-plugin-device-renderer': patch +'@antv/g-gesture': patch +--- + +Stop propagation in g-gesture. diff --git a/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png b/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png index 01d881c00..3adaf86ed 100644 Binary files a/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png and b/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png differ diff --git a/__tests__/integration/__node__tests__/webgl/snapshots/line.png b/__tests__/integration/__node__tests__/webgl/snapshots/line.png index 77e0c5b54..5d1a33430 100644 Binary files a/__tests__/integration/__node__tests__/webgl/snapshots/line.png and b/__tests__/integration/__node__tests__/webgl/snapshots/line.png differ diff --git a/packages/g-gesture/src/gesture.ts b/packages/g-gesture/src/gesture.ts index 5e17faee5..222acd78f 100644 --- a/packages/g-gesture/src/gesture.ts +++ b/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); diff --git a/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts index 38bbe8c93..2686eb902 100644 --- a/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts +++ b/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, diff --git a/packages/g-plugin-device-renderer/src/shader/instanced-line.frag b/packages/g-plugin-device-renderer/src/shader/instanced-line.frag index 6aa2b386c..cd8aa70de 100644 --- a/packages/g-plugin-device-renderer/src/shader/instanced-line.frag +++ b/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); } } \ No newline at end of file diff --git a/packages/g-plugin-device-renderer/src/shader/instanced-line.vert b/packages/g-plugin-device-renderer/src/shader/instanced-line.vert index db096fca8..4e637e38b 100644 --- a/packages/g-plugin-device-renderer/src/shader/instanced-line.vert +++ b/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); diff --git a/site/examples/3d/3d-basic/demo/billboard.js b/site/examples/3d/3d-basic/demo/billboard.js new file mode 100644 index 000000000..ac6a18796 --- /dev/null +++ b/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); +})(); diff --git a/site/examples/3d/3d-basic/demo/meta.json b/site/examples/3d/3d-basic/demo/meta.json index b561a1dc6..dd2e5b0c8 100644 --- a/site/examples/3d/3d-basic/demo/meta.json +++ b/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": {