https://github.com/akira-cn/glsl-doodle
Drawing patterns with glsl shaders on modern browsers.
https://github.com/akira-cn/glsl-doodle
glsl glsl-shaders pattern webgl
Last synced: 5 months ago
JSON representation
Drawing patterns with glsl shaders on modern browsers.
- Host: GitHub
- URL: https://github.com/akira-cn/glsl-doodle
- Owner: akira-cn
- License: other
- Created: 2019-05-23T10:31:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-26T08:57:40.000Z (over 3 years ago)
- Last Synced: 2025-03-11T07:27:05.349Z (about 1 year ago)
- Topics: glsl, glsl-shaders, pattern, webgl
- Language: GLSL
- Homepage: https://doodle.webgl.group/
- Size: 13.7 MB
- Stars: 60
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# glsl-doodle
Drawing patterns with glsl shaders on modern browsers.
https://doodle.webgl.group/
## Usage
From CDN:
```html
#ifdef GL_ES
precision mediump float;
#endif
#pragma include <graphics>
#pragma include <color>
#pragma include <pattern>
uniform vec2 dd_resolution;
uniform vec2 dd_randseed0;
void main() {
vec2 st = gl_FragCoord.xy / dd_resolution;
// st = polar(st);
vec2 grid = vec2(10, 10);
vec2 idx = grid_index(st, grid);
st = grid_xy(st, grid);
box2 box = create_box();
box = scale(box, center(box), vec2(random(idx, 0.1, 0.9)));
st = box_quad(st, box);
float pct = sdf_rect(st, vec2(0), 1.0, 1.0);
color(fill(pct, 0.0), random3(idx + dd_randseed0));
}
```
With external resource:
```html
```
From NPM:
```bash
npm i glsl-doodle --save
```
```js
import Doodle from 'glsl-doodle';
(async function () {
const doodle = new Doodle();
const program = await doodle.load('https://raw.githubusercontent.com/akira-cn/glsl-doodle/master/demos/preview/grids/index.glsl');
doodle.useProgram(program);
doodle.render();
}());
```
For more information, please visit https://doodle.webgl.group/.