Shader Canvas

A graphics framework for specialists

Getting Started

Shader Canvas is made with Deno and intended to be used as a bundle in an HTML file that makes use of its specific Web Components tags.

3 step setup

You can begin using Shader Canvas with these 3 steps.

  1. Step 1 Start with a simple HTML file for your project:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using Shader Canvas</title>
</head>

<body>
  <shader-canvas>
    <!-- Use the shader canvas tags here -->
  </shader-canvas>
</body>
</html>
  1. Step 2 Include the Shader Canvas bundle in the HTML file
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using Shader Canvas</title>
</head>

<body>
  <shader-canvas>
    <!-- Use the shader canvas tags here -->
  </shader-canvas>


  <script type="module">
    import { ShaderCanvas } from "https://cdn.deno.land/shader_canvas/versions/v1.1.1/raw/build/shader_canvas.min.js";
  </script>
</body>
</html>
  1. Step 3 Initialize the Shader Canvas components and draw them
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using Shader Canvas</title>
</head>

<body>
  <shader-canvas>
    <!-- Use the shader canvas tags here -->
  </shader-canvas>

  <script type="module">
    import { ShaderCanvas } from "https://cdn.deno.land/shader_canvas/versions/v1.1.1/raw/build/shader_canvas.min.js";

    window.addEventListener("load", async () => {
      const c = document.querySelector("shader-canvas");
      if (c instanceof ShaderCanvas) {
        await c.initialize();
        c.draw()
      }
    })
    </script>
</body>
</html>

Using Deno

Only Deno is supported for now to use and bundle Shader Canvas in your project.

To do that use the import from the deno.land file directly:

import ShaderCanvas from "https://deno.land/x/shader_canvas@v1.1.1/shader_canvas.ts"

// your project code ...

And run your project deno bundle CLI command or equivalent on it.

Creating a scene

To create a scene in Shader Canvas you have to think of it in the low-level elements from the graphics framework that you want to draw with.

For now there is only WebGL, which means that a scene has to be made to work with the following parts:

The Shader Canvas provides the tag <webgl-canvas> to hold all of the WebGL related tags. In this tag the following container tags can be used to define each of the above parts:

Within each of these tags you create new parts for your program. Each of their children is a uniquely named new tag that you create. This new name is then referenced by other tags (if you create a buffer named "monkey-vertices" then you can reference it in a Vertex Array Object with that name).

And finally the <webgl-canvas> also has a container for the drawing instructions:

This contains an ordered list of WebGL actions to perform (Each WebGL function has its corresponding tag).

Textured rectangle

For a simple textured rectangle this means that you would need the following:

Textures

Buffers

Programs

Vertex Array Objects

Example

A working textured rectangle example of this can be read at the project GitHub repository.

It is a rework of the WebGL2Fundamentals examples with Shader Canvas.

Modules

Shader Canvas modules allows you to have reusable shader code parts and create your tags that merge WebGL functionality in each of the <webgl-canvas> parts.

To create your modules you have to think that they act like a blueprint of tags that get pasted and merged with the parent where the module tag shows.

Animation module

To begin a Shader Canvas module you need a unique name for it. This name must be a valid Web Component tag name. It must have at least one '-' character.

For this example the module is going to be named with-anim.

To declare a new module, place its unique name as a child tag of the Shader Canvas <new-modules> tag:

<shader-canvas>
  <new-modules>
    <with-anim>
      <!-- Module blueprint here -->
    </with-anim>
  </new-modules>
</shader-canvas>

Inside it, any of the <webgl-canvas> containers might be defined (<webgl-programs>, <webgl-buffers>, <webgl-textures>, <webgl-vertex-array-objects> and <draw-calls>).

If after this declaration you use this new <with-anim> tag in Shader Canvas, these containers corresponding HTML part will be copied and merged into the final <webgl-canvas> corresponding tag.

As an example, if you declare a new buffer as a child of your tag in the <new-modules>, then when the tag is used directly in <shader-canvas> it will copy that buffer into the final webgl-canvas buffers.

