Starriser: var the = new spacial ("strategy", {game: "for web-broser"});

[davidbm]

Hi, I’m David, the head graphic programmer of Arpic Games, a new game studio from Valencia (Spain). Our first project is Starriser.

Starriser is a web browser strategy game with a space opera background. The user has control of a planet and the troops in it. He can trade with other planets, fight intergalactic wars, pirate other user’s fleets, etc.

For now Starriser uses Canvas 2d, but I have mid-term plans to iterate to webGL. I’m studying playCanvas, three.js and other competitors. I like playCanvas very much and I’m seriously considering using it.

• I have several questions:
  Will the scene (Blender, Maya, etc) importer be downloadable?
• I have adapted the spinning cube demo to render one thousand cubes and the framerate fell to 30 FPS. Is performance the priority for the playCanvas team? (I consider that the team may have other priorities. Examples: Scalability, release dates, support, documentation, etc. And I consider that they are very good priorities).
• The demos in the webpage don’t work or have visual glitches in Chrome Mobile/Firefox Mobile on Android 4.4.4 (Moto G). What are the plans for mobile support? What platforms and versions?
• I read several questions on this page and I found this answer “We have this class but is not documented yet” (in the websockets abstraction layer question). What is the state/finish-progress of the documentation?

I realize that playCanvas is a huge effort and I’m amazed at the magnificent work that you have done. Thank you for this wonderful engine.

But, I need to know the answer to the previous questions in order to evaluate playCanvas as possible future engine of Starriser.

Thanks, David.

[dave]

Hi David,

Great to hear from you!

To answer your questions:

1. We don’t currently have any plans to release the importer as a client-side tool. There are several reasons for this. The main reason is that it is somewhat tied into our back-end process so would therefore become a separate project which would need updating and maintenance. We’re trying to avoid giving ourselves more to do See this discussion for more details. In particular we have plans for a stand-alone online importer which would provide a simple way for people to convert their assets without using the main site.

2. Performance is absolutely a high priority. We’ll look into what is causing your FPS drop. Could you give us some more details, like browser, OS, processor and graphics card?

3. Mobile is a very high priority for us. Many of our demos are built specifically with mobile in mind, and the engine should work everywhere that supports WebGL. Can you let us know which demos don’t work on mobile?

4. We maintain the documentation as we build the engine. The API reference is automatically generated with every stable release (these happen several times a week usually) so it is always completely up to date. However, once we document a method/class we usually consider it “released” which means we try very hard not to break compatibility or remove it. This means that there is sometimes a delay in documenting some methods when they have been written but we’re not quite ready to “release” them. In this case, we’re usually happy for people to use them on the proviso that they may change in the future with little warning.

Please let us know about how your evaluation goes and if we can be anymore help.

[davidbm]

Hi! Thanks for the quick answer.

1. In my opinion, a downloadable client gives a sense of security. And the community can be very creative with an Importer from several formats. At least document the format. If the Importer fail in the servers I need your support, but if I could download and it be open source I can modify the code and fix the problem. And you will benefit from the hotfix / features from community. Anyway, is only my opinion.

2. Ok, it’s a surprise in a code that attempts to abstract more than other competitors. Anyway I will make my own benchmarks and I will post the code and results here. For now, this is the code of 1000 cubes: I got 30 FPS in a i7 3610QM (2.3GHz), intel HD 4000, 16Gb of Ram, Windows 7 SP-1 and Firefox 32.0.

The results:
200 Cubes 60 FPS
350 Cubes 50 FPS
500 Cubes 40 FPS
750 Cubes 35 FPS
1000 Cubes 30 FPS
3000 Cubes 15 FPS
10000 Cubes 5 FPS

// Create a PlayCanvas application
"use strict";
var canvas = document.getElementById("application-canvas");
var app = new pc.fw.Application(canvas, {});
app.start();

// Fill the available space at full resolution
app.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW);
app.setCanvasResolution(pc.fw.ResolutionMode.AUTO);

// Create box entity
var e, c = 1000, es = [];
for (var i = 0; i < c; i++) {
    e = new pc.fw.Entity();
    es.push(e);
    e.setLocalPosition(Math.random() * 10 - 5, Math.random() * 10 - 5, Math.random() * 10 - 5);
    app.context.systems.model.addComponent(es[i], {
      type: "box",
  });
};

// Create camera entity
var cam = new pc.fw.Entity();
app.context.systems.camera.addComponent(cam, {
  clearColor: [0.1,0.1,0.1]
});

