<active-texture>
{#ActiveTexture}
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.
<ActiveTexture>
Attributes of 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>
{#BindBuffer}
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:
<vertex-attrib-pointer>
_WebGL _
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.
<BindBuffer>
Attributes of 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>
{#BlendFunc}
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.
<BlendFunc>
Attributes of sfactor
A string specifying a multiplier for the source blending factors. The
default value is gl.ONE
.
Possible values:
"ZERO"
"ONE"
(default)"SRC_COLOR"
"ONE_MINUS_SRC_COLOR"
"DST_COLOR"
"ONE_MINUS_DST_COLOR"
"SRC_ALPHA"
"ONE_MINUS_SRC_ALPHA"
"DST_ALPHA"
"ONE_MINUS_DST_ALPHA"
"CONSTANT_COLOR"
"ONE_MINUS_CONSTANT_COLOR"
"CONSTANT_ALPHA"
"ONE_MINUS_CONSTANT_ALPHA"
"SRC_ALPHA_SATURATE"
dfactor
A string specifying a multiplier for the destination blending factors.
The default value is gl.ZERO
.
Possible values:
"ZERO"
(default)"ONE"
"SRC_COLOR"
"ONE_MINUS_SRC_COLOR"
"DST_COLOR"
"ONE_MINUS_DST_COLOR"
"SRC_ALPHA"
"ONE_MINUS_SRC_ALPHA"
"DST_ALPHA"
"ONE_MINUS_DST_ALPHA"
"CONSTANT_COLOR"
"ONE_MINUS_CONSTANT_COLOR"
"CONSTANT_ALPHA"
"ONE_MINUS_CONSTANT_ALPHA"
"SRC_ALPHA_SATURATE"
<buffer-data>
{#BufferData}
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.
<BufferData>
Attributes of 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:
"ARRAY_BUFFER"
(default)"ELEMENT_ARRAY_BUFFER"
"COPY_READ_BUFFER"
"COPY_WRITE_BUFFER"
"TRANSFORM_FEEDBACK_BUFFER"
"UNIFORM_BUFFER"
"PIXEL_PACK_BUFFER"
"PIXEL_UNPACK_BUFFER"
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:
"STATIC_DRAW"
(default)"DYNAMIC_DRAW"
"STREAM_DRAW"
"STATIC_READ"
"DYNAMIC_READ"
"STREAM_READ"
"STATIC_COPY"
"DYNAMIC_COPY"
"STREAM_COPY"
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>
{#ClearColor}
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.
<ClearColor>
Attributes of 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>
{#ClearDepth}
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.
<ClearDepth>
Attributes of depth
A number specifying the depth value used when the depth buffer is cleared. Default value: 1.
<clear-flags>
{#ClearFlags}
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.
<ClearFlags>
Attributes of mask
A string that sets the “mask” of the clear method.
This string can contain the three following strings separated by the char “|”:
"COLOR_BUFFER_BIT"
"DEPTH_BUFFER_BIT"
"STENCIL_BUFFER_BIT"
<clear-stencil>
{#ClearStencil}
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.
<ClearStencil>
Attributes of s
A number specifying the index used when the stencil buffer is cleared. Default value: 0.
<{{buffer-name}}>
{#CreateBuffer}
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:
<buffer-data>
WebGL Buffer Data source
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.
<{{module-name}}>
{#CreateModule}
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:
- All Shader Canvas tags
<webgl-program-part>
Specifies a part of a<{{program-name}}>
to be merged if this module is used inside a program.
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.
<{{program-name}}>
{#CreateProgram}
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:
<vertex-shader>
WebGL Vertex Shader code<fragment-shader>
WebGL Fragment Shader code- Any module tag defined inside the Shader Canvas
<new-modules>
tag
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.
<{{texture-name}}>
{#CreateTexture}
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:
<tex-image-2d>
Sets the Image data for this texture
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.
<{{vao-name}}>
{#CreateVertexArray}
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:
<bind-buffer>
Binds a buffer specified in the webgl buffers container
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.
<cull-face>
{#CullFace}
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.
<CullFace>
Attributes of mode
A string specifying whether front- or back-facing polygons are candidates for culling.
The default value is “BACK”. Possible values are:
"FRONT"
"BACK"
(default)"FRONT_AND_BACK"
<depth-func>
{#DepthFunc}
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.
<DepthFunc>
Attributes of 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:
"NEVER"
"LESS"
"EQUAL"
"LEQUAL"
"GREATER"
"NOTEQUAL"
"GEQUAL"
"ALWAYS"
<draw-calls>
{#DrawCalls}
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:
<active-texture>
Equivalent to thegl.activeTexture()
function<blend-func>
Equivalent to thegl.blendFunc()
function<depth-func>
Equivalent to thegl.depthFunc()
function<cull-face>
Equivalent to thegl.cullFace()
function<clear-color>
Equivalent to thegl.clearColor()
function<clear-depth>
Equivalent to thegl.clearDepth()
function<clear-stencil>
Equivalent to thegl.clearStencil()
function<clear-flags>
Equivalent to thegl.clear()
function<tex-parameter-i>
Equivalent to thegl.texParameteri()
function<tex-parameter-f>
Equivalent to thegl.texParameterf()
function<use-program>
Equivalent to thegl.useProgram()
function<viewport-transform>
Equivalent to thegl.viewport()
function<draw-loop>
Lists the actions to perform inside a requestAnimationFrame<draw-vao>
Equivalent to either thegl.drawElements()
or thegl.drawArrays()
functions (it knows which to use based on the Vertex Array Object that it references)
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.
<draw-loop>
{#DrawLoop}
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.
<DrawLoop>
Attributes of 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>
{#DrawVAO}
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.
<DrawVAO>
Attributes of 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:
"POINTS"
"LINE_STRIP"
"LINE_LOOP"
"LINES"
"TRIANGLE_STRIP"
"TRIANGLE_FAN"
"TRIANGLES"
(default)
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:
"UNSIGNED_BYTE"
(default)"UNSIGNED_SHORT"
<fragment-shader>
{#FragmentShader}
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>
:
<code>
Plain HTML<code>
tag that holds the fragment code. Code tag is useful because it allows preformatted text as content.
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.
<new-modules>
{#NewModules}
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:
<{{module-name}}>
Shader Canvas Module (you decide the tag name)
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.
<shader-canvas>
{#ShaderCanvas}
This is the starting tag of the graphics framework. Your app can have several of these tags.
The allowed children are:
<webgl-canvas>
WebGL low-level back-end<new-modules>
Modules tags and their content- Any module tag defined inside the
<new-modules>
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>
<ShaderCanvas>
Attributes of 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>
{#TexImage2D}
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.
<TexImage2D>
Attributes of 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:
"TEXTURE_2D"
(default)"TEXTURE_CUBE_MAP_POSITIVE_X"
"TEXTURE_CUBE_MAP_NEGATIVE_X"
"TEXTURE_CUBE_MAP_POSITIVE_Y"
"TEXTURE_CUBE_MAP_NEGATIVE_Y"
"TEXTURE_CUBE_MAP_POSITIVE_Z"
"TEXTURE_CUBE_MAP_NEGATIVE_Z"
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):
"RGBA"
(default)"RGB"
"LUMINANCE_ALPHA"
"LUMINANCE"
"ALPHA"
"DEPTH_COMPONENT"
"DEPTH_STENCIL"
"R8"
"R8_SNORM"
"RG8"
"RG8_SNORM"
"RGB8"
"RGB8_SNORM"
"RGB565"
"RGBA4"
"RGB5_A1"
"RGBA8"
"RGBA8_SNORM"
"RGB10_A2"
"RGB10_A2UI"
"SRGB8"
"SRGB8_ALPHA8"
"R16F"
"RG16F"
"RGB16F"
"RGBA16F"
"R32F"
"RG32F"
"RGB32F"
"RGBA32F"
"R11F_G11F_B10F"
"RGB9_E5"
"R8I"
"R8UI"
"R16I"
"R16UI"
"R32I"
"R32UI"
"RG8I"
"RG8UI"
"RG16I"
"RG16UI"
"RG32I"
"RG32UI"
"RGB8I"
"RGB8UI"
"RGB16I"
"RGB16UI"
"RGB32I"
"RGB32UI"
"RGBA8I"
"RGBA8UI"
"RGBA16I"
"RGBA16UI"
"RGBA32I"
"RGBA32UI"
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:
"BYTE"
"UNSIGNED_SHORT"
"SHORT"
"UNSIGNED_INT"
"INT"
"HALF_FLOAT"
"FLOAT"
"UNSIGNED_INT_2_10_10_10_REV"
"UNSIGNED_INT_10F_11F_11F_REV"
"UNSIGNED_INT_5_9_9_9_REV"
"UNSIGNED_INT_24_8"
"FLOAT_32_UNSIGNED_INT_24_8_REV"
"UNSIGNED_BYTE"
(default)"UNSIGNED_SHORT_5_6_5"
"UNSIGNED_SHORT_4_4_4_4"
"UNSIGNED_SHORT_5_5_5_1"
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>
{#TexParameterF}
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.
<TexParameterF>
Attributes of 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>
{#TexParameterI}
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.
<TexParameterI>
Attributes of 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>
{#UseProgram}
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:
<active-texture>
Equivalent to thegl.activeTexture()
function<draw-vao>
Equivalent to either thegl.drawElements()
or thegl.drawArrays()
functions (it knows which to use based on the Vertex Array Object that it references)
The <use-program>
tag is meant to be used within the
<draw-calls>
list of actions.
<UseProgram>
Attributes of 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>
{#VertexAttribPointer}
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.
<VertexAttribPointer>
Attributes of 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:
"BYTE"
"SHORT"
"UNSIGNED_BYTE"
"UNSIGNED_SHORT"
"FLOAT"
(default)"HALF_FLOAT"
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.
- For types gl.BYTE and gl.SHORT, normalizes the values to [-1, 1] if true.
- For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true.
- For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect.
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>
{#VertexShader}
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>
:
<code>
Plain HTML<code>
tag that holds the vertex code. Code tag is useful because it allows preformatted text as content.
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.
<viewport-transform>
{#ViewportTransformation}
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.
<ViewportTransformation>
Attributes of 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>
{#WebGLBuffers}
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:
<{{buffer-name}}>
WebGL Buffer (you decide the tag name)
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.
<webgl-canvas>
{#WebGLCanvas}
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:
Programs - Shader programs to use when drawing
Buffers - Raw data, define here the sources to use elsewhere
Vertex Array Objects - Each child defines blocks that set how the data in the buffers is going to be read.
Textures - Image and video data sources
Draw calls - How to draw the 4 parts above.
The allowed children are:
<webgl-programs>
WebGL shader programs container<webgl-buffers>
Buffers with raw data<webgl-vertex-array-objects>
Vertex Array Objects container (here you can bundle multiple buffers and define what their raw data is formatted and what it contains)<webgl-textures>
Container for image and video data<draw-calls>
List of actions to perform when rendering an image- Any module tag that is previously defined inside the parent
<new-modules>
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.
<webgl-program-part>
{#WebGLProgramPart}
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:
<vertex-shader>
Specifies the code part for the Vertex shader program<fragment-shader>
Specifies the code part for the Vertex shader program
For a usable example check the 4th example - composition
This tag is meant to be used inside the custom named module tag
<{{module-name}}>
.
<webgl-programs>
{#WebGLPrograms}
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:
<{{program-name}}>
WebGL Program (you decide the tag name)
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.
<webgl-textures>
{#WebGLTextures}
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:
<{{texture-name}}>
WebGL Texture (you decide the tag name)
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.
<webgl-vertex-array-objects>
{#WebGLVertexArrayObjects}
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:
<{{vertex-array-object-name}}>
WebGL Vertex Array Object (you decide the tag name)- Any module tag defined inside the
<new-modules>
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.