or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

attributes-uniforms.md buffer-management.md context-creation.md extensions.md framebuffer-operations.md index.md shader-programs.md texture-operations.md webgl-rendering.md

tile.json

Texture Operations

Complete texture management including 2D textures, cube maps, texture parameters, and image data handling with support for various formats and filtering options.

Capabilities

Texture Creation and Management

Methods for creating, binding, and managing texture objects.

/**
 * Create a new WebGL texture object
 * @returns WebGLTexture object or null if creation fails
 */
createTexture(): WebGLTexture | null;

/**
 * Delete a WebGL texture object
 * @param texture - Texture to delete
 */
deleteTexture(texture: WebGLTexture): void;

/**
 * Test if object is a valid texture
 * @param texture - Object to test
 * @returns true if valid texture
 */
isTexture(texture: any): boolean;

/**
 * Bind texture to target
 * @param target - Texture target (TEXTURE_2D or TEXTURE_CUBE_MAP)
 * @param texture - Texture to bind, or null to unbind
 */
bindTexture(target: number, texture: WebGLTexture | null): void;

Usage Examples:

// Create and bind 2D texture
const texture = context.createTexture();
if (!texture) {
  console.error('Failed to create texture');
  return;
}

context.bindTexture(context.TEXTURE_2D, texture);

// Create cube map texture
const cubeTexture = context.createTexture();
context.bindTexture(context.TEXTURE_CUBE_MAP, cubeTexture);

// Clean up
context.deleteTexture(texture);
context.deleteTexture(cubeTexture);

Texture Image Data

Methods for uploading and updating texture image data.

/**
 * Set 2D texture image data
 * @param target - Texture target or cube face
 * @param level - Mipmap level
 * @param internalformat - Internal pixel format
 * @param width - Image width
 * @param height - Image height
 * @param border - Border width (must be 0)
 * @param format - Pixel format
 * @param type - Pixel data type
 * @param pixels - Image data or null
 */
texImage2D(target: number, level: number, internalformat: number,
          width: number, height: number, border: number,
          format: number, type: number, pixels: ArrayBufferView | null): void;

/**
 * Update 2D texture sub-image
 * @param target - Texture target or cube face
 * @param level - Mipmap level
 * @param xoffset - X offset into texture
 * @param yoffset - Y offset into texture
 * @param width - Sub-image width
 * @param height - Sub-image height
 * @param format - Pixel format
 * @param type - Pixel data type
 * @param pixels - Image data
 */
texSubImage2D(target: number, level: number, xoffset: number, yoffset: number,
             width: number, height: number, format: number, type: number,
             pixels: ArrayBufferView): void;

Usage Examples:

// Create 256x256 RGBA texture
const width = 256, height = 256;
const pixels = new Uint8Array(width * height * 4);

// Fill with gradient
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const i = (y * width + x) * 4;
    pixels[i] = x;     // Red
    pixels[i + 1] = y; // Green
    pixels[i + 2] = 0; // Blue
    pixels[i + 3] = 255; // Alpha
  }
}

context.bindTexture(context.TEXTURE_2D, texture);
context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, width, height, 0,
                  context.RGBA, context.UNSIGNED_BYTE, pixels);

// Update part of texture
const subPixels = new Uint8Array(64 * 64 * 4);
// ... fill subPixels ...
context.texSubImage2D(context.TEXTURE_2D, 0, 32, 32, 64, 64,
                     context.RGBA, context.UNSIGNED_BYTE, subPixels);

Texture Parameters

Methods for setting texture filtering and wrapping parameters.

/**
 * Set texture parameter (integer)
 * @param target - Texture target
 * @param pname - Parameter name
 * @param param - Parameter value
 */
texParameteri(target: number, pname: number, param: number): void;

/**
 * Set texture parameter (float)
 * @param target - Texture target
 * @param pname - Parameter name
 * @param param - Parameter value
 */
texParameterf(target: number, pname: number, param: number): void;

/**
 * Get texture parameter
 * @param target - Texture target
 * @param pname - Parameter name
 * @returns Parameter value
 */
getTexParameter(target: number, pname: number): any;

Usage Examples:

// Set texture filtering
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR);
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.LINEAR);

// Set texture wrapping
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_S, context.CLAMP_TO_EDGE);
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_T, context.CLAMP_TO_EDGE);

// For tiled textures
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_S, context.REPEAT);
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_T, context.REPEAT);

// Query parameter
const minFilter = context.getTexParameter(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER);

Texture Unit Management

Methods for managing multiple texture units.

/**
 * Set active texture unit
 * @param texture - Texture unit (TEXTURE0 + n)
 */
activeTexture(texture: number): void;

Usage Examples:

// Bind textures to different units
context.activeTexture(context.TEXTURE0);
context.bindTexture(context.TEXTURE_2D, diffuseTexture);

context.activeTexture(context.TEXTURE1);
context.bindTexture(context.TEXTURE_2D, normalTexture);

context.activeTexture(context.TEXTURE2);
context.bindTexture(context.TEXTURE_CUBE_MAP, envTexture);

// Reset to unit 0
context.activeTexture(context.TEXTURE0);

Mipmap Generation