<shader-canvas>
  <new-modules>
    <with-anim>
      <!-- Module blueprint here -->
      <webgl-buffers>
        <my-animated-buffer>
          <buffer-data src="monkey.obj"></buffer-data>
        </my-animated-buffer>
      </webgl-buffers>
    </with-anim>
  </new-modules>

  <!--
    Using the tag outside <new-modules> merges
    its containers with the final ones on
    <webgl-canvas>
  -->
  <with-anim></with-anim>
</shader-canvas>

This works well for the main parts of the <webgl-canvas>. To have a GLSL program reusable part, that is specific to a program inside <webgl-programs>, the Shader Canvas module system provides a specific module tag:

Inside this tag, code parts of <vertex-shader>and <fragment-shader> tags can be reused in many programs.

Example

A working example of the animation module can be read at the project GitHub repository.

Like the other examples, it is a rework of the WebGL2Fundamentals examples with Shader Canvas.

ShaderCanvas API

The ShaderCanvas API consists of static functions you can call to perform actions at given key moments of the framework.

Mandatory functions

The basic and essential actions are:

These two functions must be called for Shader Canvas to render anything.

They can be seen in action in all of the provided examples.

Utility functions

Starting and stopping the drawing loop can be done with the instance functions:

You can define a drawing loop with the <draw-loop> tag.


Reference

This section lists all the new HTML elements that Shader Canvas introduces.

<active-texture>

This tag is the equivalent of the WebGL activeTexture() function.

It sets the texture pointed by the src attribute as the target for the actions defined as children.

Place tags inside this one to perform actions in the texture this tag is referencing.

The allowed children are:

The <active-texture> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <ActiveTexture>

src

A string that references a texture name.

This must be the name of a tag available in the <webgl-textures> container.

var

A string with the GLSL variable name to put this texture at.


<bind-buffer>

This tag is the equivalent of the WebGL bindBuffer() function.

Its child tags will be bound with the buffer specified by this tag "src" attribute.

The <bind-buffer> tag can be used in a <vertex-array-object> to associate variables and their contents to areas of a buffer defined in the <webgl-buffers> container.

The allowed children are:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-vertex-array-objects>
     <some-cool-vao>
       <bind-buffer src="big-raw-data">
         <!-- vertex-attrib-pointers here -->
       </bind-buffer>
     </some-cool-vao>
   <webgl-vertex-array-objects>
   <webgl-buffers>
     <!-- src references these buffer tag names -->
     <big-raw-data>
       <buffer-data src="data.json"></buffer-data>
     </big-raw-data>
   </webgl-buffers>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 3rd example - animation

The <bind-buffer> tag is meant to be used as a child of the <{{vao-name}}> custom named tag.

View Source

Attributes of <BindBuffer>

src

The bind buffer src attribute is a string that references a buffer.

This must be the name of a tag available in the <webgl-buffers> container.


<blend-func>

This tag is the equivalent of the WebGL blendFunc() function.

It sets the function WebGL uses to do the pixel blending arithmetic.

The presence of this tag automatically sets gl.enable(gl.BLEND)

No child tags allowed in <blend-func>.

The <blend-func> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <BlendFunc>

sfactor

A string specifying a multiplier for the source blending factors. The default value is gl.ONE.

Possible values:

dfactor

A string specifying a multiplier for the destination blending factors. The default value is gl.ZERO.

Possible values:


<buffer-data>

This tag is the equivalent of the WebGL bufferData() function. It loads the data at the location set by the src attribute.

The data loaded is bounded to the buffer it has as parent.

No child tags allowed in <buffer-data>.

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-buffers>
     <super-huge-buffer>
       <buffer-data src="/mesh.json"></buffer-data>
       <!-- 
          loads the `mesh.json` file and sets it as
          the data for the `super-huge-buffer`
       -->
     </super-huge-buffer>
   </webgl-buffers>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

The <buffer-data> tag is meant to be used as a child of the <{{buffer-name}}> custom named tag.

View Source

