addComponent vs createXXX

There seem to be two different ways to create/add meshes – addComponent and createXXX.

What are the relative merits of each method?

It seems that addComponent doesn’t work for torus or capsule. Is this correct?

I have the following code for createXXX, is it correct and can it be simplified?

var node = new pc.GraphNode();
var mesh = pc.createBox(app.graphicsDevice);
var material = new pc.StandardMaterial();
var meshInstance = new pc.MeshInstance(node, mesh, material);
var model = new pc.Model();
model.graph = node;
model.meshInstances = [meshInstance];


Generally you can see it as two layers of abstraction, there is “low-level” which is about creating nodes, some mesh data and adding it to scene draw calls.
And there is “framework” layer, which is about entities and hides all low-level stuff in simplified functions.

You can use both ways actually. And you can mix them, for example you can still add component, but then change model of it which you just created using createBox method.

Component system tries to simplify life and hide a lot of stuff, like when you enable/disable entities, it handles adding/removing model from draw calls, or when assets get loaded, like textures on materials etc, it will handle that and make sure things are reflecting all async assets loading/changing, etc.

But doesn’t addComponent require app.root.addChild (which adds to the root)
while createXXX requires app.scene.addModel (which adds to the scene)?

So the output of the two functions are placed in different parts of the app hierarchy?

Actually, it seems even more involved than that, one method creates a model, node, etc. while the other creates an entity. Aren’t the two fundamentally different?


You can check the source:

Entity inherits Node

There is scene Hierarchy, which is parent/child relationship between nodes/entities, and there is a device draw calls list, which is just an array of what needs to be evaluated for rendering.

You can manually manage both, and relate your models to nodes and add them to draw calls list.
And you can use component system, that handles all that for you.

Component system - is not “alternative” layer, it is layer “above”.

I’d prefer to use the component system, so to get around its lack of support for “torus” I’ve come up with this:

var mesh1 = new pc.Entity('cube');
mesh1.addComponent('model', {
  type: 'box'//type

mesh1.cb_tag = type + "mesh";

var node = new pc.GraphNode();
var mesh = geometryTypes[type](app.graphicsDevice, geometryDefaults[type]);
var meshInstance = new pc.MeshInstance(node, mesh, defaultMaterial);

mesh1.model.meshInstances = [meshInstance];

1 Like

Actually, this doesn’t seem to work properly. The torus appears on screen but attempts to translate it (with setLocalPosition don’t work. Comment out mesh1.model.meshInstances = [meshInstance]; and the box is placed correctly.

Think I’ve got it.

var meshInstance = new pc.MeshInstance(mesh1.model.meshInstances[0].node, mesh, defaultMaterial);