cenergy / glsl-show

glsl-doodle

Drawing patterns with glsl shaders on modern browsers.

https://doodle.webgl.group/

Usage

From CDN:

<script src="https://unpkg.com/[email protected]/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/[email protected]/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/.

"start": "webpack-dev-server --env.server=examples --watch-poll", "docz:dev": "docz dev", "docz:build": "cp dist/glsl-doodle.js doc-src/js/ && docz build", "doc": "npm run docz:build && rm -rf docs/static && cp -R .docz/dist/* docs/ && http-server docs -c-1 -p3030", "build": "rm -rf dist/ && webpack --env.production=true && cp dist/glsl-doodle.js docs/js/", "demo:dev": "webpack --watch && cross-env NODE_ENV=development demosify --serve", "dev": "demosify --serve", "demo:prod": "cross-env NODE_ENV=production demosify --prod", "prepublishOnly": "npm run build", "lint": "eslint 'src/**/*.js' --fix", "test": "echo "Error: no test specified" && exit 1", "deploy": "hexo deploy"

在release\js\中要有glsl-doodle.js

"dev": "demosify --serve", "prepublishOnly": "npm run build", "deploy": "hexo deploy"