Skip to content

fix: vec4 vColor compatibility for three.js r183+#158

Merged
agargaro merged 1 commit into
agargaro:masterfrom
sdivelbiss:fix/threejs-r183-vcolor-compat
Mar 8, 2026
Merged

fix: vec4 vColor compatibility for three.js r183+#158
agargaro merged 1 commit into
agargaro:masterfrom
sdivelbiss:fix/threejs-r183-vcolor-compat

Conversation

@sdivelbiss

@sdivelbiss sdivelbiss commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

Summary

Closes #159

three.js r183 changed vColor from conditionally vec3/vec4 to always vec4 (three.js PR #32509). This causes GLSL shader compilation errors when using @three.ez/instanced-mesh:

ERROR: 0:506: '=' : dimension mismatch
ERROR: 0:506: 'assign' : cannot convert from 'const 3-component vector of float' to 'out highp 4-component vector of float'

Changes

  • instanced_color_vertex.glsl: Always assign vec4 to vColor (removes USE_COLOR_ALPHA conditional)
  • instanced_color_pars_vertex.glsl: Always return vec4 from getColorTexture() (removes vec3 branch)
  • InstancedMesh2.ts: Always define USE_COLOR_ALPHA instead of conditionally setting USE_COLOR or USE_COLOR_ALPHA

Backward compatibility

This remains compatible with three.js r182 and earlier because USE_COLOR_ALPHA ensures vColor is declared as vec4 in older versions too. The colorsTexture is already created with 4 components (RGBA) and filled with 1.0, so the alpha channel is safely 1.0 by default when opacity is not used.

Repro

Test plan

  • Verified build succeeds with npm run build
  • Verified no vec3(1.0) or bare vColor = color assignments in build output
  • Tested rendering with three.js r183 in a real application — seats render correctly on foundations

three.js r183 changed `vColor` from conditionally `vec3`/`vec4` to
always `vec4`. This caused GLSL compilation errors:

  cannot convert from 'const 3-component vector of float'
  to 'out highp 4-component vector of float'

Changes:
- instanced_color_vertex.glsl: always assign vec4 to vColor
- instanced_color_pars_vertex.glsl: always return vec4 from getColorTexture()
- InstancedMesh2.ts: always define USE_COLOR_ALPHA (colorsTexture is
  already RGBA with alpha=1.0 by default, so this is safe)

This remains backward compatible with three.js r182 and earlier because
USE_COLOR_ALPHA ensures vColor is declared as vec4 in older versions too.

Co-Authored-By: claude-flow <ruv@ruv.net>
@sonarqubecloud

sonarqubecloud Bot commented Mar 5, 2026

Copy link
Copy Markdown

@agargaro

agargaro commented Mar 5, 2026

Copy link
Copy Markdown
Owner

Awesome, thank you! I'll test and merge it later :)

@agargaro agargaro merged commit 7b25e05 into agargaro:master Mar 8, 2026
10 checks passed
@agargaro

agargaro commented Mar 8, 2026

Copy link
Copy Markdown
Owner

Thanks! I've released a new version with the fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

GLSL compilation error with three.js r183: vColor vec3/vec4 mismatch

2 participants