@types/webgl2

What is @types/webgl2?

@types/webgl2 provides TypeScript type definitions for the WebGL 2 API, which is used for rendering 2D and 3D graphics within any compatible web browser without the use of plug-ins.

What are @types/webgl2's main functionalities?

Creating a WebGL2 Rendering Context

This code demonstrates how to create a WebGL2 rendering context from a canvas element. If the browser does not support WebGL2, an error message is logged.

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (!gl) {
  console.error('WebGL2 is not supported by your browser.');
}

Setting Up Shaders

This code sets up basic vertex and fragment shaders, compiles them, and links them into a WebGL2 program. The shaders are then used in the rendering context.

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;
const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1, 0, 0.5, 1);
  }
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

Drawing a Simple Triangle

This code creates a buffer for a simple triangle's vertices, binds it, and sets up the vertex attribute pointers. Finally, it clears the canvas and draws the triangle.

const vertices = new Float32Array([
  0, 1, 0,
  -1, -1, 0,
  1, -1, 0
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Other packages similar to @types/webgl2

three

Three.js is a popular JavaScript library that simplifies the use of WebGL for 3D graphics. It provides higher-level abstractions and utilities for creating and managing 3D scenes, making it easier to work with compared to the lower-level WebGL2 API.

babylonjs

Babylon.js is another powerful 3D engine that uses WebGL. It offers a comprehensive set of features for creating 3D games and applications, including physics, animations, and more. It abstracts much of the complexity of directly using WebGL2.

README

Installation

npm install --save @types/webgl2

Summary

This package contains type definitions for webgl2 (https://www.khronos.org/registry/webgl/specs/latest/2.0/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/webgl2.

index.d.ts

interface HTMLCanvasElement extends HTMLElement {
    getContext(
        contextId: "webgl2" | "experimental-webgl2",
        contextAttributes?: WebGLContextAttributes,
    ): WebGL2RenderingContext | null;
}

interface ImageBitmap {
    readonly width: number;
    readonly height: number;
    close(): void;
}

interface WebGLQuery {
}

declare var WebGLQuery: {
    prototype: WebGLQuery;
    new(): WebGLQuery;
};

interface WebGLSampler {
}

declare var WebGLSampler: {
    prototype: WebGLSampler;
    new(): WebGLSampler;
};

interface WebGLSync {
}

declare var WebGLSync: {
    prototype: WebGLSync;
    new(): WebGLSync;
};

interface WebGLTransformFeedback {
}

declare var WebGLTransformFeedback: {
    prototype: WebGLTransformFeedback;
    new(): WebGLTransformFeedback;
};

interface WebGLVertexArrayObject {
}

declare var WebGLVertexArrayObject: {
    prototype: WebGLVertexArrayObject;
    new(): WebGLVertexArrayObject;
};

Additional Details

• Last updated: Tue, 30 Jan 2024 21:35:45 GMT
• Dependencies: none

Credits

These definitions were written by Nico Kemnitz, and Adrian Blumer.