A reference to the Array that represents the raw data loaded

The length of the raw data in bytes (takes in consideration a possible offset)

The function to trigger the load of the data. It is created by the initialize() function and defaults to a no-op.

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

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

This attribute is a number.

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.

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>

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"

This function is used to read the src attribute and try to read it with the available supported readers.

It returns an empty array [] if the src attribute is not found or an override is not provided.

This function is the entry point of the logic for the BufferData class.

It is responsible to create the "load()" function to be called later.

The "load()" function created will set the number of bytes that were loaded in this class "length" property.

The data loaded defaults to Float32 elements, except if the target is "ELEMENT_ARRAY_BUFFER", in which case the data is made of Uint16 elements.

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