Skip to content

Commit

Permalink
fix: skip triggering render hooks when camera changed only. (#1548)
Browse files Browse the repository at this point in the history
* fix: skip triggering render hooks when camera changed only

* chore: commit changeset
  • Loading branch information
xiaoiver authored Oct 9, 2023
1 parent e36259e commit f109d83
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 23 deletions.
5 changes: 5 additions & 0 deletions .changeset/ten-boxes-love.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@antv/g-lite': patch
---

Skip triggering render hooks when camera changed only.
11 changes: 9 additions & 2 deletions packages/g-lite/src/services/RenderingService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,14 @@ export class RenderingService {
renderingContext.dirtyRectangleRenderingDisabled =
this.disableDirtyRectangleRendering();

if (!canvasConfig.disableRenderHooks) {
const onlyCameraChanged =
renderingContext.renderReasons.size === 1 &&
renderingContext.renderReasons.has(RenderReason.CAMERA_CHANGED);
const shouldTriggerRenderHooks =
!canvasConfig.disableRenderHooks ||
!(canvasConfig.disableRenderHooks && onlyCameraChanged);

if (shouldTriggerRenderHooks) {
this.renderDisplayObject(
renderingContext.root,
canvasConfig,
Expand All @@ -186,7 +193,7 @@ export class RenderingService {

this.hooks.beginFrame.call();

if (!canvasConfig.disableRenderHooks) {
if (shouldTriggerRenderHooks) {
renderingContext.renderListCurrentFrame.forEach((object) => {
this.hooks.beforeRender.call(object);
this.hooks.render.call(object);
Expand Down
80 changes: 59 additions & 21 deletions site/examples/perf/webgl/demo/nodes.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Canvas, CanvasEvent, Circle, Line, Text, runtime } from '@antv/g';
import { Canvas, CanvasEvent, Circle, Line, Group, runtime } from '@antv/g';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';
import { Plugin } from '@antv/g-plugin-dragndrop';
import Stats from 'stats.js';
Expand All @@ -10,8 +10,8 @@ import Stats from 'stats.js';

runtime.enableCSSParsing = false;

const NODE_NUM = 50000;
const EDGE_NUM = 50000;
const NODE_NUM = 5000;
const EDGE_NUM = 5000;

const webglRenderer = new WebGLRenderer();
webglRenderer.registerPlugin(
Expand All @@ -25,7 +25,7 @@ webglRenderer.registerPlugin(

const canvas = new Canvas({
container: 'container',
width: 600,
width: 500,
height: 500,
renderer: webglRenderer,
});
Expand All @@ -46,21 +46,61 @@ canvas.addEventListener(CanvasEvent.READY, () => {
];
let num = Math.floor(Math.sqrt(NODE_NUM) + 0.5);

const g1 = new Group({
style: {
zIndex: 2,
},
});
const g2 = new Group({
style: {
zIndex: 1,
},
});

const sourceMap = new WeakMap();
const targetMap = new WeakMap();
for (let i = 0; i < NODE_NUM; i++) {
const fill = colors[Math.floor(Math.random() * colors.length) || 0];
const circle = new Circle({
style: {
cx: (i % num) * 10,
cy: Math.floor(i / num) * 10,
fill: colors[Math.floor(Math.random() * colors.length) || 0],
// cx: (i % num) * 10,
// cy: Math.floor(i / num) * 10,
cx: Math.random() * 500,
cy: Math.random() * 500,
fill,
r: 4,
// draggable: true
},
});
nodes.push(circle);
sourceMap.set(circle, []);
targetMap.set(circle, []);

circle.addEventListener('mouseenter', () => {
circle.style.fill = 'red';
});
circle.addEventListener('mouseleave', () => {
circle.style.fill = fill;
});

// const text = new Text({
// style: {
// x: 0,
// y: 4,
// text: `${i}`,
// textBaseline: "middle",
// textAlign: "center",
// fontSize: 4,
// fill: "black"
// }
// });
// circle.appendChild(text);
}

nodes.forEach((node) => {
g1.appendChild(node);
});

for (let i = 0; i < EDGE_NUM; i++) {
const source = nodes[Math.floor(Math.random() * NODE_NUM)];
const target = nodes[Math.floor(Math.random() * NODE_NUM)];
Expand All @@ -76,16 +116,22 @@ canvas.addEventListener(CanvasEvent.READY, () => {
});

const sourceEdges = sourceMap.get(source);
// sourceEdges.push(line);
sourceEdges.push(line);
const targetEdges = targetMap.get(target);
// targetEdges.push(line);
targetEdges.push(line);

canvas.appendChild(line);
g2.appendChild(line);

// line.addEventListener("mouseenter", () => {
// line.style.stroke = "red";
// });
// line.addEventListener("mouseleave", () => {
// line.style.stroke = "grey";
// });
}

nodes.forEach((circle) => {
canvas.appendChild(circle);
});
canvas.appendChild(g1);
canvas.appendChild(g2);

// stats
const stats = new Stats();
Expand Down Expand Up @@ -126,8 +172,6 @@ canvas.addEventListener(CanvasEvent.READY, () => {
}

canvas.addEventListener('dragstart', function (e) {
canvas.getConfig().disableHitTesting = true;

if (e.target === canvas.document) {
} else {
const [x, y] = e.target.getPosition();
Expand All @@ -144,10 +188,6 @@ canvas.addEventListener(CanvasEvent.READY, () => {
moveAt(e.target, e.canvasX, e.canvasY);
}
});
canvas.addEventListener('dragend', function (e) {
console.log('dragend...');
canvas.getConfig().disableHitTesting = false;
});

// handle mouse wheel event
const bindWheelHandler = () => {
Expand All @@ -161,8 +201,6 @@ canvas.addEventListener(CanvasEvent.READY, () => {
.addEventListener(
'wheel',
(e) => {
canvas.getConfig().disableHitTesting = false;

e.preventDefault();
let zoom;
if (e.deltaY < 0) {
Expand Down

0 comments on commit f109d83

Please sign in to comment.