Sketch management setup for ThreeJS Made for "Intro to shaders" email course.
In src/sketches there is one glsl file per lesson, this is where you code.
And in src/lessons-final-sketches there is the final result of all the lessons for reference.
Follow along with the email course signup!
If you are interested about learning or exploring shaders, 3d, or creative coding, check out my weekly newsletter. We've got new resources/demos/articles each week.
yarn install
yarn dev
OR
npm install
npm run dev
- Create a new sketch in the sketch file. (if not using the existing)
- Done. Create your fullscreen fragment shader!
| file | Description |
|---|---|
| sketches/*.glsl | Any file.glsl inside sketches is considered an sketch. Indexes are optional but recomended |
| lessons-final-sketches/*.glsl | Final result of all the lessons in the course. These files are not used as actual sketches |
| demo.js | The meat of the demo |
| rendering.js | All the threeJS rendering |
| utils.js | Functions manage the sketch setup. |
| keybind | Description |
|---|---|
| ArrowLeft/ArrowRight | Change between sketches |
- Uses ThreeJS RawShader to avoid incorrect line numbers on errors. So, automatic shader stuff is not added
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
Made for Offscreen Canvas By Daniel Velasquez @Anemolito
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent