mere / browserify-shader Goto Github PK
View Code? Open in Web Editor NEWsuper simple shader loader plugin for browserify
License: MIT License
super simple shader loader plugin for browserify
License: MIT License
Not horribly. Just confusingly.
Currently, the page at https://www.npmjs.com/package/browserify-shader contains the following text:
super simple browserify transform for loading webgl shaders
###Installation:
npm install browserify-shaders
Note the trailing 's' in the Installation
instruction's name for the module.
It took me a while to figure out that the sourcemap mapping issue i had was due to browserify-shader.
This is my gulp task:
var bundler = browserify('./www/js/app/main.js', {
debug: true
});
if (watch) {
bundler = watchify(bundler);
bundler.on('update', function(){ bundle(bundler) });
bundler.on('log', function(message){ $.util.log(message) });
}
bundler.transform(
babelify.configure({
sourceMapRelative: 'www/js',
presets: ['es2015'],
plugins: ['transform-class-properties']
})
);
bundler.transform('browserify-shader');
bundler.bundle()
.on('error',notifier)
.pipe( source('main.bundle.js') )//vinyl-source-stream
// .pipe(buffer())
// .pipe(sourcemaps.init({loadMaps: true }))
// .pipe( sourcemaps.write('./'))
.pipe(gulp.dest('./www/js/'));
but then i would get this
var crossFadeMaterial = new THREE.ShaderMaterial({
uniforms:{
uTexA:{
type:'t',
value:null
},
uTexB:{
type:'t',
value:null
},
uFade:{
type:'f',
value:0
}
},
vertexShader: require('./crossFade.vert')(),
fragmentShader: require( './crossFade.frag')()
});
export default class CrossFadePlane extends THREE.Mesh {
constructor(){
super( pg , crossFadeMaterial.clone() );
console.log('foo',this);
}
...
Removing all calls to require('someShader') mapped everything correctly.
I'm unable to get this working with this glsl file: https://github.com/ngokevin/kframe/blob/master/components/sun-sky/shaders/vertex.glsl
browserify -t [ browserify-shader ] public/packages.js
browserify -t [ browserify-shader --parameterize=true ] public/packages.js
node_modules/aframe-sun-sky/shaders/vertex.glsl:1
varying vec3 vWorldPosition;
^
ParseError: Unexpected token
I'm using Browserify 13.1.1.
A file named 'mymodules.color.js' does match for the extension "c"
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.