Core PixiJS WebGL rendering library providing essential 2D graphics infrastructure and hardware-accelerated rendering capabilities.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Shader compilation, uniform management, and program linking with full WebGL shader support. The shader system handles GLSL shader compilation, uniform binding, and GPU program management.
Main shader class that combines a compiled program with uniform data for GPU rendering.
/**
* Shader combines a compiled program with uniforms for rendering
* Manages shader programs and uniform data binding
*/
class Shader extends EventEmitter {
/** The compiled shader program */
program: Program;
/** Uniform data for the shader */
uniforms: Dict<any>;
/**
* Create a new Shader
* @param program - Compiled shader program
* @param uniforms - Uniform values
*/
constructor(program: Program, uniforms?: Dict<any>);
/** Check if shader program is valid */
checkUniformExists(name: string, group: UniformGroup): boolean;
/** Destroy shader and cleanup resources */
destroy(): void;
/**
* Create shader from source code
* @param vertexSrc - Vertex shader source
* @param fragmentSrc - Fragment shader source
* @param uniforms - Uniform values
* @param name - Shader name for debugging
*/
static from(vertexSrc?: string, fragmentSrc?: string, uniforms?: Dict<any>, name?: string): Shader;
}
type Dict<T> = {[key: string]: T};Program class that manages GLSL shader compilation and linking.
/**
* Program manages GLSL shader compilation and program linking
* Handles vertex and fragment shader compilation
*/
class Program {
/** Vertex shader source code */
vertexSrc: string;
/** Fragment shader source code */
fragmentSrc: string;
/** Program name for debugging */
name: string;
/** Unique program ID */
id: number;
/** Attribute data extracted from shaders */
attributeData: {[key: string]: IAttributeData};
/** Uniform data extracted from shaders */
uniformData: {[key: string]: IUniformData};
/**
* Create a new Program
* @param vertexSrc - Vertex shader source
* @param fragmentSrc - Fragment shader source
* @param name - Program name
*/
constructor(vertexSrc?: string, fragmentSrc?: string, name?: string);
/**
* Extract attribute and uniform data from shader source
* @param vertexSrc - Vertex shader source
* @param fragmentSrc - Fragment shader source
*/
extractData(vertexSrc: string, fragmentSrc: string): void;
/** Destroy program */
destroy(): void;
/**
* Create program from shader sources
* @param vertexSrc - Vertex shader source
* @param fragmentSrc - Fragment shader source
* @param name - Program name
*/
static from(vertexSrc?: string, fragmentSrc?: string, name?: string): Program;
}
interface IAttributeData {
type: string;
size: number;
location: number;
name: string;
}
interface IUniformData {
index: number;
type: string;
size: number;
offset: number;
name: string;
value: any;
}UniformGroup manages collections of shader uniforms with automatic GPU buffer synchronization.
/**
* UniformGroup manages collections of shader uniforms
* Handles uniform buffer objects and automatic synchronization
*/
class UniformGroup<LAYOUT = Dict<any>> extends EventEmitter {
/** Uniform data layout */
uniforms: LAYOUT;
/** Group ID for caching */
group: number;
/** Unique group ID */
id: number;
/** Whether group uses uniform buffer objects */
ubo: boolean;
/** Buffer for UBO data */
buffer?: Buffer;
/** Auto-manage flag */
autoManage: boolean;
/** Sync function for buffer updates */
syncUniforms: {[key: string]: UniformsSyncCallback};
/**
* Create a new UniformGroup
* @param uniforms - Uniform data or buffer
* @param _static - Whether uniforms are static
* @param _id - Group ID
*/
constructor(uniforms: LAYOUT | Buffer, _static?: boolean, _id?: number);
/** Update uniform buffer */
update(): void;
/** Add uniform to group */
add(name: string, uniforms: Dict<any>, _static?: boolean): void;
/**
* Create uniform group with UBO buffer
* @param uniforms - Uniform data
* @param _static - Static flag
*/
static uboFrom(uniforms: Dict<any>, _static?: boolean): UniformGroup;
/**
* Create uniform group from data
* @param uniforms - Uniform data
* @param _static - Static flag
*/
static from(uniforms: Dict<any>, _static?: boolean): UniformGroup;
/** Destroy uniform group */
destroy(): void;
}
type UniformsSyncCallback = (ud: any, uv: any, renderer: Renderer, syncData: any) => void;WebGL-specific program wrapper that manages compiled GPU programs.
/**
* GLProgram wraps compiled WebGL programs
* Manages GPU program objects and uniform locations
*/
class GLProgram {
/** WebGL program object */
program: WebGLProgram;
/** Uniform location cache */
uniformData: {[key: string]: any};
/** Uniform group data */
uniformGroups: {[key: string]: any};
/** Uniform block data */
uniformDirtyGroups: {[key: string]: boolean};
/**
* Create GLProgram from Program
* @param program - Source program
*/
constructor(program: Program);
/** Destroy WebGL program */
destroy(): void;
}Utility functions for shader compilation and management.
/**
* Generate WebGL program from vertex and fragment shaders
* @param gl - WebGL context
* @param vertexSrc - Vertex shader source
* @param fragmentSrc - Fragment shader source
* @param attributeLocations - Attribute location bindings
* @param transformFeedbackVaryings - Transform feedback varyings
*/
function generateProgram(
gl: IRenderingContext,
vertexSrc: string,
fragmentSrc: string,
attributeLocations?: {[key: string]: number},
transformFeedbackVaryings?: {
names: string[];
bufferMode: 'separate' | 'interleaved';
}
): WebGLProgram;
/**
* Get a WebGL test context for feature detection
* @param failIfMajorPerformanceCaveat - Fail if performance caveat
*/
function getTestContext(failIfMajorPerformanceCaveat?: boolean): IRenderingContext | null;
/**
* Check maximum if statements supported in shaders
* @param maxIfs - Maximum if statements to test
* @param gl - WebGL context
*/
function checkMaxIfStatementsInShader(maxIfs: number, gl: IRenderingContext): number;
/**
* Generate uniform buffer synchronization function
* @param group - Uniform group
* @param uniformData - Uniform metadata
*/
function generateUniformBufferSync(group: UniformGroup, uniformData: {[key: string]: any}): UniformsSyncCallback;
/**
* Get uniform parsers for different data types
*/
const uniformParsers: {
[key: string]: {
test: (data: unknown, uniform: any) => boolean;
code: string;
codeUbo: string;
};
};Usage Examples:
import { Shader, Program, UniformGroup } from "@pixi/core";
// Create basic shader
const vertexShader = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}
`;
const fragmentShader = `
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec4 uColor;
void main(void) {
gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor;
}
`;
// Create shader with uniforms
const shader = Shader.from(vertexShader, fragmentShader, {
uSampler: texture,
uColor: [1.0, 1.0, 1.0, 1.0],
projectionMatrix: new Matrix()
});
// Create shader program separately
const program = Program.from(vertexShader, fragmentShader, 'basic-shader');
const uniformGroup = UniformGroup.from({
uSampler: texture,
uColor: [1.0, 0.5, 0.0, 1.0]
});
const customShader = new Shader(program, uniformGroup);
// Using Uniform Buffer Objects for better performance
const uboGroup = UniformGroup.uboFrom({
projectionMatrix: new Matrix(),
viewMatrix: new Matrix(),
lightPosition: [0, 0, 0],
lightColor: [1, 1, 1, 1]
}, false); // dynamic uniforms
// Update uniforms
shader.uniforms.uColor = [1.0, 0.0, 0.0, 1.0]; // Red tint
uboGroup.uniforms.lightPosition = [100, 100, 0];
uboGroup.update(); // Sync to GPU
// Advanced shader with multiple uniform groups
const advancedShader = new Shader(program, {
// Textures
uSampler: texture,
uNormalMap: normalTexture,
// Material properties
uMaterial: UniformGroup.from({
ambient: [0.2, 0.2, 0.2],
diffuse: [0.8, 0.8, 0.8],
specular: [1.0, 1.0, 1.0],
shininess: 32.0
}),
// Lighting
uLighting: UniformGroup.uboFrom({
lightDirection: [0.0, -1.0, -1.0],
lightColor: [1.0, 1.0, 1.0],
ambientLight: [0.1, 0.1, 0.1]
})
});
// Extract program information
console.log('Attributes:', program.attributeData);
console.log('Uniforms:', program.uniformData);
// Cleanup
shader.destroy();
program.destroy();
uniformGroup.destroy();Advanced Uniform Management:
// Custom uniform synchronization
const customUniforms = new UniformGroup({
time: 0,
resolution: [800, 600],
mouse: [0, 0]
});
// Manual uniform updates in render loop
function render(deltaTime) {
customUniforms.uniforms.time += deltaTime;
customUniforms.uniforms.mouse = [mouseX, mouseY];
customUniforms.update();
renderer.render(scene);
}
// Uniform buffer objects for large uniform sets
const sceneUniforms = UniformGroup.uboFrom({
viewMatrix: new Matrix(),
projectionMatrix: new Matrix(),
cameraPosition: [0, 0, 0],
fogColor: [0.5, 0.5, 0.5],
fogNear: 10.0,
fogFar: 100.0
});
// Batch uniform updates
sceneUniforms.uniforms.viewMatrix = camera.viewMatrix;
sceneUniforms.uniforms.projectionMatrix = camera.projectionMatrix;
sceneUniforms.uniforms.cameraPosition = camera.position;
sceneUniforms.update(); // Single GPU syncinterface IUniformData {
index: number;
type: string;
size: number;
offset: number;
name: string;
value: any;
}
interface IAttributeData {
type: string;
size: number;
location: number;
name: string;
}
type UniformsSyncCallback = (ud: any, uv: any, renderer: Renderer, syncData: any) => void;Install with Tessl CLI
npx tessl i tessl/npm-pixi--core