https://github.com/phucbm/shaders
🚀 My journey to the world of Shaders
https://github.com/phucbm/shaders
glsl shaders threejs webgl
Last synced: 3 months ago
JSON representation
🚀 My journey to the world of Shaders
- Host: GitHub
- URL: https://github.com/phucbm/shaders
- Owner: phucbm
- Created: 2021-08-16T16:43:46.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-22T16:03:46.000Z (almost 5 years ago)
- Last Synced: 2025-03-17T10:22:36.573Z (over 1 year ago)
- Topics: glsl, shaders, threejs, webgl
- Language: JavaScript
- Homepage: https://phucbm.github.io/shaders/
- Size: 119 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 My journey to the world of Shaders
This repo is where I store exercises and recaps when reading [The Book of Shaders](https://thebookofshaders.com/).
## Exercises
### 00 - Create Shaders with Three.js
In this exercise, I created an HTML `👋 Hello world!` page for Shaders using [Three.js](https://threejs.org/). To summarize:
> 💡 Shaders are not JavaScript, we store them inside a `` tag just to get it as plain text later on. The browser will not run the code inside due to `type="x-shader/x-vertex"` and `type="x-shader/x-fragment"` are not the right type for JavaScript.
```html
<!-- Vertex Shader -->
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
uniform float u_time; // Time in seconds since load
void main() {
gl_FragColor = vec4( abs(sin(u_time)), 0.0, 0.0, 1.0 );
}
```
> 🎥 In Three.js, we use [THREE.ShaderMaterial()](https://threejs.org/docs/index.html?q=shader#api/en/materials/ShaderMaterial) to render Shaders.
Read more at chapter
📒 [03 - Uniforms](https://thebookofshaders.com/03/)
and
📗 [04 - Running your shader](https://thebookofshaders.com/04/)
💎 [Result](exercises/00/)
### 01 - Algorithmic drawing
📓 [05 - Algorithmic drawing](https://thebookofshaders.com/05/)
- https://www.iquilezles.org/www/articles/functions/functions.htm
- https://renderman.pixar.com/learn
- http://www.flong.com/archive/texts/code/shapers_poly/
💎 [Result](exercises/01/)
### 02 - Shape Functions
https://thebookofshaders.com/06/