ジオメトリの表示

ジオメトリクラス群の構造

実際の頂点データを格納するクラスはPrimitiveクラスです。複数のPrimitiveクラスをまとめるクラスとしてMeshクラスがあります。 各PrimitiveクラスはMaterialクラスのインスタンスを所有します。

const primitive = new Rn.Plane();
primitive.generate({
  width: 1, height: 1, uSpan: 1, vSpan: 1, isUVRepeat: false,
  material: Rn.MaterialHelper.createPbrUberMaterial();
});
const mesh = new Mesh();
mesh.addPrimitive(primitive);

MeshComponentへの追加

meshがセットアップできたら、Meshを持たせたいEntityのMeshComponentにmeshを追加します。

const meshEntity = Rn.EntityHelper.createMeshEntity();
const meshComponent = meshEntity.getMesh();
meshComponent.setMesh(mesh);

レンダーループを回す

Rhodoniteの最も簡単な使い方では、ここまでのコーディングだけでRhodoniteエンジンが生成されたMeshとEntityを自動的に認識し、以下のレンダーループを回すだけでメッシュの描画が行われます。

Rn.System.startRenderLoop(()=>{
  Rn.System.processAuto();
});

また、Rhodoniteに自動的にMeshを持つEntityを認識させるのではなく、明示的に指定することもできます。その場合は、ExpressionとRenderPassを使います。 Expressionは一つのCG表現の単位と考えてください。Expressionは複数のRenderPassを持ちます。RenderPassはリアルタイムグラフィックスにおけるレンダーパスの概念に相当します。

const renderPass = new Rn.RenderPass();
renderPass.addEntities([meshEntity]);
const expression = new Rn.Expression();
expression.addRenderPasses([renderPass]);

Rn.System.startRenderLoop(()=>{
  Rn.System.process([expression]);
});

MeshHelperを使って簡単にMeshを生成する

MeshHelperオブジェクトを使って、いくつかの基本形状を作ることができます。これらの関数は作成した基本形状のentityを返します。

const cubeEntity = Rn.MeshHelper.createCube();
cubeEntity.eulerAngles = Rn.Vector3.fromCopy3(90, 0, 0);
cubeEntity.position = Rn.Vector3.fromCopy3(0, 3, 0);

以下の基本形状が用意されています。

• Plane - Rn.MeshHelper.createPlane()
• Grid - Rn.MeshHelper.createGrid()
• Cube - Rn.MeshHelper.createCube()
• Axis - Rn.MeshHelper.createAxis()
• Joint - Rn.MeshHelper.createJoint()
• Line - Rn.MeshHelper.createLine()
• Sphere - Rn.MeshHelper.creteSphere()

参考となるサンプルです。

• Primitives

マテリアルを渡す

各種生成関数では、引数にマテリアルを渡せます。

const material = Rn.MaterialHelper.createClassicUberMaterial();
material.setParameter(Rn.ShaderSemantics.DiffuseColorFactor, Rn.Vector4.fromCopy4(1, 0, 0, 1));
const cube = Rn.MeshHelper.createCube({
    material: material
});

頂点データを自前で用意してPrimitiveオブジェクトを作る

次のようにして、頂点データを定義することができます。 定義した頂点データはPrimitiveクラスに設定します。

function readyBasicVerticesData() {

    const positions = new Float32Array([
         0.0,  0.5, 0.0, // v0
        -0.5, -0.5, 0.0, // v1
         0.5, -0.5, 0.0  // v2
    ]);

    const colors = new Float32Array([
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
    ]);

    const indices = new Uint32Array([
        0, 1, 2
    ]);

    const primitive = Rn.Primitive.createPrimitive({
        indices: indices,
        attributeSemantics: [Rn.VertexAttribute.Position.XYZ, Rn.VertexAttribute.Color0.XYZ],
        attributes: [positions, colors],
        primitiveMode: Rn.PrimitiveMode.Triangles
    });

    return primitive;
}

コード全体を以下に示します。

function readyBasicVerticesData() {

    const positions = new Float32Array([
         0.0,  0.5, 0.0, // v0
        -0.5, -0.5, 0.0, // v1
         0.5, -0.5, 0.0  // v2
    ]);

    const colors = new Float32Array([
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
    ]);

    const indices = new Uint32Array([
        0, 1, 2
    ]);

    const primitive = Rn.Primitive.createPrimitive({
        indices: indices,
        attributeSemantics: [Rn.VertexAttribute.Position.XYZ, Rn.VertexAttribute.Color0.XYZ],
        attributes: [positions, colors],
        primitiveMode: Rn.PrimitiveMode.Triangles
    });

    return primitive;
}

const load = async function () {
    const c = document.getElementById('world');
    await Rn.System.init({
      approach: Rn.ProcessApproach.DataTexture,
      canvas: c
    });

    resizeCanvas();
    
    window.addEventListener("resize", function(){
        resizeCanvas();
    });
    
    function resizeCanvas() {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        system.resizeCanvas(c.width, c.height);
    }
    
    const primitive = readyBasicVerticesData();

    const originalMesh = new Rn.Mesh();
    originalMesh.addPrimitive(primitive);
    
    const firstEntity = Rn.EntityHelper.createMeshEntity();

    const meshComponent = firstEntity.getMesh();
    meshComponent.setMesh(originalMesh);

    Rn.System.startRenderLoop(()=>{
      Rn.System.processAuto();
    });
}

document.body.onload = load;

jsfiddle版はこちらです。

https://jsfiddle.net/emadurandal/xgw9e3y7/4/