// Create directional light entity
var light = new pc.fw.Entity();
app.context.systems.light.addComponent(light);

// Add to hierarchy
for (var i = 0; i < es.length; i++) {
    app.context.root.addChild(es[i]);
};
app.context.root.addChild(cam);
app.context.root.addChild(light);

// Set up position and orientation
cam.setLocalPosition(0, 0, 10);
light.setEulerAngles(45, 0, 0);

var time = window.performance.now(), newTime = 0;
// Register an update event
app.on("update", function (dt) {
    var newTime = window.performance.now();
    document.title = Math.round(1000 / (newTime - time));
    time = newTime;
    var angles = es[0].getEulerAngles();
    for (var i = 0; i < c; i++) {
        es[i].setEulerAngles(angles.x + 30*dt, 0, 0);
    };
});

3 I test Swooop and Accelerally on my Moto G with Chrome 36.0.1985.131 and Firefox 31.0. The results are:

• Swooop-> Chrome -> Load Fail
• Accererally -> Chrome -> Visual error - ~2FPS
• Swooop-> Firefox -> Correct - ~10FPS
• Accererally -> Firefox -> Visual error - ~8FPS

Swooopin Chrome:

Accererally in Chrome:

Accererally in Firefox:

4 Ok, solved

[max]

Hi David.

If question regarding WebSockets are still in power, I have made small module to wrap up WebSockets functionality into layer with event-based mechanics, very similar to Socket.IO. https://github.com/Maksims/m.net.ws

[will]

Hi!
We will document the format as soon as we can as a starting point.
As for the benchmarks, here’s your code as a CodePen.
On Chrome, on 5 year old Dell M4500 laptop running Windows 8.1 with Intel® Core™ i7-820QM Processor
(8M Cache, 1.73 GHz), NVIDIA Quadro FX 1800M Graphics with 1GB dedicated memory, 16GB RAM, I get:

200 Cubes 60 FPS
350 Cubes 60 FPS
500 Cubes 60 FPS
750 Cubes 60 FPS
1000 Cubes 60 FPS
3000 Cubes 47 FPS
10000 Cubes 15 FPS

So it seems something is wrong here. Can you test in Chrome and let me know if the numbers are very different from Firefox. I wonder if there has been a performance regression in Firefox recently. I have noticed some differences myself.

As for Accelerally, it won’t work well on mobile at the moment. It uses the physics engine quite heavily which takes a lot of CPU and the edge detect full screen effect has some issues on mobile GPUs (this is a known issue). Dungeon Fury, for example, was optimized for mobile. SWOOOP isn’t yet optimized for mobile but we will do this work in the next few weeks.

[davidbm]

Hi!

In Chrome 36.0.1985.125m the results are:
200: 60 FPS (with peak of 120 FPS)
500: 60 FPS
1000: 30 FPS
3000: 18 FPS
10000: 6 FPS

it seems like the Intel HD 4000 be not enough.

Hi Max!

Thanks! But the question was about the documentation project. For the moment I did a layer of abstraction over socket.io. It could be well a plugin for socket.io in playCanvas.

[AdamRaz]

Not sure if I’m helping at all here, but the Quadro doesn’t seem that much more powerful than your HD 4000. At least not to result in more than double the performance at 3000 cubes. And your CPU is vastly more powerful than Will’s (sorry Will). Might it be something else? But Will knows his graphics soooo he probably has the answer.

NVIDIA Quadro FX 1800M

http://www.notebookcheck.net/Computer-Games-on-Laptop-Graphic-Cards.13849.0.html

Mobile Graphics Cards - Benchmark List

[davidbm]

Hmmm, maybe a intel driver problem?

Anyway, I’ll see if I can test the 1000 cubes demo on other computers. It seems like its a particular problem on my computer.

I that is the case, PlayCanvas earn points to be the next engine of Starriser.

Other topic. PlayCanvas is a Startup, right? How many people you are?

[will]

Great. I’d love to get any other performance stats that you collect.

PlayCanvas is indeed a startup, yes. The team is shown here.

[davidbm]

We are also a startup. We are in the incubator Momentum.do in Spain. On the sidewalk in front of plug and play!

I hope that you succes in your project, I have watched your team is super skilled!

Our vision is to reinvent the way you will enjoy MMO games. Accessed from anywhere at any time. Mobile, smart tv, console, browser, etc.

if PlayCanvas is as you describe it I think we have new engine for Starriser.