Attributes of <BufferData>

target

The buffer data target attribute that specifies the WebGL binding point.

This attribute allows the same values that the "target" parameter of the gl.bufferData() function does:

Example

<buffer-data
   target="ELEMENT_ARRAY_BUFFER"
   src="data.json">
</buffer-data>

size

The buffer data size attribute sets the size in bytes of the WebGL buffer object's data store.

This attribute is a number.

usage

The buffer data "usage" attribute that specifies the WebGL intended usage pattern of the data store for optimization purposes.

This attribute allows the same values that the "usage" parameter of the gl.bufferData() function does:

offset

The buffer data "offset" attribute that sets the offset in bytes to where the raw data starts.

This attribute is a number (defaults to 0).

src

This attribute is used to get the raw data from.

It can be a URL, a query selector, or a JSON array with the data.

If it is a query selector ("#someId"), the element textContent will be read and parsed as JSON.


<clear-color>

This tag is the equivalent of the WebGL clearColor() function.

It specifies the RGBA color values used when clearing color buffers.

No child tags allowed in <clear-color>.

The <clear-color> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <ClearColor>

red

The "red" color value, a number between 0.0 and 1.0. Defaults to 0.

green

The "green" color value, a number between 0.0 and 1.0. Defaults to 0.

blue

The "blue" color value, a number between 0.0 and 1.0. Defaults to 0.

alpha

The "alpha" color value, a number between 0.0 and 1.0. Defaults to 0.


<clear-depth>

This tag is the equivalent of the WebGL clearDepth() function.

It specifies the clear value for the depth buffer.

No child tags allowed in <clear-depth>.

The <clear-depth> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <ClearDepth>

depth

A number specifying the depth value used when the depth buffer is cleared. Default value: 1.


<clear-flags>

This tag is the equivalent of the WebGL clear() function.

It clears the WebGL buffers to their preset values.

No child tags allowed in <clear-flags>.

The <clear-color> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <ClearFlags>

mask

A string that sets the "mask" of the clear method.

This string can contain the three following strings separated by the char "|":


<clear-stencil>

This tag is the equivalent of the WebGL clearStencil() function.

It specifies the clear value for the WebGL stencil buffer.

No child tags allowed in <clear-stencil>.

The <clear-stencil> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <ClearStencil>

s

A number specifying the index used when the stencil buffer is cleared. Default value: 0.


<{{buffer-name}}>

You chose the tag name for your buffers when declaring them. The tag name is used to represent the name for the buffer. This name is then used to reference this buffer in other Shader Canvas containers and parts (like vertex array objects and draw calls).

The allowed children of a buffer are:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-buffers>
     <!--
       Create your WebGL buffers here by specifying a
       tag name that uniquely identifies them.
     -->
     <super-huge-buffer>
       <buffer-data src="/mesh.json"></buffer-data>
     </super-huge-buffer>
   </webgl-buffers>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

This custom named tag is meant to be used as a child of the <webgl-buffers> container tag.

View Source


<{{module-name}}>

You chose the tag name for your modules when declaring them.

If it happens inside the <new-modules> tag, then the module tag name is used to declare the DOM blueprint that is intended to be merged when the module tag is used elsewhere.

If it happens outside the <new-modules> tag, then the module tag name is used to merge its DOM blueprint (the child nodes it contains in the <new-modules>) at the location it is at.

The allowed children of a module are:

Example

<shader-canvas>
  <new-modules>
    <my-crazy-module>
      <!--
       Create your Shader Canvas partial code here.
      -->
    </my-crazy-module>
  </new-modules>

  <!-- merge the module code here -->
  <my-crazy-module></my-crazy-module>
</shader-canvas>

For a usable example check the 4th example - composition

This custom named tag is meant to be used as a child of the <new-modules> container tag.

View Source


<{{program-name}}>

The tag name is set by you when declaring a program. Use the tag name to represent the program name. This name is then used to reference this program in other Shader Canvas containers and parts.

