[HELP] Sample Project in Babylonhx \w or \wo OpenFL

Good day sir

Im just new here. I really need some help , Im trying to make a Simple 3d scene using babylonhx,
but when I try to run the sample code of BasicScene.hx as openfl project , html5 target , nothing happens. only a black screen. and also as js project , html5 target , it won’t compile.

and the code provided in the babylonhx website did’t compile due to incorrect parameter.
(maybe because my current babylonhx was updated) , so I changed it but still , black screen.

can you help me? please.

This is my Modified code of BasicScene.hx

package;

import com.babylonhx.cameras.FreeCamera;
import com.babylonhx.layer.Layer;
import com.babylonhx.lights.HemisphericLight;
import com.babylonhx.math.Vector3;
import com.babylonhx.mesh.Mesh;
import com.babylonhx.Scene;

/*
 * Modified Code
 */
class Main
{

 public function new(scene:Scene) {
        // This creates and positions a free camera (non-mesh)
        var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
                
        // This targets the camera to scene origin
        camera.setTarget(Vector3.Zero());
        
        // This attaches the camera to the canvas
        camera.attachControl();
        
        new Layer("background", "assets/img/graygrad.jpg", scene, true);
                                
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
        
        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;
        
        var soption : SphereOptions = 
        {
            segments:  2,
            diameterX: 16,
            diameterY: 16,
            diameterZ: 16,
        }
        
        var goption : GroundOptions = 
        {
            width:  6, 
            height: 6, 
            subdivision:  2
        }
        
        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
        var sphere = Mesh.CreateSphere("sphere1", soption, 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 = Mesh.CreateGround("ground1", goption, scene);
        
        scene.getEngine().runRenderLoop(function () {
            scene.render();
        });        
    }
    
}

and this is the Code provided in the website

package;

import com.babylonhx.cameras.FreeCamera;
import com.babylonhx.lights.HemisphericLight;
import com.babylonhx.layer.Layer;
import com.babylonhx.math.Vector3;
import com.babylonhx.mesh.Mesh;
import com.babylonhx.Scene;


class BasicScene {

    public function new(scene:Scene) {
        // This creates and positions a free camera (non-mesh)
        var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
                
        // This targets the camera to scene origin
        camera.setTarget(Vector3.Zero());
        
        // This attaches the camera to the canvas
        camera.attachControl();
        
        new Layer("background", "assets/img/graygrad.jpg", scene, true);
                                
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new HemisphericLight("light1", new 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 = 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 = Mesh.CreateGround("ground1", 6, 6, 2, scene);
        
        scene.getEngine().runRenderLoop(function () {
            scene.render();
        });        
    }
    
}

I just want to know things therefore I will able to create a some demo for my task in my Internship.
1. Proper creation of project for babylonhx or babylonhx+OpenFL , or any method that might help me to solve my problem.
2. Proper Entry Point , Basic Scene in babylonhx.
3. Is there any extra settings or some sort of configuration to change?
4. Is there any dependencies should I download and install? [I thought It will work without BabylonJS isn’t it?]
5. Any tips? Tricks? Hints? Please?

Thank you ladies , and gentlemen in advance.

No experience in babylonx but had you tested haxe and openfl if it works ok?.. display a bitmap for example. If everything ok…did you checked what the console throwns with this example? ( ctlr + shift + j ) to open it.

Tried to export to HTML5 as well, some project of mine its not babylonhx, and I get the same results as yours, black HTML5 output :frowning:

As I said before I would begin with the most simple example that comes to your mind. Export it to html5 and make them work. And again …using the developer tools (ctrl shift J ) will help.

Here I take your advice to Press Ctrl+Shift+J to debug my test html5 app.(thanks for that tip @zeus25971 :smiley: )

I thought there is an Uncaught Exception in my Code.
But its in the babylonhx Camera.hx class

Here take a look:

Usually this kind of errors happens when you try to access an instance of an object which is not created.

Again maybe it will be easy if you start looking at simple examples which gives you the basic knowledge and tools of the language, before start working with someone elses complex code.

regards
Luis

Thanks @zeus25971

I try to check if the ‘scene’ object is null , and as you said before , it is.

The Scene Object is null , so I make a way to initialized it.
I remember that in babylonhx , the author said it was capable to use with “Openfl”
but openfl compile my app with default html5-flat-canvas , the OpenGLView won’t initialize.
the only thing can make an output is to change the build parameters

I Found my Solution here : github.com/openfl/openfl/issues/218

And this is my build parameters : “$(CompilerPath)/haxelib” run lime build “$(OutputFile)” $(TargetBuild) -$(BuildConfig) -Ddom

but still have the problem.

I have the output but not the Output i desired.

/* This is the new Source Code*/

package;

import com.babylonhx.cameras.FreeCamera;
import com.babylonhx.Engine;
import com.babylonhx.lights.HemisphericLight;
import com.babylonhx.layer.Layer;
import com.babylonhx.math.Vector3;
import com.babylonhx.mesh.Mesh;
import com.babylonhx.Scene;
import openfl.display.FPS;
import openfl.display.Stage;
import openfl.display.Stage3D;
import openfl.display.StageAlign;
import openfl.display.StageScaleMode;
import openfl.Lib;
import openfl.display.Sprite;


class Main extends Sprite 
{

