ShaderViewer

Preprocess GLSL shader code using @shaderfrog/glsl-parser.

Feature

• Preprocess directives: #define, #if, #ifdef, #elif, #else, #endif, #if defined, etc.
• Macro expansion with function-like macros
• Conditional compilation
• Built with TypeScript

Chrome Extensions

Chrome Extensions.crx
This extension can automatically detect the shader of the current page, then preprocess and show it in the panel.

Online Demo

https://06wj.github.io/shaderViewer/demo/

Module Usage

Import the compiler

const { compiler } = require('shader-compiler');

Preprocess shader code

const options = {
    constants: {
        MY_DEFINE: '1',
        MAX_LIGHTS: '4'
    }
};

compiler.preprocess(code, function(error, result) {
    if (error) {
        console.error('Preprocessing error:', error);
    } else {
        console.log('Preprocessed code:', result);
    }
}, options);

Example

const { compiler } = require('shader-compiler');

const shaderCode = `
#define PI 3.14159
#ifdef GL_ES
precision mediump float;
#endif

void main() {
    float angle = PI * 2.0;
    gl_FragColor = vec4(1.0);
}
`;

compiler.preprocess(shaderCode, (error, result) => {
    console.log(result);
});

API

compiler.preprocess(code, callback, options)

Preprocesses GLSL shader code.

Parameters:

• code (string): The GLSL shader source code to preprocess
• callback (function): Callback function (error, result) => void
  • error (string|null): Error message if preprocessing failed, null otherwise
  • result (string|null): Preprocessed code if successful, null otherwise
• options (object): Optional preprocessing options
  • constants (object): Custom defines/macros, e.g., { MY_DEFINE: '1' }

Dev

• Run npm install to install dependencies
• Run npm run dev to watch and develop
• Run npm run build to build

License

MIT License