Methods for generating texture mipmaps.

/**
 * Generate mipmaps for bound texture
 * @param target - Texture target
 */
generateMipmap(target: number): void;

Usage Examples:

// Upload base level and generate mipmaps
context.bindTexture(context.TEXTURE_2D, texture);
context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, width, height, 0,
                  context.RGBA, context.UNSIGNED_BYTE, pixels);
context.generateMipmap(context.TEXTURE_2D);

// Set filtering to use mipmaps
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR_MIPMAP_LINEAR);

Framebuffer Texture Operations

Methods for copying framebuffer data to textures.

/**
 * Copy framebuffer data to texture
 * @param target - Texture target
 * @param level - Mipmap level
 * @param internalformat - Internal format
 * @param x - Framebuffer x coordinate
 * @param y - Framebuffer y coordinate
 * @param width - Copy width
 * @param height - Copy height
 * @param border - Border width (must be 0)
 */
copyTexImage2D(target: number, level: number, internalformat: number,
              x: number, y: number, width: number, height: number, border: number): void;

/**
 * Copy framebuffer data to texture sub-image
 * @param target - Texture target
 * @param level - Mipmap level
 * @param xoffset - Texture x offset
 * @param yoffset - Texture y offset
 * @param x - Framebuffer x coordinate
 * @param y - Framebuffer y coordinate
 * @param width - Copy width
 * @param height - Copy height
 */
copyTexSubImage2D(target: number, level: number, xoffset: number, yoffset: number,
                 x: number, y: number, width: number, height: number): void;

Usage Examples:

// Render scene to framebuffer then copy to texture
// ... render scene ...

context.bindTexture(context.TEXTURE_2D, renderTexture);
context.copyTexImage2D(context.TEXTURE_2D, 0, context.RGBA, 0, 0, 512, 512, 0);

// Copy part of framebuffer to existing texture
context.copyTexSubImage2D(context.TEXTURE_2D, 0, 64, 64, 0, 0, 128, 128);

Cube Map Textures

Cube map texture management for environment mapping.

// Create and set up cube map
const cubeTexture = context.createTexture();
context.bindTexture(context.TEXTURE_CUBE_MAP, cubeTexture);

// Upload faces (+X, -X, +Y, -Y, +Z, -Z)
const faces = [
  context.TEXTURE_CUBE_MAP_POSITIVE_X,
  context.TEXTURE_CUBE_MAP_NEGATIVE_X,
  context.TEXTURE_CUBE_MAP_POSITIVE_Y,
  context.TEXTURE_CUBE_MAP_NEGATIVE_Y,
  context.TEXTURE_CUBE_MAP_POSITIVE_Z,
  context.TEXTURE_CUBE_MAP_NEGATIVE_Z
];

faces.forEach((face, index) => {
  context.texImage2D(face, 0, context.RGBA, 256, 256, 0,
                    context.RGBA, context.UNSIGNED_BYTE, facePixels[index]);
});

// Set cube map parameters
context.texParameteri(context.TEXTURE_CUBE_MAP, context.TEXTURE_MIN_FILTER, context.LINEAR);
context.texParameteri(context.TEXTURE_CUBE_MAP, context.TEXTURE_MAG_FILTER, context.LINEAR);
context.texParameteri(context.TEXTURE_CUBE_MAP, context.TEXTURE_WRAP_S, context.CLAMP_TO_EDGE);
context.texParameteri(context.TEXTURE_CUBE_MAP, context.TEXTURE_WRAP_T, context.CLAMP_TO_EDGE);

Texture Formats

Supported texture formats and data types.

// Texture formats
const RGB: number;
const RGBA: number;
const ALPHA: number;
const LUMINANCE: number;
const LUMINANCE_ALPHA: number;

// Data types
const UNSIGNED_BYTE: number;
const UNSIGNED_SHORT_5_6_5: number;
const UNSIGNED_SHORT_4_4_4_4: number;
const UNSIGNED_SHORT_5_5_5_1: number;
const FLOAT: number; // Requires OES_texture_float extension

// Filtering modes
const NEAREST: number;
const LINEAR: number;
const NEAREST_MIPMAP_NEAREST: number;
const LINEAR_MIPMAP_NEAREST: number;
const NEAREST_MIPMAP_LINEAR: number;
const LINEAR_MIPMAP_LINEAR: number;

// Wrapping modes
const REPEAT: number;
const CLAMP_TO_EDGE: number;
const MIRRORED_REPEAT: number;

Common Texture Patterns

Power-of-Two Textures (for mipmaps):

// POT textures support mipmaps and all wrap modes
const size = 512; // Power of 2
context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, size, size, 0,
                  context.RGBA, context.UNSIGNED_BYTE, pixels);
context.generateMipmap(context.TEXTURE_2D);

Non-Power-of-Two Textures:

// NPOT textures have restrictions
context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, 300, 200, 0,
                  context.RGBA, context.UNSIGNED_BYTE, pixels);

// Must use CLAMP_TO_EDGE and no mipmaps
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_S, context.CLAMP_TO_EDGE);
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_T, context.CLAMP_TO_EDGE);
context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR);

Version

Tile

Files