    private var myEngine : Engine;
    private var myScene  : Scene;
    
    public function new()
    {
        super();
        initialize();
    }
    
    private function initialize()
    {
        if (stage == null) 
        {
            try
            {
                trace("Stage was Initialized");
                stage = Lib.current.stage;
            
                myEngine     = new Engine(stage , false);
                trace("Engine was Initialized");
            
                myScene        = new Scene(myEngine);
                trace("Scene was Initialized");
            
                setupScene(myScene);
            }   catch(e : String) {
                trace("Error : " + e);
            }
        }
        
    }
    
    public function setupScene(scene:Scene) 
    {
        // This creates and positions a free camera (non-mesh)
        if (scene != null)
        {
            trace("Scene is not Null");
            var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
                
            // This targets the camera to scene origin
            camera.setTarget(Vector3.Zero());
        
            // This attaches the camera to the canvas
            camera.attachControl();
        
            new Layer("background", "assets/img/graygrad.jpg", scene, true);
                                
            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
            
            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;
        
            var soption : SphereOptions = 
            {
                segments:  2,
                diameterX: 16,
                diameterY: 16,
                diameterZ: 16,
            }
        
            var goption : GroundOptions = 
            {
                width:  6, 
                height: 6, 
                subdivision:  2
            }
        
            // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
            var sphere = Mesh.CreateSphere("sphere1", soption, 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 = Mesh.CreateGround("ground1", goption, scene);
        
            scene.getEngine().runRenderLoop(function () {
                scene.render();
            });        
        }
 
        
    }
    
    // Entry Point
    public static function main()
    {
        Lib.current.stage.scaleMode = StageScaleMode.NO_SCALE;
        Lib.current.stage.align        = StageAlign.TOP_LEFT;
        Lib.current.stage.addChild(new Main());
        Lib.current.stage.addChild(new FPS(10 , 10  , 0xffffff));
    }
    
}

Any advice? please? the output should be like this:

Hello

I’m using lime directly (without OpenFL).

From your code it may be possible that the sphere diameter is too large to see the scene. It seems that the diameter and segments are in the wrong order… segment should be 16 and diameter should be 2…

besides that in the version I’m using I can’t use options… I have to do:

var sphere = Mesh.CreateSphere("sphere1", 16, 1, scene);

and

var ground = Mesh.CreateGround("ground1", 6, 6, 2, scene);

Also I don’t see anywhere

`engine._renderLoop();

but maybe this is only when using lime directly

Anyway… just tested this in html5 and windows cpp targets and it worked great…

    package;

    import lime.app.Application;
    import lime.Assets;
    import lime.ui.KeyCode;
    import lime.ui.KeyModifier;
    import lime.graphics.RenderContext;
    import lime.ui.Touch;
    import lime.ui.Window;

    import com.babylonhx.Engine;
    import com.babylonhx.Scene;

    import com.babylonhx.cameras.FreeCamera;
    import com.babylonhx.lights.HemisphericLight;
    import com.babylonhx.materials.StandardMaterial;
    import com.babylonhx.materials.textures.Texture;
    import com.babylonhx.layer.Layer;
    import com.babylonhx.math.Color3;
    import com.babylonhx.math.Vector3;
    import com.babylonhx.mesh.Mesh;


    /**
     * ...
     * @author jfroco
     */

    class MainLime extends Application {
    	
    	var scene:Scene;
    	var engine:Engine;
    	
    	
    	public function new() {
    		super();
    	}
    		
    	public override function onWindowCreate(window:Window):Void {
    		engine = new Engine(window, false);	
    		scene = new Scene(engine);

    		var camera = new FreeCamera("camera1", new Vector3(0, 1, -10), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl();

    var background = new Layer("background", "assets/fondo.png", scene, true);

    		var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.diffuse = new Color3(1, 1, 1);
    light.groundColor = new Color3(0.3, 0.3, 0.3);
    light.specular = new Color3(1, 1, 1);


    var texture_wood = new StandardMaterial("texture_wood", scene);
    texture_wood.diffuseTexture = new Texture("assets/wood.jpg", scene);

    var sphere = Mesh.CreateSphere("sphere1", 16, 1, scene);
    sphere.position.y = 1;
    sphere.material = texture_wood;

    var texture_ground = new StandardMaterial("texture_ground", scene);
    texture_ground.diffuseColor = new Color3(0.8, 0.2, 0.2); 
    var ground = Mesh.CreateGround("ground1", 6, 6, 2, scene);
    ground.material = texture_ground;
    
    scene.getEngine().runRenderLoop(function () {
        scene.render();
    });

    				
    		engine.width = this.window.width;
    		engine.height = this.window.height;
    	}
    	
    	override function onMouseDown(window:Window, x:Float, y:Float, button:Int) {
    		for(f in Engine.mouseDown) {
    			f(x, y, button);
    		}
    	}
    	
    	override function onMouseUp(window:Window, x:Float, y:Float, button:Int) {
    		for(f in Engine.mouseUp) {
    			f();
    		}
    	}
    	
    	override function onMouseMove(window:Window, x:Float, y:Float) {
    		for(f in Engine.mouseMove) {
    			f(x, y);
    		}
    	}
    	
    	override function onMouseWheel(window:Window, deltaX:Float, deltaY:Float) {
    		for (f in Engine.mouseWheel) {
    			f(deltaY / 2);
    		}
    	}
    	
    	override function onTouchStart(touch:Touch) {
    		for (f in Engine.touchDown) {
    			f(touch.x, touch.y, touch.id);
    		}
    	}
    	
    	override function onTouchEnd(touch:Touch) {
    		for (f in Engine.touchUp) {
    			f(touch.x, touch.y, touch.id);
    		}
    	}
    	
    	override function onTouchMove(touch:Touch) {
    		for (f in Engine.touchMove) {
    			f(touch.x, touch.y, touch.id);
    		}
    	}

    	override function onKeyUp(window:Window, keycode:Int, modifier:KeyModifier) {
    		for(f in Engine.keyUp) {
    			f(keycode);
    		}
    	}
    	
    	override function onKeyDown(window:Window, keycode:Int, modifier:KeyModifier) {
    		for(f in Engine.keyDown) {
    			f(keycode);
    		}
    	}
    	
    	override public function onWindowResize(window:Window, width:Int, height:Int) {
    		engine.width = this.window.width;
    		engine.height = this.window.height;
    	}
    	
    	override function update(deltaTime:Int) {
    		if(engine != null) {
    			engine._renderLoop();		
    		}
    	}
    	
    }

``

Hope this helps.

best regards

JF

Wow! thanks @jfroco , Cool!
The version that I have was 0,0,0 which is weird but working.

I try to use Lime too instead of openFL although some classes in OpenFL are just typedef from Lime. anyway in html target was not stable since the FPS Drop to 10 or less in Desktop and 2 or less in Mobile. (even my phone is Zenfone5)
Weird. I try other WebGL Samples , it was smoothly rendered in my phone and my desktop. (I think because of -Ddom backed)

Thanks again. I appreciate it. :smiley:

Hey! It tired your code, but I could not get anything to show up in HTML5

I got the latest babylonhx from github but it does not work either.

Could you provide some more details on how you manage to make Babylonhx work together with the versions of haxe and haxe libraries you are using? thanks!

Of course:

actuate: [1.8.6]
away3d-examples: [1.1.0]
away3d: 1.1.0 [1.1.1]
BabylonHx: [0.0.0]
box2d: [1.2.3]
format: [3.2.1]
HaxePunk: [2.5.6]
hxcpp: [3.2.193]
layout: [1.2.1]
lime-samples: [2.6.0]
lime-tools: [1.5.7]
lime: [2.7.0]
openfl-compatibility: [1.0.1]
openfl-ouya: [1.0.2]
openfl-samples: [3.3.1]
openfl: 2.2.4 [3.4.0]
poly2trihx: [0.1.4]
swf: [2.1.3]

If I tried only with haxelib I got:

src/MainLime.hx:11: characters 7-27 : Type not found : com.babylonhx.Engine

So I copy the com (from githhub: https://github.com/vujadin/BabylonHx/tree/master/com )folder to the same folder I have project.xml and **removed **the haxelib dependence in project.xml

project.xml:

<?xml version="1.0" encoding="utf-8"?>
<project>

<meta title="BabylonHx Example" package="com.minggalabs.babylonhx.example" version="1.0.0" company="Mingga Labs" />
<app main="MainLime" file="BabylonHx_Lime" path="bin_lime" />

<window require-shaders="true" hardware="true" depth-buffer="true" stencil-buffer="true" antialiasing="0" />

<source path="src" />

<haxelib name="lime" />
<haxelib name="actuate" />
<haxelib name="poly2trihx" />

<assets path="assets" exclude="*.svg" />
<icon path="assets/lime.svg" />

I put together a github repository:

and the final result:

lime build html5

You can see it working here:

jfroco.github.io/BabylonHxSimpleTest/ (add http to test — new user only 1 link per post)

Bro @jfroco can I have the babylonhx tha you have? just a zip of the one that you have. please? thanks in advance.

Hi… it’s in the repository. I copied everything I used to build the test.

Check this folder:

Thanks man! Got it Working! We should have lime 2.7.0 and the latest babylonhx, iomohx, and poly2trihx.

go to babylonhx folder then

haxelib run lime test project.xml html5

and oh, before I forget, uncomment the scene you want to test in MainLime.hx.

Thanks dude @jfroco , awesome! its gonna be a long work again today for me :smile: