Pins and Curves Engine

Pins and Curves Engine is an innovative open-source 2D graphics framework designed to simplify GPU programming while retaining the essential elements of its architecture. This framework serves as a bridge between the intricacies of WebGL and user-friendly high-level creative coding solutions, making it accessible for both beginners and professionals alike.

Key Features

• Learn with Ease: The framework enables newcomers to grasp graphics pipelines and GPU resource flow without the cumbersome setup required by raw WebGL.
• Rapid Prototyping: Experienced developers can swiftly create and manage graphics pipelines using a top-level serializable format.

This project is currently in the early stages of development, having originated as the rendering engine for Pins and Curves, a motion design editor. Contributions during this formative period are welcomed and encourage a collaborative open-source approach. Interested participants can reach out at martin@pinsandcurves.app.

Example: Default Triangle

Here’s a brief coding example illustrating how to define a default triangle using the framework:

function defaultTriangle(height: number) {
    const triangle = Vertices(
        {
            attributes: {
                pos: 'vec2',
                uv: 'vec2',
            }
        }, 
        {
            triangleCount: 1,
            vertices: () => ([
                { pos: [-1,-1], uv: [0,0] },
                { pos: [0,height], uv: [0,1] },
                { pos: [1,-1], uv: [1,0] }
            ]),
            indices: () => ([0, 1, 2,])
        }, 
        [height]
    );
    const outputTexture = Texture(
        {
            width: 1920,
            height: 1080,
        }, 
        [
            DrawOp(
                triangle,
                () => `
                out vec2 v_uv;
                void main() {
                    gl_Position = vec4(pos,0.,1.);
                    v_uv = uv;
                }
                `,
                () => `
                in vec2 v_uv;
                void main() {
                    outColor = vec4(v_uv, 1.0, 1.0);
                }`
            )
        ], 
        []
    );
    return { triangle, outputTexture };
}
gfx.update(defaultTriangle(1));

This code generates a triangle that can be visualized using linked rendering tools.

Notable Features

• RenderGraph API: Construct GPU pipelines as functions returning a RenderGraph, integrating Textures and various buffers streamline the drawing process.
• Reactive Authoring Model: Each invocation of a function produces a new RenderGraph. The framework compares changes between graphs dynamically, thus only updating what is necessary.
• Virtualized Resources: The engine efficiently maps logical resources to GPU memory, optimizing reuse through techniques like texture-memory aliasing.
• Composable Pipelines: Facilitate the use of partial RenderGraphs as plugins, promoting modularity and reusability.
• Serializable Format: RenderGraphs can be serialized and transmitted, allowing for server-side generation or real-time networked pipeline composition.
• Future Backends: Currently, support is limited to WebGL2, with plans for integrating WebGPU.

Playground

Explore practical examples of the framework by visiting the playground here.

In summary, the Pins and Curves Engine offers an exceptional opportunity for developers looking to enhance their graphics programming skills or prototype with ease, all while embracing a modern approach to 2D rendering on the web.