Promise that resolves when all dependencies have registered their tag in the customElements global Web Components registry.

This is used in the async initialize() function, to ensure that the code only runs when all the tags it depends are available.

This function returns the function that binds the buffer with the name passed in the argument.

It looks for the name in its children, and returns the reference to its bindBuffer() function.

If no buffer is found with that name, a no operation function is returned.

This function is mostly a helper to avoid having to look into all the buffers to get a given bind function. Buffer bind functions are useful in WebGL because they set the buffer where further actions will operate.

Initializes the WebGL Buffers container.

This function starts by calling the common container creation logic, by reading its child tag names and create them as unique Web Components with a CreateBuffer instance.

After all buffers have been created as Web Components, they get loaded, and their runtime functions created.

This function returns the raw data length (in bytes) for the buffer with the name provided as argument.

This length takes in consideration an eventual offset in the buffer data.

Returns 0 if the buffer name is not found.

<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.