https://github.com/mattdesl/three-glslify-example
a simple example of ThreeJS with glslify
https://github.com/mattdesl/three-glslify-example
Last synced: 8 months ago
JSON representation
a simple example of ThreeJS with glslify
- Host: GitHub
- URL: https://github.com/mattdesl/three-glslify-example
- Owner: mattdesl
- License: mit
- Created: 2015-04-14T19:20:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-27T01:11:33.000Z (almost 9 years ago)
- Last Synced: 2025-03-29T07:50:35.938Z (8 months ago)
- Language: GLSL
- Homepage: http://mattdesl.github.io/three-glslify-example/
- Size: 752 KB
- Stars: 79
- Watchers: 7
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-creative-coding - Three glslify example - Example on how to use three.js with glslify. (Learning Resources / Articles • Tutorials)
- fucking-awesome-creative-coding - Three glslify example - Example on how to use three.js with glslify. (Learning Resources / Articles • Tutorials)
- awesome-creative-coding - Three glslify example - Example on how to use three.js with glslify. (Learning Resources / Articles • Tutorials)
README
# three-glslify-example
[](http://github.com/badges/stability-badges)
[(click for demo)](http://mattdesl.github.io/three-glslify-example/)
A simple example of modular shaders in ThreeJS with [glslify](https://github.com/stackgl/glslify). Uses [glsl-halftone](https://github.com/stackgl/glsl-halftone), [glsl-hash-blur](https://github.com/stackgl/glsl-hash-blur), and [glsl-checker](https://github.com/mattdesl/glsl-checker).
To run:
```sh
# clone repo
git clone https://github.com/mattdesl/three-glslify-example.git
cd three-glslify-example
# install deps
npm install
# start dev server
npm run start
```
Now open [http://localhost:9966/](http://localhost:9966/) and start making changes to [index.js](index.js), [frag.glsl](frag.glsl) or [vert.glsl](vert.glsl) to see changes reloaded in the browser.
To build the production release:
```sh
npm run build
```
This will create a `bundle.js` for your static site.
See the `scripts` field of [package.json](package.json) to integrate this into your own workflow. This is also specifying browserify transforms with a `"browserify"` field (not recommended for modules, but useful for applications), and Babelify configuration with a [.babelrc](./.babelrc) file.
## License
MIT, see [LICENSE.md](http://github.com/mattdesl/three-glslify-example/blob/master/LICENSE.md) for details.