[BJS vs. 3JS] Spinning Cube - Test 1

[3Dlove]

Hello guys,

 

I am coding demos in order to compare BJS and 3JS

 

Here is my first demo :

• Three.JS
• Babylon.JS

 

 

I'll put online the following demos on the next week

 

 

To begin, I've some questions :

 

1- Why BJS FPS have an average of 10 FPS less than 3JS ? (tests on IE with just 1 tab : BJS ~47, 3JS ~57)

 

2- Do we need to do a similar function to

"renderer.setPixelRatio( window.devicePixelRatio );    // to keep same scale, dimensions ratio on mobile device"

under BJS?

 

3- Is perspective camera of 3JS = free camera of BJS ?

 

4- How edit my onWindowResize function in order to have the same results with BJS as 3JS ?

 

Have a nice night

[GameMonetize]

Hey

1. No reason at all. And on my computer I have the same performance (tested on 3 PC with IE and Chrome)

2. No this is automatic

3. Yes

4. I do not get it. What do you mean? Do you want to get an orthogonal camera?

[GameMonetize]

Other point: BJS is enabled with antialiasing on:

engine = new BABYLON.Engine(canvas, true);

[GameMonetize]

As well: no need for: engine.setSize( width, height );

[3Dlove]

Hello,

1- 2- 3-
OK thanks

4-
My onWindowResize function is located in functions.js file.
In 3JS, if user zoom on page with Ctrl Key and mouse wheel, the scene is drawing again and keep the same size and positions at screen.
I would like to know how to do the same with BJS.


5- For me, I need engine.setSize( width, height );
because I didn't put height and width canvas's attributes.
I tried without setSize and with that :
    <canvas id="canvas" width="100%" height="100%"></canvas>
but that doesn't work, it's like I put 100px instead of 100%.


6- There something that I don't understand : Why do we need to name Meshes ? What is the goal of that ?


I began a comparaison : http://martinstosch.free.fr/3JS%20vs%20BJS.html

[GameMonetize]

4. use engine.setHardwareScalingLevel(1.0 / (window.devicePixelRatio || 1.0))

 

5. HUm that *should* work This is what engine.resize is doing:

public resize(): void {            this.setSize(this._renderingCanvas.clientWidth / this._hardwareScalingLevel, this._renderingCanvas.clientHeight / this._hardwareScalingLevel);        }

With setSize = 

public setSize(width: number, height: number): void {            this._renderingCanvas.width = width;            this._renderingCanvas.height = height;            this._canvasClientRect = this._renderingCanvas.getBoundingClientRect();        }

6. You do not have to actually. You can leave this value to null or whatever. The engine does not need it. But this is for you. You can then find a mesh by Name with scene.getMeshByName, or by ID (generated by the engine and unique) with scene.getMeshById or even through the tag system (http://doc.babylonjs.com/page.php?p=22521) 

[3Dlove]

Ok for 6 =)

Here is an example :
http://martinstosch.free.fr/example1.html

(you can download it with librarys here : http://martinstosch.free.fr/example1.zip)

7- How to have an fullscreen window (with others element) and not just a fullscreen canvas ?
I tried something by mixing with Threex, you can see it in my example, but the problem is that the camera isn't replacing at center in fullscreen mode and the canvas doesn't resize with the entire height of the screen (black part at the botoom)

you can see the problem in attached pictures.
 

[Wingnut]

Hi guys... I did a little experimenting with this, too.

http://playground.babylonjs.com/#24AC3D

The 'p' key seems to be working correctly for the playground version of the demo.  (You might have to click on the canvas before using the 'p' key.)  Grab a zip, take it home, test it there, 3dLove.

This doesn't mean it will work for your project, 3DL, but it should, and you won't need any "THREE" libraries. 

Ok, that's all the information I have on this, so far.  Party on, and keep us posted on your discoveries, 3dLove.  (thx)

[Dad72]

Why do you use the features of ThreeJS knowing that you can do with BabylonJS
 

// CSShtml, body {    overflow: hidden;    width: 100%;    height: 100%;    margin: 0;    padding: 0;    position:fixed;}canvas {    width: 100%;    height: 100%;    position:fixed;    overflow: hidden;}//JSwindow.addEventListener("resize", function () {    engine.resize();}, false);

[Wingnut]

I can FEEL the love in your post, Dad72. 

[Dad72]

[Wingnut]

  If an 11 yr old Haitian girl, who gets to use a computer for 3 hours every Sunday morning to come to our forum and be with us... started crying uncontrollably and commits suicide today...  well... you know.  (nah, that won't happen). 

 

And you didn't even say "hi".  haha

[GameMonetize]

To get a fullscreen experience:

 

engine.switchFullscreen(true);

[3Dlove]

Hello guys,

 

Thanks a lot =)

 

The problem was that I used :

<canvas id="canvas" width="100%" height="100%"></canvas>

instead of :

<canvas id="canvas" style="width: 100%; height: 100%"></canvas>

The second problem is that I want a WINDOW fullscreen (with the others DOM element) and not just a CANVAS fullscreen.

 

That's work with my first's problem's correction mixed with THREEx.FullScreen.js, but if you have a better solution to do WINDOW fullscreen, I would be very glad =)

[Dad72]

For your other element that must resize, use CSS OR Jquery $(#element).css({"width":"xxxpx"});

[jerome]

@3DLove

 

This is confusing but the HTML5 canvas element has width and height properties expressed in pixels. No need to add 'px'. Default values are 300 x 150 pixels.

If you don't specify any other size in the CSS style attributes, the canvas will be sized with these values.

Now, if you add some CSS size properties, for example expressed in percentage of canvas element container (div or body), this percentage will then applied to the initial values.

 

Thus you can define a 640x480 px canvas and stretch it 100% of the browser windows whatever its size, or stretch if even full screen.

 

This is a famous way for 2D games : compute everything lower resolution (so faster) and let the browser interpolate to bigger resolution with acceptable accuracy.

[3Dlove]

Okay thank you guys

 

Post => Resolved

[3Dlove]

Final Test 1 : Spinning Cube :

 

• Three.JS
• Babylon.JS