Skip to main content
The Deno 2 Release Candidate is here
Learn more
Module

x/shader_canvas/core/webgl_buffers/create_buffer.ts>CreateBuffer

A rendering engine where you can write WebGL 2.0 shaders using custom tags.
HugoDaniel/shader_canvas
Latest
class CreateBuffer
import { CreateBuffer } from "https://deno.land/x/shader_canvas@v1.1.1/core/webgl_buffers/create_buffer.ts";

The CreateBuffer class is intended to be used to create custom tags for the children of the WebGLBuffers container.

Every WebGL buffer in use by the Shader Canvas is an instance of this class. After initialization this class provides a bindBuffer function that performs the equivalent gl.bindBuffer() on its buffer instance.

Properties

bindBuffer: (() => number)

This function is a wrapper for the gl.bindBuffer() call. It takes no arguments because it always binds this current buffer instance.

It is set during initialization and defaults to a no-op before it.

buffer: WebGLBuffer | null

The WebGL id for this buffer. Created during initialization.

data: DataInputArray | null

The buffer raw data object. Can have multiple representations, or null if this buffer is just a place-holder for the time being.

length: number

The buffer length in bytes (takes in consideration a possible offset)

Methods

initialize(gl: WebGL2RenderingContext)

Initializing a buffer consists in calling the initialization function for each child instance.

This function loads the data and calculates its length. It also creates the bindBuffer function above, that is used to set this buffer as the target for further WebGL actions (which happens in a couple of places, like with the Vertex Array Objects).

Static Properties

tag: string

<{{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:

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.