antvis / antvis/G6

[Bug]: WebGL engine rendering error

Open
#6,765 2 comments 0 reactions 0 assignees View on GitHub
bug 🐛
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

在官网中使用webGL引擎 点击节点 节点应该渲染选中的状态 但是有时候渲染出来的效果是错的
https://g6.antv.antgroup.com/examples/behavior/select/#click
代码
import { Graph } from '@antv/g6';
import { Renderer as WebGLRenderer } from '@antv/g-webgl'
const data = {
nodes: [
{ id: 'node1', style: { x: 150, y: 250 } },
{ id: 'node2', style: { x: 350, y: 250 } },
{ id: 'node3', style: { x: 250, y: 250 } },
],
edges: [],
};

const graph = new Graph({
data,
renderer: () => new WebGLRenderer(),
behaviors: [{ type: 'click-select', multiple: true, trigger: ['shift'] }, 'drag-element'],
autoFit: 'center',
});

graph.render();

const prompt = document.createElement('div');
prompt.innerHTML = `👉 Press SHIFT to enable multiple selection`;
prompt.style.position = 'absolute';
const container = document.getElementById('container');
container.appendChild(prompt);

未点击时
![Image](https://github.com/user-attachments/assets/a43ef145-9ab1-4769-a92f-4cf045cb205a)
点击时
![Image](https://github.com/user-attachments/assets/ece13a78-2279-4a3d-99ee-c8164904e194)
期望的效果
![Image](https://github.com/user-attachments/assets/3388dec6-563b-4881-85de-f378f3e21d14)

### Reproduction link / 复现链接

https://g6.antv.antgroup.com/examples/behavior/select/#click

### Steps to Reproduce the Bug or Issue / 重现步骤

打开官网https://g6.antv.antgroup.com/examples/behavior/select/#click
将下列代码复制进去

-------------代码分割线----------------
import { Graph } from '@antv/g6';
import { Renderer as WebGLRenderer } from '@antv/g-webgl'
const data = {
nodes: [
{ id: 'node1', style: { x: 150, y: 250 } },
{ id: 'node2', style: { x: 350, y: 250 } },
{ id: 'node3', style: { x: 250, y: 250 } },
],
edges: [],
};

const graph = new Graph({
data,
renderer: () => new WebGLRenderer(),
behaviors: [{ type: 'click-select', multiple: true, trigger: ['shift'] }, 'drag-element'],
autoFit: 'center',
});

graph.render();

const prompt = document.createElement('div');
prompt.innerHTML = `👉 Press SHIFT to enable multiple selection`;
prompt.style.position = 'absolute';
const container = document.getElementById('container');
container.appendChild(prompt);
-------------代码分割线----------------

点击节点 就复现了

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the issue from the linked G6 selection example using the shown Graph configuration and WebGLRenderer entry point. Compare the incorrect and expected node-selection rendering after clicking a node, then verify that selection states render correctly in the same Chrome and Windows setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.