Loading external shader file for Webgl

[FranckErnewein]

Hi,

A part of my app use Webgl (with shaders).
I would like to load my shader files in my bundle (instead of write shaders as string inside the JS files).
So I wrote an a file named shader.vert which contains

attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;
 
void main() {
  gl_Position = u_matrix * a_position;
  v_texcoord = a_texcoord;
}

Then I try to load it in an other file

import vert from './shader.vert';
console.log(vert);   

but I get this output instead of the original content of my file:

data:application/octet-stream;base64,YXR0cmlidXRlIHZlYzQgYV9wb3NpdGlvbjsKYX…A9IHVfbWF0cml4ICogYV9wb3NpdGlvbjsKICB2X3RleGNvb3JkID0gYV90ZXhjb29yZDsKfQo=

I'm not a very confortable with Webpack (and that's why I love create-react-app).
I mean I know that webpack use many "loaders" etc but I don't really know how they work.

Should I eject and add custom loaders ? (all that I DONT want to do)

Or is there a way to import file as a simple string ?
With .vert, .frag, .glsl or other extension ?

[email protected]
[email protected]
[email protected]

Thanks

[gaearon]

If you need it as a string, could you just write a JS file exporting a string?

export default `
attribute vec4 a_position;
attribute vec2 a_texcoord;
// ...
`;

In CRA’s setup, when you import an unrecognized file, you’ll get its URL (which may be a data URL when it’s small enough and inlined). This is useful for media files, but not useful for shaders.

Alternatively, you can npm run eject and then use any custom Webpack loaders (I think raw-loader might work for your use case).

I hope this helps!

[FranckErnewein]

Thank you for your answer

It's not very convenient to maintain shader's code as a string.
But I understand that it's not common to use shaders in a React application.

[odGit]

For anyone still looking, It is possible to load shaders from a file with raw-loader and glslify-loader. Glslify supports .vert, .frag, .glsl

const vertexShader = require('raw-loader!glslify-loader!../PATH_TO_SHADER/my_shader.glsl')

[arpu]

i have this problem with this solution

Failed to compile
./src/components/material-displacement.js
Line 11: Unexpected '!' in 'raw-loader!glslify-loader!../shaders/fragment.glsl'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax
Line 12: Unexpected '!' in 'raw-loader!glslify-loader!../shaders/vertex.glsl'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

[Timer]

@arpu you must eject to use that solution

[arpu]

@Timer ok i will eject thx!

[arpu]

same problem after eject

[arpu]

ok i can add this as loader after eject but this was not the idea with the raw-loader

[Timer]

I'm not sure how any of this works so you'll have to defer to @odGit. If you just want the raw text, I'd un-eject and follow advice given here: #1517 (comment).

[arpu]

#1944
this should wor disable the eslint
`
/* eslint import/no-webpack-loader-syntax: off */
import * as fragmentShader from '!raw-loader!glslify-loader!../shaders/fragment.glsl';

/* eslint import/no-webpack-loader-syntax: off */
import * as vertexShader from '!raw-loader!glslify-loader!../shaders/vertex.glsl';
`