Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
@types/webgl2
Advanced tools
TypeScript definitions for 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.
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);
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.
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.
npm install --save @types/webgl2
This package contains type definitions for webgl2 (https://www.khronos.org/registry/webgl/specs/latest/2.0/).
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/webgl2.
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;
};
These definitions were written by Nico Kemnitz, and Adrian Blumer.
FAQs
TypeScript definitions for webgl2
The npm package @types/webgl2 receives a total of 89,968 weekly downloads. As such, @types/webgl2 popularity was classified as popular.
We found that @types/webgl2 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.