Skip to content

refactor(effects-manager): extract GLSL shaders to .glsl files via raw-loader (#886)#933

Closed
deveshbervar wants to merge 1 commit into
HSF:mainfrom
deveshbervar:refactor/shader-extraction-886
Closed

refactor(effects-manager): extract GLSL shaders to .glsl files via raw-loader (#886)#933
deveshbervar wants to merge 1 commit into
HSF:mainfrom
deveshbervar:refactor/shader-extraction-886

Conversation

@deveshbervar

Copy link
Copy Markdown
Collaborator

Summary

Phase 2 (PR 2a of 2) of the refactoring proposed in #886.

Extracts the two inline GLSL shader strings from effects-manager.ts into dedicated .glsl files,
loaded at build time via raw-loader.

What changed

New files:

  • shaders/hover-vertex.glsl — vertex shader extracted from TS string
  • shaders/hover-fragment.glsl — fragment shader extracted from TS string
  • src/glsl.d.ts — TypeScript declaration for .glsl imports
  • src/tests/helpers/glsl-mock.js — Jest mock for .glsl files

Modified files:

  • configs/webpack.conf.js — added raw-loader rule for .glsl
  • configs/jest.conf.js — added moduleNameMapper for .glsl in tests
  • effects-manager.ts — replaced inline strings with ES6 imports
  • package.json — added raw-loader as devDependency

Why

From #886 Gap 1: GLSL embedded as TypeScript strings has no validation path — a syntax error only surfaces at WebGL
runtime, never in yarn test:ci.

This extraction is the prerequisite for PR 2b which adds glslangValidator CI validation.

Scope

@deveshbervar deveshbervar force-pushed the refactor/shader-extraction-886 branch from 0db2a82 to 4f18a1c Compare June 13, 2026 06:04
Comment on lines +20 to +30
const VERTEX_SHADER = `
uniform float opacity;
uniform float colorR;
uniform float colorG;
uniform float colorB;

void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not really sure I'm qualified to comment on this MR, as I have actually no clue how shaders work.
So be indulgent if my question is stupid, but I'm just a bit surprised that the "extraction of GLSL shaders' as the title says only results is having the shader code duplicated in 2 places, this one and the new nice glsl file. Is there no way to have it only in the glsl file ? What if the 2 are not in sync ?

@deveshbervar deveshbervar force-pushed the refactor/shader-extraction-886 branch 2 times, most recently from 36d8bd1 to d395667 Compare June 18, 2026 03:55
…w-loader (HSF#886)

style: format glsl declaration file

fix: vertex shader uniforms, glsl.d.ts format, phoenix-ng jest glsl mock

fix: copy glsl shaders to dist after tsc build

fix: inline shader code to avoid glsl loader dependency

fix: inline shader code to avoid glsl loader dependency
@deveshbervar deveshbervar force-pushed the refactor/shader-extraction-886 branch from d395667 to 6393b72 Compare June 18, 2026 04:01
@deveshbervar

Copy link
Copy Markdown
Collaborator Author

Hi @sponce,
My apologies for the back and forth on this PR. I have some questions regarding the best approach for shader extraction.
I will discuss it with @EdwardMoyse and come back with a cleaner/new PR. For now, I’m closing this one.
Thank you for your earlier review!

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.

2 participants