Skip to main content
Using Deno in production at your company? Earn free Deno merch.
Give us feedback
Module

x/shader_canvas/core/webgl_textures/webgl_textures.ts>WebGLTextures

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

WebGLTextures is a Web Component. It extends the ShaderCanvasContainer because any immediate children tags get their names registered as new Web Components automatically. These children act as containers for functionality (WebGL Textures in this case) that can then be referenced by their unique tag name being used.

WebGLTextures is a container where each immediate child is a CreateTexture instance.

This class has no constructor, it assumes the default constructor. The logic starts at the initialize() function.

Properties

private
whenLoaded

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 its code only runs when all the tags it depends are available.

Methods

initialize(unnamed 0: WebGLCanvasContext)

Initializes the WebGL Textures container.

This function starts by calling the container creation logic: it reads its child tag names and creates them as unique Web Components with a CreateTexture instance.

After all textures have been created as Web Components, they get initialized in a promise array, this initialization can wait for them to be fully loaded if the textures are images..

Static Properties

tag: string

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

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.