or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

attributes-uniforms.mdbuffer-management.mdcontext-creation.mdextensions.mdframebuffer-operations.mdindex.mdshader-programs.mdtexture-operations.mdwebgl-rendering.md
tile.json

shader-programs.mddocs/

Shader Programs

Shader compilation, linking, and program management for vertex and fragment shaders with complete WebGL shader pipeline support.

Capabilities

Shader Creation and Management

/**
 * Create a shader object
 * @param type - Shader type (VERTEX_SHADER or FRAGMENT_SHADER)
 * @returns WebGLShader object or null
 */
createShader(type: number): WebGLShader | null;

/**
 * Delete a shader object
 * @param shader - Shader to delete
 */
deleteShader(shader: WebGLShader): void;

/**
 * Set shader source code
 * @param shader - Shader object
 * @param source - GLSL source code string
 */
shaderSource(shader: WebGLShader, source: string): void;

/**
 * Compile a shader
 * @param shader - Shader to compile
 */
compileShader(shader: WebGLShader): void;

Program Management

/**
 * Create a program object
 * @returns WebGLProgram object or null
 */
createProgram(): WebGLProgram | null;

/**
 * Delete a program object
 * @param program - Program to delete
 */
deleteProgram(program: WebGLProgram): void;

/**
 * Attach shader to program
 * @param program - Program object
 * @param shader - Shader to attach
 */
attachShader(program: WebGLProgram, shader: WebGLShader): void;

/**
 * Detach shader from program
 * @param program - Program object
 * @param shader - Shader to detach
 */
detachShader(program: WebGLProgram, shader: WebGLShader): void;

/**
 * Link a program
 * @param program - Program to link
 */
linkProgram(program: WebGLProgram): void;

/**
 * Use a program for rendering
 * @param program - Program to use, or null
 */
useProgram(program: WebGLProgram | null): void;

/**
 * Validate a program
 * @param program - Program to validate
 */
validateProgram(program: WebGLProgram): void;

/**
 * Bind attribute location before linking
 * @param program - Program object
 * @param index - Attribute index
 * @param name - Attribute name
 */
bindAttribLocation(program: WebGLProgram, index: number, name: string): void;

Shader Information

/**
 * Get shader parameter
 * @param shader - Shader object
 * @param pname - Parameter name
 * @returns Parameter value
 */
getShaderParameter(shader: WebGLShader, pname: number): any;

/**
 * Get shader compilation log
 * @param shader - Shader object
 * @returns Info log string
 */
getShaderInfoLog(shader: WebGLShader): string | null;

/**
 * Get shader source code
 * @param shader - Shader object
 * @returns Source code string
 */
getShaderSource(shader: WebGLShader): string | null;

/**
 * Check if object is a shader
 * @param shader - Object to test
 * @returns true if object is a valid shader
 */
isShader(shader: WebGLShader | null): boolean;

/**
 * Get program parameter
 * @param program - Program object
 * @param pname - Parameter name
 * @returns Parameter value
 */
getProgramParameter(program: WebGLProgram, pname: number): any;

/**
 * Get program link log
 * @param program - Program object
 * @returns Info log string
 */
getProgramInfoLog(program: WebGLProgram): string | null;

/**
 * Get attached shaders
 * @param program - Program object
 * @returns Array of attached shaders
 */
getAttachedShaders(program: WebGLProgram): WebGLShader[] | null;

/**
 * Check if object is a program
 * @param program - Object to test
 * @returns true if object is a valid program
 */
isProgram(program: WebGLProgram | null): boolean;

Usage Examples:

// Vertex shader source
const vertexShaderSource = `
  attribute vec3 position;
  attribute vec2 uv;
  uniform mat4 mvpMatrix;
  varying vec2 vUv;
  
  void main() {
    vUv = uv;
    gl_Position = mvpMatrix * vec4(position, 1.0);
  }
`;

// Fragment shader source
const fragmentShaderSource = `
  precision mediump float;
  varying vec2 vUv;
  uniform sampler2D texture;
  
  void main() {
    gl_FragColor = texture2D(texture, vUv);
  }
`;

// Create and compile shaders
const vertexShader = context.createShader(context.VERTEX_SHADER);
context.shaderSource(vertexShader, vertexShaderSource);
context.compileShader(vertexShader);

if (!context.getShaderParameter(vertexShader, context.COMPILE_STATUS)) {
  console.error('Vertex shader compilation error:', context.getShaderInfoLog(vertexShader));
}

const fragmentShader = context.createShader(context.FRAGMENT_SHADER);
context.shaderSource(fragmentShader, fragmentShaderSource);
context.compileShader(fragmentShader);

// Create and link program
const program = context.createProgram();
context.attachShader(program, vertexShader);
context.attachShader(program, fragmentShader);
context.linkProgram(program);

if (!context.getProgramParameter(program, context.LINK_STATUS)) {
  console.error('Program link error:', context.getProgramInfoLog(program));
}

// Use program
context.useProgram(program);