fand

precision mediump float;
uniform float time;
uniform vec2 resolution;
uniform sampler2D video1;
uniform sampler2D video2;
uniform sampler2D video3;

vec2 rotate(in vec2 p, in float t) {
    return mat2(
        sin(t), cos(t),

fand

/*{
    "pixelRatio": 0.5,
    "vertexCount": 1000,
    "vertexMode": "TRI_FAN",
    "PASSES": [{
        "TARGET": "renderBuffer",
        "vs": "./particle.vert",
    }, {
    }],
}*/

fand

はじめようGLSL

会社の朝会でこういう発表しました https://www.youtube.com/watch?v=gFIPZUWY_xg

これをハンズオンします

まずは GLSL sandbox を開きます

http://glslsandbox.com/

fand

{
    "global": {
        "check_for_updates_on_startup": true,
        "show_in_menu_bar": false,
        "show_profile_name_in_menu_bar": false
    },
    "profiles": [
        {
            "complex_modifications": {
                "parameters": {

fand

GLSL uniform values conversion table

This is a conversion table for uniform values on these websites / environments.

• Shadertoy
• GLSL Sandbox
• The book of shaders
• Kodelife
• filters
• ISF

fand

vec3 color(in vec2 p) {
  return vec3(p.x, p.y, p.x + p.y);
}
#pragma glslify: export(color)

fand

glslify-bundle git/master
❯ npm i
npm WARN deprecated standard-format@1.6.10: standard-format is deprecated in favor of a built-in autofixer in 'standard'. Usage: standard --fix
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN lifecycle The node binary used for scripts is /Users/amagitakayosi/.anyenv/envs/nodenv/shims/node but npm is using /usr/local/Cellar/node/7.10.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
npm WARN prefer global node-gyp@3.6.1 should be installed with -g

> gl@2.1.5 install /Users/amagitakayosi/src/github.com/fand/glslify-bundle/node_modules/gl
> prebuild --download

fand

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
uniform sampler2D backBuffer;
#define PI 3.141592

fand

void main(void){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    
    // Divide the space in 4
    st = tile(st,4.);
    color += vec3(box(st,vec2(.96),0.01));
    
    st = rotate2D(st,PI*0.25);

fand

❯ npm install -g webgl-workshop --verbose
npm info it worked if it ends with ok
npm verb cli [ '/usr/local/Cellar/node/7.9.0/bin/node',
npm verb cli   '/usr/local/bin/npm',
npm verb cli   'install',
npm verb cli   '-g',
npm verb cli   'webgl-workshop',
npm verb cli   '--verbose' ]
npm info using npm@4.2.0
npm info using node@v7.9.0