RedGPU V3.9.1-Alpha

English

한국어

English

한국어

Appearance

Getting Started ​

RedGPU is a high-performance 3D engine designed based on the next-generation web graphics standard, WebGPU. Through powerful Compute Shader utilization and low overhead, it provides native-level immersive graphics experiences in the web environment.

This guide walks you through the process of building your first 3D application using RedGPU step-by-step.

1. Prerequisites ​

Since WebGPU is a new technology, you need to check the execution environment below before starting.

  • Browser Support: A modern browser that supports WebGPU, such as Chrome 113+ or Edge 113+, is required.
  • Check Support: You can check the current browser and hardware's WebGPU support status at WebGPU Report.
  • Secure Context: The WebGPU API only works in a secure environment (https://) or a local environment (http://localhost).

2. Installation ​

RedGPU can be integrated into your project immediately via ES Module (ESM) without any complex installation process.

javascript
import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

3. Implementing the First 3D Scene ​

Let's look at the core operation of RedGPU through the most basic form, a 'rotating cube'.

HTML Structure (index.html) ​

Configure the <canvas> element where the rendering result will be displayed.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RedGPU - Quick Start</title>
    <style>
        body { margin: 0; overflow: hidden; background: #111; }
        canvas { display: block; width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <canvas id="redgpu-canvas"></canvas>
    <script type="module" src="./main.js"></script>
</body>
</html>

JavaScript Implementation (main.js) ​

In RedGPU, the flow proceeds in the order of Initialization (Init) → Resource Creation (Scene/Camera/Mesh) → View Setup (View) → Rendering Loop (Start).

javascript
import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

const canvas = document.getElementById('redgpu-canvas');

// 1. Initialize RedGPU system
RedGPU.init(
    canvas,
    (redGPUContext) => {
        // Upon successful initialization, the core redGPUContext object is delivered.

        // 2. Create Scene: Virtual space where 3D objects are placed
        const scene = new RedGPU.Display.Scene();

        // 3. Create Camera: Setup Perspective camera
        const camera = new RedGPU.Camera.PerspectiveCamera(redGPUContext);
        camera.z = -5; // Move camera back from the origin

        // 4. Create Mesh: Combination of shape (Box) and material (Color)
        const geometry = new RedGPU.Primitive.Box(redGPUContext); 
        const material = new RedGPU.Material.ColorMaterial(redGPUContext, '#00CC99');
        const mesh = new RedGPU.Display.Mesh(redGPUContext, geometry, material);
        
        scene.addChild(mesh); // Add mesh to scene

        // 5. Setup View (View3D): Define to render a specific scene with a specific camera
        const view = new RedGPU.Display.View3D(redGPUContext, scene, camera);
        redGPUContext.addView(view); // Register view in context

        // 6. Run Renderer and start animation
        const renderer = new RedGPU.Renderer();
        renderer.start(redGPUContext, (time) => {
            // Called every frame to implement animation.
            mesh.rotationX += 1;
            mesh.rotationY += 1;
        });
    },
    (error) => {
        // Handle initialization failure such as browser not supporting WebGPU
        console.error('RedGPU initialization failed:', error);
        alert('Could not initialize WebGPU. Please check your execution environment.');
    }
);

Live Demo ​

Modify the code directly and check the results in real-time through the interactive example below.


System Structure & Execution Flow ​

Diagram showing major class relationships and application lifecycle in RedGPU.

Execution Process ​

Core Components ​

ClassRole Definition
RedGPU.initRequests WebGPU device permission and creates the core context.
RedGPU.RendererManages the rendering loop that draws registered views to GPU hardware.
RedGPU.Display.SceneThe root container of the virtual space where 3D objects like meshes and lights are placed.
RedGPU.Display.View3DThe unit that determines which scene to output to the screen from which viewpoint (Camera).

Next Steps ​

Now that you've learned basic screen composition, explore deeper features of RedGPU through the topics below.

  • RedGPU Context: Detailed configuration and options guide for engine context.
  • Mesh: How to create and control objects by combining geometry and material.
  • Lighting & Shadow: Realistic texture and shadow expression reacting to light.
  • Environment: How to set up Skybox and IBL.
  • Extended Objects: How to use external 3D models and sprites.
  • API Reference: Full class specification and technical documentation.