q5play
    Preparing search index...

    Function createShader

    • ⚡ Creates a shader that q5's WebGPU renderer can use.

      If type is not specified, this function customizes a copy of the default shapes shader, which affects these functions: plane, line, and endShape.

      For more information on the vertex and fragment function input parameters, data, and helper functions made available for use in your custom shader code, read the "Custom Shaders in q5 WebGPU" wiki page.

      Parameters

      • code: string

        WGSL shader code excerpt

      • Optionaltype: string

        defaults to "shapes"

      • Optionaldata: {} | Float32Array<ArrayBufferLike>

        only for use with fully custom shaders

      Returns GPUShaderModule

      a shader program

      await Canvas(200);

      let wobble = createShader(`

      fn vertexMain(v: VertexParams) -> FragParams { var vert = transformVertex(v.pos, v.matrixIndex);

      let i = f32(v.vertexIndex) % 4 * 100; vert.x += cos((q.time + i) * 0.01) * 0.1;

      var f: FragParams;
f.position = vert;
f.color = vec4f(1, 0, 0, 1);
return f;

      }`);

      q5.draw = function () { clear(); shader(wobble); plane(0, 0, 100); };

      await Canvas(200);

      let stripes = createShader(`
      @fragment
      fn fragMain(f: FragParams) -> @location(0) vec4f {
      	let r = cos((q.mouseY + f.position.y) * 0.2);
      	return vec4(r, 0.0, 1, 1);
      }`);

      q5.draw = function () {
      	shader(stripes);
      	triangle(-50, -50, 0, 50, 50, -50);
      };

    Settings

    Member Visibility