Deck.gl plot in vue3: Vertex shader is not compiled.

[minghuahuang]

Description

我仿照deck.gl的官方示例plot写了一个vue3版本的组件，在test-web项目中可以正常使用，当我将组件迁移到ts-web中时，遇到了着色器编译错误的问题，我尝试将node_modules删除并重新安装了，但是没有解决这个问题，有人可以帮我解决这个问题吗， 我将不胜感激。

I wrote a vue3 version of the component modeled after the official deck.gl example plot, which can be used normally in the test-web project. When I migrated the component to the ts-web, I encountered a shader compilation error. I tried to remove and reinstall the node modules, but it did not solve the problem. Can anyone help me with this problem? I would appreciate it.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CARTO
• ArcGIS

Expected Behavior

在ts-web项目中也可以正常表现

It also works fine in ts-web projects

Steps to Reproduce

success project: test-web
error project: ts-web

Environment

• Framework version:[email protected], [email protected]
• Browser:chrome 132.0.6834.160
• OS: MacOS 12.3 (21E230)

Logs

error message:

browser window display:
`Shader Compilation Error in fragment axes-layer-label-fragment-shader

1: #version 300 es
2:
3: // ----- PROLOGUE -------------------------
4:
5: #define SHADER_TYPE_FRAGMENT
6:
7: #define AMD_GPU
8:
9: precision highp float;
10:
11:
12: // ----- APPLICATION DEFINES -------------------------
13:
14:
15:
16: // ----- MODULE geometry ---------------
17:
18: #define MODULE_GEOMETRY
19:
20: #define SMOOTH_EDGE_RADIUS 0.5
21:
22: struct FragmentGeometry {
23: vec2 uv;
24: } geometry;
25:
26: float smoothedge(float edge, float x) {
27: return smoothstep(edge - SMOOTH_EDGE_RADIUS, edge + SMOOTH_EDGE_RADIUS, x);
28: }
29:
30: // ----- MAIN SHADER SOURCE -------------------------
31:
32:
33: void DECKGL_FILTER_COLOR(inout vec4 color, FragmentGeometry geometry) {
34: }
35: #define SHADER_NAME axes-layer-label-fragment-shader
36:
37: precision highp float;
38:
39: uniform sampler2D labelTexture;
40:
41: in vec2 vTexCoords;
42: in float shouldDiscard;
43:
44: out vec4 fragColor;
45:
46: void main(void) {
47: if (shouldDiscard > 0.0) {
48: discard;
49: }
50: vec4 color = texture(labelTexture, vTexCoords);
51: if (color.a == 0.0) {
52: discard;
53: }
54: fragColor = color;
55: }
`

browser console display:
`Uncaught (in promise) Error: Error during linking: Vertex shader is not compiled.

at WEBGLRenderPipeline._reportLinkStatus (chunk-6ZW4EBE3.js?v=5818e545:14608:15)

at WEBGLRenderPipeline._linkShaders (chunk-6ZW4EBE3.js?v=5818e545:14571:12)

at new WEBGLRenderPipeline (chunk-6ZW4EBE3.js?v=5818e545:14436:10)

at WebGLDevice.createRenderPipeline (chunk-6ZW4EBE3.js?v=5818e545:15614:12)

at _PipelineFactory.createRenderPipeline (chunk-5S57SZCE.js?v=5818e545:11402:36)

at _Model._updatePipeline (chunk-5S57SZCE.js?v=5818e545:12412:44)

at new _Model (chunk-5S57SZCE.js?v=5818e545:11990:26)

at AxesLayer._getModels (axes-layer.ts:185:19)

at AxesLayer.initializeState (axes-layer.ts:73:24)

`

[minghuahuang]

我检查了 @luma.gl 的版本问题，test-web：@luma.gl v9.0.28 ts-web: @luma.gl v9.1.0 我猜测是 @luma.gl版本的问题，然而我并没有显式安装过luma.gl

I checked the @luma.gl version problem, test-web: @luma.gl v9.0.28 ts-web: @luma.gl v9.1.0 I guess it is the @luma.gl version problem, however I did not explicitly install luma.gl，for Example npm install luma.gl

[minghuahuang]

我按照上面的猜想了重新安装，安装命令如此：npm install @deck.gl/[email protected] @deck.gl/[email protected] @deck.gl/[email protected] @luma.gl/[email protected] @luma.gl/[email protected] @luma.gl/[email protected]，解决了这个问题。

I re-installed according to the above guess, the installation command is as follows: 'npm install @deck.gl/[email protected] @deck.gl/[email protected] @deck.gl/[email protected] @luma.gl/[email protected].' NPM install @deck.gl/[email protected] @deck.gl/[email protected] @luma.gl/[email protected] @luma.gl/[email protected] ', solves the problem.