glslify / glslify-loader Goto Github PK
View Code? Open in Web Editor NEW:floppy_disk: glslify loader module for webpack
Home Page: http://glslify.github.io/glslify-loader/
License: Other
:floppy_disk: glslify loader module for webpack
Home Page: http://glslify.github.io/glslify-loader/
License: Other
I can't figure out how to use glsify and glsify-loader. I don't understand why i have to transform the entire library to use it. How the heck do i use this with webpack?
my webpack config has this:
module: {
loaders: [
{
test: /\.(glsl|frag|vert)$/,
loader: 'raw', exclude: /node_modules/
},
{
test: /\.(glsl|frag|vert)$/,
loader: 'glslify', exclude: /node_modules/
}
]}
my main.js file looks like this:
var canvas = document.body.appendChild(document.createElement('canvas'))
var gl = require('gl-context')(canvas, function(){})
import glslify from 'glslify'
//both files are in the same directory as main.js
var shader = glslify({
vert: './index.vert',
frag: './index.frag'
})(gl)
but i am getting this error:
Uncaught Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform: https://github.com/substack/node-browserify#browserifytransform
Hi.
I'm getting an error:
app.js:44688 THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders� THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: Missing main()
Webpack rules:
webpack({
mode: "development",
output: {
filename: "app.js"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader',
'glslify-loader'
]
}
]
}
})
Shader files (.frag & .vert) are valid, because when I use them inline they work as expected. And they definitely have main functions.
Any ideas what am I doing wrong ?
Is this package still maintained?
Are there any new informations for webpack4?
Would be great to update the Readme.
Thank you!
Now I'm working on a react component for rendering a graph visualization with stack.gl. I forked this boilerplate from here: github.com/survivejs/react-component-boilerplate
It has react, jsx, ES6, webpack. I'd like to load shaders using glslify-loader: github.com/stackgl/glslify-loader
But I've tried several way to load the shader,but I got a lot of error messages in the console, ex: should use browserify to transform ... no available loader .. compile error: 0:1...
Here's the repo I've created for debugging: https://github.com/javidhsueh/react-test
Please help me to figure how to use glslify with webpack.
Please see my question on stackoverflow
http://stackoverflow.com/questions/35314177/cant-use-glslify-loader-to-load-shader-files-in-webpack
Any idea how this would work? If it's out of the scope, lmk and I'll write a diff loader and publish it.
I noticed what appears to be a bug when using this syntax:
import vertexShade from 'raw-loader!glslify-loader!./VertexShader.vert'
console.log(vertexShader)
would print
#define GLSLIFY 1
export default "#define GLSLIFY 1\nvarying vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}";
Notice that it includes #define GLSLIFY 1
twice, and export default
which makes it invalid GLSL. This would cause the shader compilation to fail.
Here is my webpack config:
rules: [
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader',
'glslify-loader'
]
},
]
I came across this in the documentation for raw-loader:
Beware, if you already define loader(s) for extension(s) in webpack.config.js you should use:
import css from '!!raw-loader!./file.txt'; // Adding `!!` to a request will disable all loaders specified in the configuration
When I added it to my code, it worked properly.
import vertexShader from '!!raw-loader!glslify-loader!./VertexShader.vert'
console.log(vertexShader)
now prints:
#define GLSLIFY 1
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
Now the shader compiles successfully. Not sure if this was an issue in my configuration somehow, and I'm not sure what to title this issue, but hope it helps someone.
webpack.js
{
test: /\.(glsl|frag|vert)$/,
use: ['raw-loader',
{
loader: 'glslify-loader', options: {
transform: [
['glslify-hex', { post: true }],
]
},
}],
exclude: /node_modules/
},
glsl
void main() {
gl_FragColor = #ff0000ff;
}
js
console.log(require("../glsl/post/test2.glsl"));
in console is also like that
void main() {
gl_FragColor = #ff0000ff;
}
The tansform does not work!
ps. I already installed npm depend package.
We have a number of helper functions, libs that we manually paste into our shaders each time. Would be great to be able to include them instead and have the loader merge them in.
The loader works with earlier version of glslify, but glslify.bundle is no longer a method for the glslify package. Do you have suggestions for a work-around?
As per glslify/glslify#57, making the glslify-loader work with the same API as the browserify transform will be nice so that code can run in both places. :)
For example, with Webpack we can write code like this:
var VertexShader = require('./VertexShader.glsl')
var FragmentShader = require('./FragmentShader.glsl')
var shaders = {
vertex: VertexShader,
fragment: FragmentShader
};
module.exports = shaders;
but we currently can't do
var glslify = require('glslify');
var shaders = {
vertex: glslify('./VertexShader.glsl'),
fragment: glslify('./FragmentShader.glsl')
};
module.exports = shaders;
This change will allow the latter (would the first method still work? Maybe that can default to something similar to the latter but simply no options are passed to glslify).
Hey I'm one of the webpack core team maintainers. I was wondering if you would like our @webpack/contrib-team to help you maintain this if interested.
Thanks for your work.
I am using webpack 2, however the loader seems not to work.
I always get a Shader couldn't compile error.
If I have this webpack config:
module.exports = {
resolve: {
extensions: [ "", ".js", ".jsx", ".glsl" ]
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.glsl$/, loader: 'glslify!raw' },
],
},
}
compiling a project with .glsl files has error like this:
> webpack --progress --colors src/index.js react-famous.js
Hash: a7cef25085d319d4b4ad
Version: webpack 1.12.1
Time: 2166ms
Asset Size Chunks Chunk Names
react-famous.js 1.42 MB 0 [emitted] main
+ 319 hidden modules
ERROR in ./~/famous/webgl-shaders/FragmentShader.glsl
Module build failed: Error: Final loader didn't return a Buffer or String
at DependenciesBlock.onModuleBuild (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/trusktr/src/pilwon+react-famous/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at evalmachine.<anonymous>:334:14
at /home/trusktr/src/pilwon+react-famous/node_modules/graceful-fs/graceful-fs.js:102:5
at FSReqWrap.oncomplete (evalmachine.<anonymous>:95:15)
@ ./~/famous/webgl-shaders/index.js 28:21-53
ERROR in ./~/famous/webgl-shaders/VertexShader.glsl
Module build failed: Error: Final loader didn't return a Buffer or String
at DependenciesBlock.onModuleBuild (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at runSyncOrAsync (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12)
at nextLoader (/home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /home/trusktr/src/pilwon+react-famous/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/trusktr/src/pilwon+react-famous/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at evalmachine.<anonymous>:334:14
at /home/trusktr/src/pilwon+react-famous/node_modules/graceful-fs/graceful-fs.js:102:5
at FSReqWrap.oncomplete (evalmachine.<anonymous>:95:15)
@ ./~/famous/webgl-shaders/index.js 27:19-49
but if I instead have this config:
module.exports = {
resolve: {
extensions: [ "", ".js", ".jsx", ".glsl" ]
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.(glsl|frag|vert)$/, loader: 'raw' },
{ test: /\.(glsl|frag|vert)$/, loader: 'glslify' },
],
},
}
then it works as expected. Any idea why that might be?
Hi!
I want to use glslify transformations like this one: https://www.npmjs.com/package/glslify-fancy-imports
Is it any way to tell the loader to pass "additional argument" when invoking the glslify command to use it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.