Skip to main content

Getting Started

Let’s dive into using ORE to create a simple scene: a quad in a viewport. Through this tutorial, you’ll learn the following:

  • Setting up a rendering window
  • Building a rendering scene with an empty stage
  • Defining geometry and material to create rendering node
  • Adding rendering nodes to the scene
  • Updating and rendering the scene

Starting with an Empty Stage​

We’ll begin with the simplest possible scene: an empty stage with just a background. This example will introduce you to the basics of creating a scene in ORE.

Setting Up the Rendering Window​

The first step is defining the canvas where your scene will be rendered.

<body>
  <canvas id="demo" draggable="false" style="width: 800px; height: 600px" width="1200" height="900"></canvas>
  <script type="module" src="./get-started.ts"></script>
</body>

The actual program begins by importing classes from the ORE core module, which are essential for constructing and rendering the scene.

import { Renderer, Background, JPass, Pass, JScene, clr4, float, ivec2 } from 'ore.core';

Next, we retrieve the canvas element defined earlier and pass it to the renderer.

const canvas = document.getElementById("demo") as HTMLCanvasElement;
const scale = window.devicePixelRatio ?? 1;
canvas.width = canvas.clientWidth * scale;
canvas.height = canvas.clientHeight * scale;

const renderer = new Renderer(canvas);

Building the Scene​

Now we’ll construct the scene. A rendering pass requires three elements: a stage, actors, and a camera. In this example, we’ll define an empty stage with only a background.

  • colorMask: The background color
  • depthMask: The background depth
const background = Background({
    size: ivec2(canvas.width, canvas.height),
    colorMask: clr4(0.9, 0.8, 0.7, 1.0),
    depthMask: float(1.0)
});

Even with just an empty stage, we can organize it into a rendering pass to build the scene.

const pass: JPass = Pass({
    background: background,
});
const scene: JScene = {
    name: 'scene',
    passes: [pass],
};

Finally, you can use the renderer to draw this empty stage.

renderer.render(scene);

Adding an Actor​

To draw an actor on the stage with ORE, we need to define a rendering node (node), which consists of geometry and material.

Defining Geometry​

Here, we’ll define a simple geometry—a square—by specifying its vertices and the connections between them.

import { JGeometry } from 'ore.ore';

const geometry: JGeometry = {
    vertices: {
        positions: Vertices([-0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5]),
    },
    indices: Triangles([0, 1, 2, 0, 2, 3])
};

Alternatively, you can use ORE’s built-in geometry library to define a square more easily:

import { quad } from 'ore.geometry';

const geometry = quad();

Defining Material​

In WebGL, programmable shaders written in GLSL (OpenGL Shading Language) allow fine control over a geometry’s material, enabling effects like color, lighting, textures, and shadows. Below are examples of a vertex shader (vs) and a fragment shader (fs), which are applied when defining the material.

const vs = `#version 300 es
in vec2 positions;

void main() {
    gl_Position = vec4(positions, 0.0, 1.0);
}`;
const fs = `#version 300 es
precision mediump float;

out vec4 fragColor;

void main() {
    fragColor = vec4(0.3, 0.5, 0.7, 1.0);
}`;
const material: JMaterial = {
    program: {
        vertex: vert(vs),
        fragment: frag(fs)
    }
};

You can also leverage ORE’s material library to quickly define a lighting material:

import { head_light_color } from 'ore.material';

const color = clr3(0.3, 0.5, 0.7);
const material = head_light_color(color);

Adding to the Scene​

Once the geometry and material are defined, they can be assembled into a rendering node (node), which is then added to the rendering pass. At this point, we’ve successfully added an actor—a square—to the stage.

const node: JNode = {
    name: 'test',
    mesh: {
        primitives: [{
            geometry: geometry,
            material: material
        }]
    }
};
pass.node = node;

updatePass(pass);

Redrawing the Scene​

Finally, render the updated scene:

renderer.render(scene);

The Final "Hello WebGL" Webpage​

By following the steps above, you can quickly display the created scene in a webpage.

hello webgl.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
</head>

<body>
  <canvas id="demo" draggable="false" style="width: 800px; height: 600px" width="1200" height="900"></canvas>
  <script type="module" src="./get-started.ts"></script>
</body>

</html>