Skip to content

Robpayot/risograph-grain-shader

Repository files navigation

Risograph grain effect in Three.js

Learn two ways of applying a creative grain effect to 3D elements in Three.js.

Image Title

Article on Codrops

Demo 1

Demo 2

The demos show two ways of creating a risograph 2D grain effect reacting to light reflection on 3D objects using Three.js. The first way is using a custom shader (fragment and vertex). The second way is reusing the MeshLambertMaterial shader and applies 2D grain effect on the fragment shader, it's also using a transparent effect.

Installation

Install dependencies:

npm install

Compile the code for development and start a local server:

npm run start

Create the build:

npm run build

Credits

Misc

Follow Robin Payot: Twitter, GitHub

Follow Codrops: Twitter, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops

About

Light grain shader codrops tutorial

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published