Babylon.js with Ejecta

[ramshreyas]

Hi!

 

This has been posted about back in April, but I don't see any recent info or any examples.

I'm trying to get this basic example working in iOS:

 

http://www.babylonjs-playground.com/?2#

 

It's described in detail here: https://github.com/BabylonJS/Babylon.js/wiki/01---Basic-scene

 

My index.js in /App is quite simple:

ejecta.include('cannon.js');ejecta.include('Oimo.js');ejecta.include('babylon.1.14.js');var canvas = document.getElementById('canvas');var engine = new BABYLON.Engine(canvas, true);var createScene = function () {    // This creates a basic Babylon Scene object (non-mesh)    var scene = new BABYLON.Scene(engine);    // This creates and positions a free camera (non-mesh)    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);    // This targets the camera to scene origin    camera.setTarget(BABYLON.Vector3.Zero());    // This attaches the camera to the canvas    camera.attachControl(canvas, true);    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);    // Default intensity is 1. Let's dim the light a small amount    light.intensity = 0.7;    // Our built-in 'sphere' shape. Params: name, subdivs, size, scene    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);    // Move the sphere upward 1/2 its height    sphere.position.y = 1;    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);    return scene;};var scene = createScene();engine.runRenderLoop(function () {	scene.render();});

I get nothing but a black screen.

Note that I tried a Three.js example and it worked fine.

 

Users Xanmia and demonixis seemed to have gotten this working (see http://www.html5gamedevs.com/topic/5568-babylonjs-and-ejecta/?hl=ejecta) but I haven't seen any examples posted. Also, there's this "wrapper" (https://gist.github.com/demonixis/8999239/download#) but again I don't see how it's used.

 

Any help appreciated! Looking forward to using Babylon.js!

[demonixis]

Hi,

 

You've two things to do for having BabylonJS to work with Ejecta. The first is to define the width/height/clientWidth/clientHeight properties of your canvas so something like that :

 

var canvas = document.getElementById("canvas"); // You can get the canvas like that with Ejecta

canvas.width = 800;

canvas.height = 600;

canvas.clientWidth = 800;

canvas.clientHeight = 600;

 

And now you need to adapt my "wrapper" to the latest version of BabylonJS because this code is "old" (february). To adapt it, you have to get minified shaders and update the ShaderResources variable.

[ramshreyas]

Ok, thanks! I'll try that. (That explains why a debug line said the canvas was "0x0" in size!)

 

As for the wrapper...can you explain why it's necessary?

[demonixis]

Because when I've used Ejecta, it could not load shaders with the current method. I just had to change the loading method by overriding _loadVertexShader and _loadPixelShader. Maybe it can works out of stock now because shaders are packaged with the source code.

[dmonkeyjazz]

hi @ramshreyas ,

I'm wondering if you ever got this to work with a recent version of babylon, current: 2.4.

I'm trying the same thing as you are, with -sadly- the same result: a big black screen :/ and no errors in the console. It would be awesome if this could work, it would make a powerful combination. But maybe this just isn't the way to go... 

I did hear @Deltakosh say it should be working, or did I wishfully misinterpret that ?

 

PS: @demonixis: Could you elaborate on the shader workaround ? Is it still necessary ? and how should we implement your code? overwrite it in babylon.js ?