1566240473 shader ast, broken test

a-test.ts

import { clearDOM } from '@thi.ng/hdom'
import { Vec } from '@thi.ng/vectors'
import { buildSketch3d } from './sketch-skelton'
import { adaptDPI, CanvasHandlers } from '@thi.ng/hdom-components'
import { compileModel, draw, ModelSpec, shader, quad } from '@thi.ng/webgl'
import {
  defMain,
  assign,
  FLOAT0,
  FLOAT1,
  vec4,
  Vec2Sym,
  $xy,
  $x,
  $y,
  defn,
  ret,
  sym,
  builtinCall,
  Prim,
  Term,
  add,
  div,
  vec3,
  mul,
  sub,
  Vec3Sym,
  vec2,
  fract,
  $,
  dot,
  $z,
} from '@thi.ng/shader-ast'

const primOp2 = (name: string) => <A extends Prim, B extends A>(a: Term<A>, b: Term<B>) =>
  builtinCall(name, a.type, a, b)

export const atan2 = primOp2('atan')

const canvasEdge = 500
document.title = 'plane'

const N22 = defn('vec2', 'N22', ['vec2'], p => {
  let a: Vec3Sym
  return [
    (a = sym(fract(mul($(p, 'xyx'), vec3(123.34, 234.34, 345.65))))),
    assign(a, add(a, dot(a, add(a, 34.45)))),
    ret(fract(vec2(mul($x(a), $y(a)), mul($y(a), $z(a))))),
  ]
})

function onDraw(realSize: Vec) {
  let model: ModelSpec

  const handlers: {
    init: CanvasHandlers<WebGLRenderingContext>['init']
    update: CanvasHandlers<WebGLRenderingContext>['update']
  } = {
    init: (_, gl) => {
      model = compileModel(gl, {
        ...quad(false),

        shader: shader(gl, {
          vs: (gl, _, ins) => [
            defMain(() => [assign(gl.gl_Position, vec4(ins.position, FLOAT0, FLOAT1))]),
          ],
          fs: (gl, unis, _, outs) => [
            defMain(() => {
              let uv: Vec2Sym
              let col: Vec3Sym

              return [
                (uv = sym(
                  div(
                    sub(mul(2, $xy(gl.gl_FragCoord)), $xy(unis.resolution)),
                    $y(unis.resolution),
                  ),
                )),
                (col = sym(vec3($x(N22(uv))))),
                assign(gl.gl_FragColor, vec4(vec3(col), 1.0)),
              ]
            }),
          ],
          attribs: {
            position: 'vec2',
          },
          uniforms: {
            resolution: 'vec2',
          },
        }),
      })

      const w = gl.drawingBufferWidth
      const h = gl.drawingBufferHeight
      model.uniforms!.resolution = [w, h]

      const bg = 1
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
      gl.clearColor(bg, bg, bg, 1)
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      draw(model)
    },
    update: (el, _, __, ___, frame) => {
      adaptDPI(el, realSize[0], realSize[1])
    },
  }

  return handlers
}

export const sketch = buildSketch3d({
  size: [canvasEdge, canvasEdge],
  onSave: () => console.log('not implemented'),
  onDraw,
})

if (process.env.NODE_ENV !== 'production') {
  const hot = (<any>module).hot
  hot &&
    hot.dispose(() => {
      clearDOM(document.getElementById('app'))
    })
}

result.md

vec2 N22(vec2 p) {
	vec3 a = fract(p.xyx * vec3(123.34, 234.34, 345.65));
    a += dot(a, a + 34.45);
    return fract(vec2(a.x * a.y, a.y * a.z));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	  vec2 uv = (2. * fragCoord - iResolution.xy) / iResolution.y;
    
    float m = 0.;
    float t = iTime * .2;
    
    float minDist = 100.;
    float cellIndex = 0.;
    for(float i=0.; i<50.; i++) {
    	vec2 n = N22(vec2(i));
        vec2 p = sin(n * t);
        
        float d = length(uv - p);
        m += smoothstep(.05, .01, d);
        
        if(d < minDist) {
        	minDist = d;
            cellIndex = i;
        }
    }
    
    //vec3 col = vec3(cellIndex / 50.);
    vec3 col = vec3(minDist);
    fragColor = vec4(col, 1.0);
}

/**********************************************************************************************/

vec2 N22(vec2 p) {
	vec3 a = fract(p.xyx * vec3(123.34, 234.34, 345.65));
    a += dot(a, a + 34.45);
    return fract(vec2(a.x * a.y, a.y * a.z));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	vec2 uv = (2. * fragCoord - iResolution.xy) / iResolution.y;
    
    float m = 0.;
    float t = iTime * .2;
    
    float minDist = 100.;
    float cellIndex = 0.;
    vec2 cellIndex2 = vec2(0);
    vec3 col = vec3(0.);
    
    if(false) {
    	for(float i=0.; i<50.; i++) {
            vec2 n = N22(vec2(i));
            vec2 p = sin(n * t);

            float d = length(uv - p);
            m += smoothstep(.05, .01, d);

            if(d < minDist) {
                minDist = d;
                cellIndex = i;
            }
        }
    } else {
        uv *= 3.;
        
        vec2 gv = fract(uv) - .5;
        vec2 id = floor(uv);
        
        col.rg = 0.5 + 0.5 * id * 0.1;
        
        for(float y=-1.; y<=1.; y++) {
        	for(float x=-1.; x<=1.; x++) {
                vec2 offs = vec2(x, y);
                vec2 n = N22(vec2(id + offs));
                vec2 p = offs + sin(n * t) * .5;
                p -= gv;
                float ed = length(p);
                float md = abs(p.x) + abs(p.y);
                float d = mix(ed, md, sin(iTime)* .5 + 0.5) ;
                
                if(d < minDist) {
                    minDist = d;
                    cellIndex2 = id + offs;
                }
            }
        }
        
        col = vec3(minDist);
        //col.rg = cellIndex2 * .1; 
    }
    
    
    fragColor = vec4(col, 1.0);
}