mentos1386 / ts-shader-loader Goto Github PK

This project forked from grieve/webpack-glsl-loader

A webpack loader for glsl shaders - includes support for nested imports.

TypeScript 64.71% GLSL 9.80% JavaScript 24.63% HTML 0.87%

ts-shader-loader's Introduction

Webpack loader for GLSL shaders

A glsl shader loader for webpack, includes support for nested imports, allowing for smart code reuse among more complex shader implementations. The shader is returned as a string.

Why fork

I had a problem using other webpack shader loaders with typescript. While i was investigating what is the problem, i forked and tried to make my version work with typescript. Other than support with typescript, it has no other benefits.

Quick Guide

1. Install

npm install --save-dev ts-shader-loader

2. Add to webpack configuration

{
    module: {
        rules: [
            {
                test: /\.(glsl|vs|fs)$/,
                loader: 'ts-shader-loader'
            }
        ]
    }
}

3. Declare shared files as modules

Create glsl.d.ts file in your project and add the following in to it:

declare module "*.glsl" {
  const value: string;
  export default value;
}

declare module "*.vs" {
  const value: string;
  export default value;
}

declare module "*.fs" {
  const value: string;
  export default value;
}

4. Import shaders

import myShader from './myShader.glsl';

console.log(myShader);

Includes

This loader supports #include "path/to/shader.glsl" syntax, which you can use inside your shaders.

Example

Example project structure:

src/
---- ts/
---- ---- main.ts
---- shaders/
---- ---- includes/
---- ---- ---- perlin-noise.glsl
---- ---- fragment.glsl

If we import fragment.glsl shader inside main.ts:

import shader from '../shaders/fragment.glsl';

We can have that shader include other .glsl files inline, like so:

#include "./includes/perlin-noise.glsl";

N.B. all includes within .glsl are relative to the file doing the importing.

Imported files are parsed for #include statements as well, so you can nest imports as deep as you'd like.

Imported files are inserted directly into the source file in place of the #include statement and no special handling or error checking is provided. So, if you get syntax errors, please first check that shader works as one contiguous file before raising an issue.

TODO

Deduplicate imports, to prevent code clobbering and conflicts at runtime

ts-shader-loader's People

Contributors

Stargazers

Watchers

Forkers

arthurmariani louisfoster pascal-so dima1034 ludwigthepig phiiil

ts-shader-loader's Issues

#include throwing error

Hello,

First, thanks for the wonderful package!

I have an include statement at the beginning of a shader file, but when the bundle is loaded in the browser, I am getting the following error:

ERROR: 0:32: 'include' : invalid directive name

The line in the shader looks like this:
#include "./common.glsl";

the shader file common.glsl is located in the same folder as the importing shader file.

What am I doing wrong?

I am using three.js

Thanks,
John

Bug with Webpack 5

Hi there - There seems to be a bug in the latest version of the package. I'm using it with Webpack 5.

ERROR in ./src/components/models/torus/torus.vs
Module build failed (from ./node_modules/ts-shader-loader/lib/index.js):
Error: Cannot find module 'fs/promises'
Require stack:
-/node_modules/ts-shader-loader/lib/index.js
- /node_modules/loader-runner/lib/loadLoader.js
- /node_modules/loader-runner/lib/LoaderRunner.js
- /node_modules/webpack/lib/NormalModuleFactory.js

I haven't looked into the error to far yet, but reverting to 1.0.6 fixes it, though NPM Audit notes that there is a security issue with a dependency.

This is potentially related [webpack/webpack-cli/issues/1612]

Is this supposed to work with Typescript?

If it's a JS to import the shader works fine. But if it's a typescript file I get Cannot find module './shader.glsl' or its corresponding type declarations.ts(2307)

How would I rewrite this require statement in this shader

Hello,
I have a shader that that is using glslify to load a shader in the node_modules folder. I am configuring my react project to have Webpack to use ts-shader-loader. I assume I have to move the shader string into a separate file ending with glsl, what do I do about the #pragma statement?

import glsl from 'babel-plugin-glsl/macro';

      fragmentShader: glsl`
      #pragma glslify: cnoise3 = require(glsl-noise/classic/3d.glsl) 
      uniform float time;
      uniform vec3 colorStart;
      uniform vec3 colorEnd;
      varying vec2 vUv;
      void main() {
        vec2 displacedUv = vUv + cnoise3(vec3(vUv * 10.0, time * 0.1));
        float strength = cnoise3(vec3(displacedUv * 10.0, time * 0.2));
        float outerGlow = distance(vUv, vec2(0.5)) * 2.0 - 0.5;
        strength += outerGlow;
        strength += step(-0.2, strength) * 0.6;
        strength = clamp(strength, 0.0, 1.0);
        vec3 color = mix(colorStart, colorEnd, strength);
        gl_FragColor = vec4(color, 1.0);
      }`

conflict with WebGL-GLSL-Editor

racz16/WebGL-GLSL-Editor#16

when using WebGL-GLSL-Editor VSCode extension and "ts-shader-loader" in line import statement "@import ./file;" all variables declared above the @ statement are greyed out and receive "variable is never used"

your es6 implementation is the best of the shader loaders and would be great to see it work with the GLSL extension

Can't get example to work with #include

This looks like a really useful project, but I can't figure out how to get it to work. Here's what I tried:

git clone https://github.com/mentos1386/ts-shader-loader.git
cd ts-shader-loader/example/

# In the example's `package.json` I replaced the local import path for ts-shader-loader
# with "2.0.1" instead of a file path, and deleted the existing `package-lock.json` file.

npm i
npm run build:prod
grep "precision mediump" dist/main.js

so far everything seems to work, the glsl file is embedded in the compilation output.

Afterwards I tested the #include functionality by prepending #include "./triangle.vs.glsl"; as the first line in the example's triangle.fs.glsl, and re-running npm run build:prod, but the embedded glsl file still contains the include statement. It looks like the glsl file is not being processed by the loader but rather just passed through as it is.

Opening the build output in firefox also gives me this error in the console:

versions

$ node -v
v16.18.0
$ npm -v
8.19.2

Use #include instead of @import?

See grieve#6.

I believe it was a mistake to call this behavior "import", but maybe that's just me...