The allowed children of a program are:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-programs>
     <!--
       Create your WebGL programs here by specifying a
       tag name that identifies them, and place inside
       it the vertex and fragment code
     -->
     <here-is-a-cool-program>
       <vertex-shader>
         <code>
           #version 300 es
           in vec4 a_position;
           void main() {
             gl_Position = a_position;
           }
         </code>
       </vertex-shader>
       <fragment-shader>
         <code>
           <!--
             Write the fragment shader code for the
             "here-is-a-cool-program" here.
           -->
         </code>
       </fragment-shader>
     </here-is-a-cool-program>
   </webgl-programs>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

This custom named tag is meant to be used as a child of the <webgl-programs> container tag.

View Source


<{{texture-name}}>

You chose the tag name for your textures when declaring them. This name is then used to reference this Texture in other Shader Canvas containers and parts (like draw calls).

The allowed children of a Texture are:

Example

<shader-canvas>
  <webgl-canvas>
    <webgl-textures>
      <such-an-awesome-image>
        <tex-image-2d src="#texture"></tex-image-2d>
      </such-an-awesome-image>
   </textures>
  </webgl-canvas>
  <img id="texture" src="awesome-texture.png">
</shader-canvas>

For a usable example check the 2nd example - texture quad

This custom named tag is meant to be used as a child of the <webgl-textures> container tag.

View Source


<{{vao-name}}>

You chose the tag name for your vertex array objects (VAO) when declaring them. The tag name is used to represent the name for the VAO. This name is then used to reference this VAO in other Shader Canvas containers and parts (like draw calls).

The allowed children of a VAO are:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-vertex-array-objects>
     <!--
       Create your WebGL VAOs here by specifying a
       tag name that uniquely identifies them.
     -->
     <here-is-a-vao>
       <bind-buffer src="some-buffer">
         <!-- vertex-attrib-pointers here -->
       </bind-buffer>
     </here-is-a-vao>
   <webgl-vertex-array-objects>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 3rd example - animation

This custom named tag is meant to be used as a child of the <webgl-vertex-array-objects> container tag.

View Source


<cull-face>

This tag is the equivalent of the WebGL cullFace() function.

It specifies whether or not front- and/or back-facing polygons can be culled.

The presence of this tag automatically sets gl.enable(gl.CULL_FACE)

No child tags allowed in <cull-face>.

The <cull-face> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <CullFace>

mode

A string specifying whether front- or back-facing polygons are candidates for culling.

The default value is "BACK". Possible values are:


<depth-func>

This tag is the equivalent of the WebGL depthFunc() function.

It specifies a function that compares incoming pixel depth to the current depth buffer value.

The presence of this tag automatically sets gl.enable(gl.DEPTH)

No child tags allowed in <depth-func>.

The <depth-func> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <DepthFunc>

func

A string specifying the depth comparison function, which sets the conditions under which the pixel will be drawn. The default value is gl.LESS.

Possible values are:


<draw-calls>

This tag is a container of a WebGL draw commands. Each child defines a WebGL draw call. It is intended to hold an ordered list of tags that is run sequentially when rendering a frame.

Some of the child tags make use of the WebGL elements defined in other containers, like programs, textures, buffers and vertex array objects.

A drawing loop can be defined by creating <draw-loop> child in this tag.

The allowed children are:

Example

<shader-canvas>
  <webgl-canvas>
    <draw-calls>
      <viewport-transform x="0" y="0"></viewport-transform>
      <clear-color red="0" green="0" blue="0" alpha="1"></clear-color>
      <clear-flags mask="COLOR_BUFFER_BIT"></clear-flags>
      <use-program src="farbrausch">
        <active-texture var="acid" src="#lsdImage"></active-texture>
        <draw-vao src="weird-meshes"></draw-vao>
      </use-program>
    </draw-calls>
  </webgl-canvas>
</shader-canvas>

For a usable example check the 3rd example - animation

The <draw-calls> tag is meant to be used as a child of the <webgl-canvas> tag.

View Source


<draw-loop>

