Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
regl is a functional abstraction for WebGL that simplifies the process of creating and managing WebGL contexts and rendering pipelines. It provides a declarative API for defining shaders, buffers, and other WebGL resources, making it easier to build complex graphics applications.
Creating a WebGL Context
This code initializes a new regl instance, which sets up a WebGL context and prepares it for rendering.
const regl = require('regl')();
Drawing a Simple Triangle
This code defines a simple triangle using regl. It specifies the vertex and fragment shaders, the vertex positions, and the draw call. The triangle is drawn in each frame.
const drawTriangle = regl({
frag: `
precision mediump float;
void main () {
gl_FragColor = vec4(1, 0, 0, 1);
}
`,
vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}
`,
attributes: {
position: [
[-1, 0],
[0, -1],
[1, 1]
]
},
count: 3
});
regl.frame(() => {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawTriangle();
});
Managing Buffers
This code demonstrates how to create and use a buffer in regl. The buffer stores vertex positions, which are then used in the draw call.
const positionBuffer = regl.buffer([
[-1, 0],
[0, -1],
[1, 1]
]);
const drawWithBuffer = regl({
frag: `
precision mediump float;
void main () {
gl_FragColor = vec4(0, 1, 0, 1);
}
`,
vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}
`,
attributes: {
position: positionBuffer
},
count: 3
});
regl.frame(() => {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawWithBuffer();
});
Using Uniforms
This code shows how to use uniforms in regl. The uniform 'color' is passed to the fragment shader, allowing dynamic control over the color of the rendered triangle.
const drawWithUniforms = regl({
frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}
`,
vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}
`,
attributes: {
position: [
[-1, 0],
[0, -1],
[1, 1]
]
},
uniforms: {
color: [0, 0, 1, 1]
},
count: 3
});
regl.frame(() => {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawWithUniforms();
});
Three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a higher-level abstraction compared to regl, making it easier to create complex 3D scenes with less code. However, it may not offer the same level of control and performance optimization as regl.
PixiJS is a 2D rendering engine that uses WebGL for high-performance graphics. It is designed for creating interactive graphics and games, offering a simpler API compared to regl. While it is more focused on 2D graphics, it can also handle some 3D rendering tasks.
Babylon.js is a powerful, open-source 3D engine that provides a comprehensive set of features for creating 3D applications. It offers a higher-level API than regl, making it easier to get started with 3D graphics, but it may not provide the same fine-grained control over WebGL resources.
This repo is an attempt at building some new functional abstractions for working with WebGL. It is still pretty experimental right now, so expect things to change a lot in the near future. If you want to know more about why I am writing this thing, take a look at the rationale.
In regl, you write functions which transform data into sequences of WebGL draw calls. These functions are then partially evaluated at run time into optimized JavaScript code. Here is a sketch of how this might look:
// NOTE: This doesn't work yet, it is just for illustration
const regl = require('regl')()
// This creates a new partially evaluated draw call. We flag the dynamic
// parts of the draw call using the special `regl.dynamic` variable
const draw = regl({
frag: `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
attributes: {
position: regl.buffer(new Float32Array([-2, -2, 4, -2, 4, 4]))
},
uniforms: {
// This makes the color uniform dynamic
color: regl.dynamic
},
count: 3
}).draw
function render() {
// clear contents of the drawing buffer
regl.clear({
color: [0, 0, 0, 0],
depth: 1
})
// draw a triangle
drawTriangle({
uniforms: {
color: [
Math.cos(Date.now() * 0.001),
Math.sin(Date.now() * 0.0008),
Math.cos(Date.now() * 0.003),
1
]
}
})
// schedule next render event
requestAnimationFrame(render)
}
render()
var regl = require('regl')([options])
var regl = require('regl')(element, [options])
var regl = require('regl')(canvas, [options])
var regl = require('regl')(gl, [options])
regl.buffer(options)
regl.texture(options)
regl.fbo(options)
resource(options)
Updates a resource
resource.destroy()
Destroy resource
regl(options)
regl.destroy()
var REGLError = require('regl/error')
(c) 2016 MIT License
Supported by the Freeman Lab and the Howard Hughes Medical Institute
0.0.0
FAQs
regl is a fast functional WebGL framework.
The npm package regl receives a total of 186,215 weekly downloads. As such, regl popularity was classified as popular.
We found that regl demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers 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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.