Interaction with Playcanvas JS

Hi guys,

New PlayCanvas user, minimal JS/HTML5 experience but decent python/C++ experience.

I’m building a simulation in python/C++ that I’d like to visualize in a web browser leveraging PlayCanvas. Basic particle system visualization. There’s a few reasons why I’d like to avoid doing the whole sim on the front end in JS; most prominently, the scale of the simulation will require a dedicated machine with hefty processing power (or pool of machines, we’ll see). Secondary reason is I’m just not very experienced in JS!

Admittedly weak in JS, I thought I’d enquire here about a nice, vanilla, straightforward way to generate a set of entities (similarly to the “Falling Shapes” example), and use an update() function to periodically poll some external data source for current positions, angles, etc, and looping through the scene entities accordingly.

For now, I’m not concerned with optimal ways to interact with an optimal database, since I’m sure everyone’s got opinions there as well :smile: I’m really just asking a more newbie question; how the heck do I update all the positions of N entities from say, a json dictionary I magically received from somewhere?

Thanks a ton!

I saw some related examples scattered around the developer site. I hope PlayCanvas team will organize those examples so that beginners like us can find them easily!

Programmatically Creating Entities
http://developer.playcanvas.com/en/tutorials/advanced/programmatically-creating/

Tutorial: Reading JSON data
https://playcanvas.com/project/362232/overview/tutorial-read-json-data

Thanks @nakata0705,

We’re gradually bringing all those tutorial projects into the documentation. Just takes time :sweat:.

I’ve updated and add the JSON data tutorial:
http://developer.playcanvas.com/en/tutorials/beginner/loading-json/

In now includes a section on loading JSON data from a remote server, which is what you would need @csullivan. Hopefully you can follow it.

To be more specific about what you want to do. If you can grab JSON data over HTTP like in the tutorial. Then simply iterate over some list of entities and set their positions:

// get json from somewhere and store in `var data`
for (var i = 0; i < entities.length; i++) {
    entityData = data[i];
    entities[i].setLocalPosition(entityData.x, entityData.y, entityData.z);
}

The problems I see you having with your suggestion are:

Latency - How often are you fetching data and what are the Entities doing in the meantime? Are you going interpolating locally while waiting for data? Fetching data over HTTP like that is not very efficient and you’ll be looking at 50-500ms between receiving updates. Maybe thinking about opening a websocket and sending your data like that?

Rendering - When you talk about simulating a particle system are you talking about very large number of particles? If so, creating thousands of Entities is probably not how you want to do things. For example, the particle system in PlayCanvas doesn’t create entities for every particle…

Thanks guys. @dave I’ll experiment with the approach above shortly. For now I was able to loop through app.root._children[i], which I’m sure is bad practice. Sounds like websockets will be the way to go for latency; I’ll have to look into that a bit more. I don’t anticipate the issue with rendering will be entity count, but I’ll look into the particle system just for kicks!

Try using app.root.getChildren() as that is the public API. :slight_smile:

Hello, I really need a more profound solution for using JSON in relation to MySQL (like this Convert mysql to json).

Read this also: MySQL usage by JSON as read/write agent