This tag is a container of a WebGL draw commands. Each child defines a WebGL draw call. It is intended to hold an ordered list of tags that is run sequentially and repeatedly.

It creates a draw function to perform each action listed as children and then registers a requestAnimationFrame for that draw function (the setTimeout() is used instead if a the number of FPS's are specified ).

It allows the same children that the <draw-calls> accepts.

For a usable example check the 3rd example - animation

The <draw-loop> tag is meant to be used as a child of the <draw-calls> tag.

View Source

Attributes of <DrawLoop>

fps

Sets the number of Frames Per Second (FPS) that the loop should run. It defaults to using the window.requestAnimationFrame.

This attribute is a number.


<draw-vao>

This tag is equivalent to either the gl.drawElements() or the gl.drawArrays().

If the "instanceCount" attribute is set, then it makes use of the gl.drawElementsInstanced() or the gl.drawArraysInstanced() functions.

It searches for the Vertex Array Object specified by the src attribute and calls gl.drawElements if it has an element array buffer, or gl.drawArrays otherwise. (or gl.drawElementsInstanced()/gl.drawArraysInstanced() if "instanceCount" is set)

The number of items to draw can be specified in the "count" attribute, but these also get calculated automatically by the vertex array buffer specifications.

No allowed child tags.

The <draw-vao> tag is meant to be used within the <draw-calls> list of actions.

View Source

Attributes of <DrawVAO>

src

A string that references a vertex array object name.

This must be the name of a tag available in the <webgl-vertex-array-objects> container.

mode

A string that specifies the type primitive to render.

Possible values are:

offset

A number specifying a byte offset in the element array buffer. Must be a valid multiple of the size of the given type.

first

A number specifying the starting index in the array of vector points.

type

A string specifying the type of the values in the element array buffer.

Possible values are:


<fragment-shader>

This tag holds the fragment shader code of a WebGL program. The code must be valid WebGL 2 GLSL. It is parsed and the variables analyzed and retrieved to allow Shader Canvas to be able to easily reference them and track their locations at compilation/linking time.

The allowed children for the <fragment-shader>:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-programs>
     <some-program>
       <vertex-shader>
         <code>
           <!--
             Write the vertex shader code for
             "some-program" here.
           -->
         </code>
       </vertex-shader>
       <fragment-shader>
         <code>
           #version 300 es
           precision highp float;
           out vec4 outColor;
           
           void main() {
             outColor = vec4(1, 0, 1, 1);
           }
         </code>
       </fragment-shader>
     </some-program>
   </webgl-programs>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

The <fragment-shader> tag is meant to be used as a child of the <{{program-name}}> custom named tag.

View Source


<new-modules>

This tag is a container of a Shader Canvas modules. Each child defines a module. You must set a unique name for each child tag, these children can then have the valid content for a module.

This is the place to define the DOM contents of each module. These module tags can then be used in other containers, and have their contents merged with the location that they are placed.

A Shader Canvas module consists of parts of the html code of each Shader Canvas container. When a module tag is used outside of <new-modules> the corresponding html code part for its parent will be merged into the final Shader Canvas DOM.

The allowed children are:

Example

<shader-canvas>
 <new-modules>
   <some-cool-module-name>
     <webgl-buffers>
       <!-- buffers blueprint to be merged -->
     </webgl-buffers>
     <webgl-vertex-array-objects>
       <!-- vao's blueprint to be merged -->
     </webgl-vertex-array-objects>
     <webgl-program-part>
       <!-- a blueprint to be merged into a program -->
     </webgl-program-part>
   </some-cool-module-name>
 </new-modules>
</shader-canvas>

For a usable example check the 4th example - composition

The <new-modules> tag is meant to be used as a child of the <shader-canvas> tag.

View Source


<shader-canvas>

This is the starting tag of the graphics framework. Your app can have several of these tags.

The allowed children are:

Example

<shader-canvas>
 <webgl-canvas>
   <!-- webgl-canvas specific tags here -->
 </webgl-canvas>
 <new-modules>
   <!-- create your modules here, e.g. -->
   <triangle-stream>
     <!--
     this module is called "triangle-stream" inside it you
     can put some webgl-canvas parts, that will be merged
     whenever this tag is used.
     -->
   </triangle-stream>
 </new-modules>

 <!--
   here the module is being used, its webgl-canvas parts
   will be merged here during initialization
 --> 
 <triangle-stream></triangle-stream>

</shader-canvas>

View Source

Attributes of <ShaderCanvas>

width

A number that sets the width of the underlying graphics backend. This number is passed to the graphics backend to set its canvas dimensions.

It defaults to the window.innerWidth attribute value.

A graphics backend might not follow this number exactly and use it as a basis to set the pixel width based on the underlying pixel ratio.

height

A number that sets the height of the underlying graphics backend. Like the width, this is passed to the graphics backend to set its canvas dimensions.

It defaults to the window.innerHeight attribute value.

A graphics backend might not follow this number exactly and use it as a basis to set the pixel height based on the underlying pixel ratio.


<tex-image-2d>

This tag is the equivalent of the WebGL texImage2D() function.

It sets the 2D image data to be used in the texture being declared and how it should be processed.

No child tags allowed in <tex-image-2d>.

Example

<shader-canvas>
  <webgl-canvas>
    <webgl-textures>
      <such-an-awesome-image>
        <tex-image-2d src="#texture"></tex-image-2d>
      </such-an-awesome-image>
   </textures>
  </webgl-canvas>
  <img id="texture" src="awesome-texture.png">
</shader-canvas>

For a usable example check the 2nd example - texture quad

The <tex-image-2d> tag is meant to be used as a child of the <{{texture-name}}> custom named tag.

View Source

Attributes of <TexImage2D>

width

The width of the texture.

This attribute is a number.

height

The height of the texture.

This attribute is a number.

level

Specifies the level of detail that this texture data is for. Level 0 is the base image level and level n is the nth mipmap reduction level.

This attribute is a number.

target

The WebGL binding point for this texture.

This attribute allows the same values that the "target" parameter of the gl.texImage2D() function does:

internalFormat

Specifies the color components in the texture.

This attribute allows the same values that the "internalFormat" parameter of the gl.texImage2D() function does (and the same as the "format" attribute):

format

Specifies the format for the texel data.

This attribute allows the same values that the "format" parameter of the gl.texImage2D() function does (and the same as the "internalFormat" attribute).

type

Specifies the data type of the texel data.

This attribute allows the same values that the "type" parameter of the gl.texImage2D() function does:

src

This attribute is used to get the image data from.

It can be a URL or a query selector for an image/video tag.


<tex-parameter-f>

This tag is the equivalent of the WebGL texParameteri() function.

It sets the parameters for the current active texture set by the <active-texture> tag.

No child tags allowed in <tex-parameter-f>.

The <tex-parameter-f> tag is meant to be used as a child of the <active-texture> custom named tag.

View Source

Attributes of <TexParameterF>

texParameter

Returns the gl function for this tag. Not intended to be used as a tag attribute.

target

A string (GLenum) specifying the binding point (target)

pname

The parameter name. Can be any valid TextureParameterName.

param

The parameter value. Can be any valid TextureParameter.


<tex-parameter-i>

This tag is the equivalent of the WebGL texParameteri() function.

It sets the parameters for the current active texture set by the <active-texture> tag.

No child tags allowed in <tex-parameter-i>.

The <tex-parameter-i> tag is meant to be used as a child of the <active-texture> custom named tag.

View Source

Attributes of <TexParameterI>

texParameter

Returns the gl function for this tag. Not intended to be used as a tag attribute.

target

A string (GLenum) specifying the binding point (target)

pname

The parameter name. Can be any valid TextureParameterName.

param

The parameter value. Can be any valid TextureParameter.


<use-program>

This tag is the equivalent of the WebGL useProgram() function.

It sets the specified WebGLProgram as part of the current rendering state.

The allowed children are:

The <use-program> tag is meant to be used within the <draw-calls> list of actions.

View Source

Attributes of <UseProgram>

src

A string that references a program name.

This must be the name of a tag available in the <webgl-programs> container.


<vertex-attrib-pointer>

This tag is the equivalent of the WebGL vertexAttribPointer() function.

It specifies the layout of its parent buffer. It is used to map buffer areas to variables.

No children are allowed in <vertex-attrib-pointer>.

For a usable example check the 3rd example - animation

The <vertex-attrib-pointer> tag is meant to be used as a child of the <bind-buffer> tag.

View Source

Attributes of <VertexAttribPointer>

variable

A string specifying the name of the variable that this data is going to be placed at.

divisor

A number specifying the instance items for this attribute. If it is greater than 0 a call to gl.vertexAttribDivisor is made with it.

size

A number specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4.

type

A string (GLenum) specifying the data type of each component in the array.

This attribute allows the same values that the type parameter of the gl.vertexAttribPointer() function does:

offset

A GLintptr specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of the byte length of type.

normalized

A boolean specifying whether integer data values should be normalized into a certain range when being cast to a float.

stride

A GLsizei specifying the offset in bytes between the beginning of consecutive vertex attributes. Cannot be larger than 255. If stride is 0, the attribute is assumed to be tightly packed, that is, the attributes are not interleaved but each attribute is in a separate block, and the next vertex' attribute follows immediately after the current vertex.


<vertex-shader>

This tag holds the vertex shader code of a WebGL program. The code must be valid WebGL 2 GLSL. It is parsed and the variables analyzed and retrieved to allow Shader Canvas to be able to easily reference them and keep track of their locations at compilation/linking time.

The allowed children for the <vertex-shader>:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-programs>
     <some-program>
       <vertex-shader>
         <code>
           #version 300 es
           in vec4 a_position;
           void main() {
             gl_Position = a_position;
           }
         </code>
       </vertex-shader>
       <fragment-shader>
         <code>
           <!--
             Write the fragment shader code for
             "some-program" here.
           -->
         </code>
       </fragment-shader>
     </some-program>
   </webgl-programs>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

The <vertex-shader> tag is meant to be used as a child of the <{{program-name}}> custom named tag.

View Source


<viewport-transform>

This tag is the equivalent of the WebGL viewport() function.

It sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.

No child tags allowed in <viewport-transform>.

The <viewport-transform> tag is meant to be used as a child of the <draw-calls> list of actions.

View Source

Attributes of <ViewportTransformation>

x

A number specifying the horizontal coordinate for the lower left corner of the viewport origin.

Default value: 0.

y

A number specifying the vertical coordinate for the lower left corner of the viewport origin.

Default value: 0.

width

A number specifying the width of the viewport.

Default value: width of the canvas.

height

A number specifying the height of the viewport.

Default value: height of the canvas.


<webgl-buffers>

This tag is a container of a WebGL buffers. Each child defines a WebGL Buffer. You must set a unique name for each child tag, these children can then have the valid content for a buffer.

The children unique tag names are used as reference in other containers and in the list of actions.

WebGL Buffers consist of buffer data. For now 1 buffer can only have one buffer data source (this will change in the future to allow early concatenation of raw data). During initialization the buffers listed as children of this tag get loaded and their runtime functions created to be used by the draw calls either at its initialization or during the render loop.

The allowed children are:

Example

<shader-canvas>
  <webgl-canvas>
    <webgl-buffers>
      <cube-vertices>
        <buffer-data src="/myCube.json"></buffer-data>
      </cube-vertices>
      <cool-texture-uv-coords>
        <buffer-data src="#textureCoords"></buffer-data>
      </cool-texture-uv-coords>
    </webgl-buffers>
  </webgl-canvas>
</shader-canvas>

For a usable example check the 3rd example - animation

The <webgl-buffers> tag is meant to be used as a child of the <webgl-canvas> tag.

View Source


<webgl-canvas>

This tag defines a WebGL graphics backend. Its children are the logic blocks and actions to perform.

It splits WebGL operation into 5 distinct parts:

The allowed children are:

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-textures>
     <!-- WebGL Textures are defined here -->
   </webgl-textures>
   
   <webgl-buffers>
     <!-- WebGL Buffer Data is defined here -->
   </webgl-buffers>

   <webgl-vertex-array-objects>
     <!-- WebGL Vertex Array Objects go here -->
   </webgl-vertex-array-objects>

   <webgl-programs>
     <!-- Shader programs are defined here -->
   </webgl-programs>

   <draw-calls>
     <!-- Set the viewport and background color and draw programs here -->
   </draw-calls>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 2nd example - texture quad

The <webgl-canvas> tag is meant to be used as a child of the <shader-canvas> tag.

View Source


<webgl-program-part>

Use this tag to declare a reusable part of your WebGL program GLSL code.

The code set in this tag can then be used in multiple GLSL programs in a transparent way.

The allowed children are:

For a usable example check the 4th example - composition

This tag is meant to be used inside the custom named module tag <{{module-name}}>.

View Source


<webgl-programs>

This tag is a container of a WebGL programs. Each child defines a WebGL Program. You must set a unique name for each child tag, these children can then have the valid content for a program.

The children unique tag names are used as reference in other containers and in the list of actions.

WebGL Programs consist of vertex shader code and fragment shader code. During initialization the programs listed as children of this tag get loaded, compiled, linked and their variable locations set.

The allowed children are:

Example

<shader-canvas>
  <webgl-canvas>
   <webgl-programs>
     <my-awesome-program>
       <vertex-shader>
         <code> ... </code>
       </vertex-shader>
       <fragment-shader>
         <code> ... </code>
       </fragment-shader>
     </my-awesome-program>
   </webgl-programs>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

The <webgl-programs> tag is meant to be used as a child of the <webgl-canvas> tag.

View Source


<webgl-textures>

This tag is a container of a WebGL Textures. Each child defines a WebGL Texture. You must set a unique name for each child tag, these children can then have the valid content for a texture.

The children unique tag names are used as reference in other containers and in the list of actions.

Textures can hold image data, and are sent to the Sampler* variables of the GLSL fragment shader programs.

During initialization the textures listed as children of this tag get loaded and their runtime functions created to be used by the draw calls either at its initialization or during the render loop.

The allowed children are:

Example

<shader-canvas>
  <webgl-canvas>
    <webgl-textures>
      <such-an-awesome-image>
         <!--
           Texture content tags
         -->
      </such-an-awesome-image>
   </textures>
  </webgl-canvas>
</shader-canvas>

For a usable example check the 2nd example - texture quad

The <webgl-textures> tag is meant to be used as a child of the <webgl-canvas> tag.

View Source


<webgl-vertex-array-objects>

This tag is a container of a WebGL Vertex Array Objects. Each child defines a WebGL Vertex Array Object. You must set a unique name for each child tag, these children can then have the valid content for a vertex array object.

The children unique tag names are used as reference in other containers and in the list of actions.

Vertex Array Objects pass extra data per vertex into WebGL programs. They allow a vertex to have any extra information that might be needed for the programs to display their cool things.

WebGL Vertex Array Objects are a way that WebGL uses to separate the data contents from their representation. With Vertex Array Objects it is possible to select a buffer and read its data as 2d float vertices, or, if you want, select that same buffer and read its data as 3d vertices.

During initialization the vertex array objects listed as children of this tag get their runtime functions created to be used by the draw calls either at its initialization or during the render loop.

The allowed children are:

Example

<shader-canvas>
  <webgl-canvas>
    <webgl-vertex-array-objects>
      <my-extra-vertex-data>
         <!--
           Vertex Array Object content tags
         -->
      </my-extra-vertex-data>
   </webgl-vertex-array-objects>
  </webgl-canvas>
</shader-canvas>

For a usable example check the 2nd example - texture quad

The <webgl-vertex-array-objects> tag is meant to be used as a child of the <webgl-canvas> tag.

View Source