regl 形状绘制 简单花瓣

原文链接: regl 形状绘制 简单花瓣

上一篇: regl 圆形色盘

下一篇: regl 随机噪声 实现烟雾或云

https://thebookofshaders.com/07/?lan=ch

import Regl from "regl";
export default async () => {
  const regl = Regl();
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1,
  });
  regl({
    frag: `
    precision mediump float;
    uniform float u_time;
   
    void main () {
      vec2 st = gl_PointCoord.xy;
      vec3 color = vec3(0.0);
      vec2 pos = vec2(0.5)-st;
      float r = length(pos)*2.0;
      float a = atan(pos.y,pos.x);
      float f = cos(a*3.);
      // f = abs(cos(a*3.));
      f = abs(cos(a*2.5))*.5+.3;
      // f = abs(cos(a*12.)*sin(a*3.))*.8+.1;
      // f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5;
  
      color = vec3( 1.0 -smoothstep(f,f+0.02,r),r,f );
      gl_FragColor = vec4(color,1.0);
    }`,
    vert: `
    precision mediump float;
    attribute vec2 position;
    void main () {
      gl_Position = vec4(position, 0, 1);
      gl_PointSize =  500.0;
    }`,
    attributes: {
      position: [[0, 0]],
    },
    primitive: "points",
    count: 1,
  })();
};