0.11.0 • Published 2 years ago
glsl-doodle v0.11.0
glsl-doodle
Drawing patterns with glsl shaders on modern browsers.
Usage
From CDN:
<script src="https://unpkg.com/glsl-doodle@0.1.2/dist/glsl-doodle.js"></script>
<glsl-doodle for="myShader"></glsl-doodle>
<script id="myShader" type="x-shader/x-fragment">
#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));
}
</script>
With external resource:
<script src="https://unpkg.com/glsl-doodle@0.1.2/dist/glsl-doodle.js"></script>
<glsl-doodle src="https://raw.githubusercontent.com/akira-cn/glsl-doodle/master/demos/preview/grids/index.glsl"></glsl-doodle>
From NPM:
npm i glsl-doodle --save
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/.
0.11.0
2 years ago
0.10.0
2 years ago
0.9.0
2 years ago
0.8.0
2 years ago
0.7.0
2 years ago
0.3.0
2 years ago
0.6.2
2 years ago
0.5.0
2 years ago
0.4.1
2 years ago
0.3.1
2 years ago
0.6.0
2 years ago
0.5.1
2 years ago
0.2.1
3 years ago
0.2.7
3 years ago
0.2.6
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.0
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.1
5 years ago