[will]

Sounds great David. We wish you luck and would be honored to be your external technology team. ;o)

So I like the sound of your vision. It aligns with us very well. We think HTML5 and WebGL technologies deliver that kind of gaming experience perfectly. If you need to discuss any of your plans or requirements privately, feel free to ping us an email at ‘support at playcanvas dot com’. Otherwise, we’re always here to help on the forum or Answers site.

[davidbm]

Hi!

Sorry for the lag . I tested the demo with a nvidia 650m in other laptop with the same CPU and same RAM and have the same results of the Dell M4500. I expected more, but it is better than the previous results.

It seem to be the intel driver with webgl.

Other topic:

I found a little slowdown every second in the demo. First i thought that the reason are that I get the angle of es[0] in a local variable, but I changed the code to this:

    // Create a PlayCanvas application
    "use strict";
    var canvas = document.getElementById("application-canvas");
    var app = new pc.fw.Application(canvas, {});
    app.start();

    // Fill the available space at full resolution
    app.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW);
    app.setCanvasResolution(pc.fw.ResolutionMode.AUTO);

    // Create box entity
    var e, c = 3000, es = [];
    for (var i = 0; i < c; i++) {
        e = new pc.fw.Entity();
        es.push(e);
        e.setLocalPosition(Math.random() * 10 - 5, Math.random() * 10 - 5, Math.random() * 10 - 5);
        app.context.systems.model.addComponent(es[i], {
          type: "box",
      });
    };

    // Create camera entity
    var cam = new pc.fw.Entity();
    app.context.systems.camera.addComponent(cam, {
      clearColor: [0.1,0.1,0.1]
    });

    // Create directional light entity
    var light = new pc.fw.Entity();
    app.context.systems.light.addComponent(light);

    // Add to hierarchy
    for (var i = 0; i < es.length; i++) {
        app.context.root.addChild(es[i]);
    };
    app.context.root.addChild(cam);
    app.context.root.addChild(light);

    // Set up position and orientation
    cam.setLocalPosition(0, 0, 10);
    light.setEulerAngles(45, 0, 0);


    var it = 0;
    app.on("update", function (dt) {
        for (var i = 0; i < c; i++) {
            es[i].setEulerAngles(it / 5, 0, 0);
        }
      it++;
    });

( finally I know how to use the editor! )

And the chrome inspector give me this:

A GC execution every ~250 ms. Why? I seem to be excessive for 3000 cubes. I’m using the PlayCanvas Engine v0.154.0-dev.

It is normal?

Finally:

Thanks for the offer! No doubt that we send you an email with questions and proposals!

For now, we will finish the first alpha for start the testing with users.

Now I am studying webgl and other technologies. I found that PlayCanvas, goocreate and turbulenz seems to be the only engines for work with a team (without mentioning the real-time editor of playCanvas, that its great).

Well, actually it is not so, the only engine that I achieve to execute in my computer is PlayCanvas and the 50% of the demos of goocreate.

Offtopic: What CMS you use for this forum?

[will]

Hi,
It’s worth reading this article on memory profiling in Chrome. This paragraph was interesting:

The profile for a healthy application should look more like a sawtooth curve as memory is allocated then freed when the garbage collector comes in. There’s nothing to worry about here – there’s always going to be a cost of doing business in JavaScript and even an empty requestAnimationFrame will cause this type of sawtooth, you can’t avoid it. Just ensure it’s not sharp as that’s an indication a lot of allocations are being made, which can equate to a lot of garbage on the other side.

As far as I can tell, there are no major leaks with that cube test running. In fact, I can’t find any at all.

I think what you are seeing is normal. Although I will be looking more closely into this in the coming weeks. If any memory ninjas want to beat me to it, go for it.

For the forum, we use Discourse.

[davidbm]

I will read the article. Thanks!

I see that you use ClousureCompiler with playCanvas. I’m thinking to use this compiler (with gulp) for Starriser but I access some objects with the ["…"] and the compilation fails when I use ADVANCED_OPTIMIZATIONS besides other problems. I can adapt the code, but I don’t know if it will be worth.

What is your experience with Clousure compiler with ADVANCED_OPTIMIZATIONS?

[will]

We don’t use ADVANCED_OPTIMIZATIONS to build the engine. Perhaps we should investigate whether we can get this working though.

For the unminified engine, we use WHITESPACE_ONLY and for the minified build, we specify SIMPLE_OPTIMIZATIONS.