跳到主要内容

开始使用

让我们开始尝试使用ORE，构建一个场景：视窗中的一个正方形。通过这篇教程，您可以了解到以下内容：

  • 建立渲染窗口
  • 构建空舞台的渲染场景
  • 定义渲染几何与材质，构建渲染节点
  • 添加渲染节点到场景中
  • 更新场景

从一个空舞台开始​

我们不妨从一个最简单的场景开始，比如一个只有背景舞台的场景。通过这个简单示例，大家可以初步了解到在ORE中，如何创建一个场景。

建立渲染窗口​

我们的第一步从定义画布开始，之后您的场景将会被绘制到画布之中。

<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>

正式的程序从导入ORE core中的类开始，我们需要用这些类来构建和绘制这个场景。

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

首先我们获取之前定义好的画布，并将它传递给渲染引擎

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);

构建场景​

我们正式开始构建场景，一个渲染通道需要有三个元素：舞台、演员和摄像机。这里我们只需要定义一个只有背景的空舞台。

  • colorMask：背景的颜色
  • depthMask：背景深度
const background = Background({
    size: ivec2(canvas.width, canvas.height),
    colorMask: clr4(0.9, 0.8, 0.7, 1.0),
    depthMask: float(1.0)
});

即便只有一个空舞台，我们也可以组织成一个渲染通道，从而构建场景。

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

至此，您就可以调用渲染引擎来绘制这个空舞台了。

updateScene(scene);
renderer.render(scene);

添加一个演员​

如果要使用ORE在背景上绘制出演员的图像，那么我们就需要定义渲染节点node，它是由geometry, material组成。

定义几何​

这里我们定义一个简单的几何———正方形，那就需要分别定义它的顶点、顶点间的连接方式。


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])
};

当然您也可以直接使用ORE的geometry库中的quad类，定义正方形


import { quad } from 'ore.geometry';

const geometry = quad();

定义材质​

在WebGL中，通过GLSL（着色语言）编写的可编程着色器可以精细控制几何的材质，实现诸如颜色、光照、纹理和阴影等效果。 在下面的代码中分别给出了顶点着色器 vs 和片元着色器 fs，并应用到材质的定义中。

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)
    }
};

您可以直接使用ORE的material库中的各种材质类，快速定义一个光照材质：


import { head_light_color } from 'ore.material';

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

添加到已有场景中​

定义好了几何和材质后，便可以组装成一个渲染节点node，然后将该节点加入到渲染通道中。至此，我们已经实现了在舞台上添加一个演员：正方形。


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

updatePass(pass);

重新绘制场景​

renderer.render(scene);

最终的hello webgl网页​

按照下面这个方式，您可以快速地将上面创建的场景显示在一个网页中。

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>