Using non-minified babylon.js version

[Chendy]

Hi,

 

I would like to modify the camera/control behavior, and so want to include all the babylon.js files manually instead of the single minified file. I have downloaded the latest source files from github, and used the source file 01---Basic-scene with the instructions Creating-the-minified-version. But I get errors "16:39:50.549 TypeError: BABYLON.Plane is not a constructor babylon.mirrorTexture.js:17
16:39:50.817 TypeError: BABYLON.Color3 is not a constructor babylon.scene.js:9".

 

Looking at the wiki page 'Creating-the-minified-version' the first inclusion refers to "Babylon/Tools/babylon.math.js" which doesn't exist (but "Babylon/Maths/babylon.math.js" does)...

 

Is there an updated/working reference for this? It would be great if this was part of the github files bundle... or am I doing something stupid?!

 

Thanks

 

Chendy
 

[Wingnut]

Hi Chendy, welcome to the forum!  Do you know that you can modify a camera's behavior quite a bit.. just after you create one?

 

Let's look at the FreeCamera...

 

http://doc.babylonjs.com/page.php?p=24626

 

Plenty of knobs to turn, without needing to dig into the babylon.js framework itself.  By chance, did you want to change the cursor-controls into WASD controls?   Some talk of that was going on at http://www.html5gamedevs.com/topic/4936-arccamera-turning-problem-need-solution/ ...near the late posts.

 

Need a nice FreeCamera dumper?

var fc = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -20), scene);var r = "" +  "fc.name " + fc.name + "\n" +  "fc._scene " + fc._scene + "\n" +  "fc.position " + fc.position + "\n" +  "fc.rotation " + fc.rotation + "\n" +  "fc.cameraDirection " + fc.cameraDirection + "\n" +  "fc.cameraRotation " + fc.cameraRotation + "\n" +  "fc.ellipsoid " + fc.ellipsoid + "\n" +  "fc._keys " + fc._keys + "\n" +  "fc.keysUp " + fc.keysUp + "\n" +  "fc.keysDown " + fc.keysDown + "\n" +  "fc.keysLeft " + fc.keysLeft + "\n" +  "fc.keysRight " + fc.keysRight + "\n" +  "fc._collider " + fc._collider + "\n" +  "fc._needMoveForGravity " + fc._needMoveForGravity + "\n" +  "fc.animations " + fc.animations + "\n" +  "fc.speed " + fc.speed + "\n" +  "fc.checkCollisions " + fc.checkCollisions + "\n" +  "fc.applyGravity " + fc.applyGravity + "\n" +  "fc.fov " + fc.fov + "\n" +  "fc.orthoLeft " + fc.orthoLeft + "\n" +  "fc.orthoRight " + fc.orthoRight + "\n" +  "fc.orthoBottom " + fc.orthoBottom + "\n" +  "fc.orthoTop " + fc.orthoTop + "\n" +  "fc.minZ " + fc.minZ + "\n" +  "fc.maxZ " + fc.maxZ + "\n" +  "fc.inertia " + fc.inertia + "\n" +  "fc.mode " + fc.mode + "\n";  // alert(r);  console.log(r);

There are some easier JS object-dump functions here and there on the web.  I just chose to take the long route. 

 

Want to mess around with the mouse?  That happens in hand.js, a separate file.  Let us know HOW you want to modify the camera(s), maybe we can help... without the need to run babylon.js in non-mini form.  Be well!

[SideraX]

Hi,

 

I also need the wiki page 'Creating-the-minified-version' to be updated, I based gulp builder from the list of that page (with some correction), but I think I missed some files.

 

It would be great

[GameMonetize]

I updated the wiki post

[gwenael]

Hi Chendy,

 

If you are on Windows, you can use https://github.com/BabylonJS/Babylon.js/tree/master/Tools/BuildOurOwnBabylonJS.

Just give me some times to update it if needed.

 

As Wingnut suggests, you can do whatever you want with your camera once you have created it since javascript allows you to override functions for a particular instance, add new functions and new attributes. Nevertheless, if you want your changes applied to all cameras and share your changes to anyone, https://github.com/BabylonJS/Babylon.js/tree/master/Tools/BuildOurOwnBabylonJS will help you to do so (at least a part of it). Please read readme.md first.

[gwenael]

Here it is: https://github.com/BabylonJS/Babylon.js/pull/167

[Chendy]

Hi guys,

 

@ Wingnut

 

Thanks for the interest. I'm trying to some custom control, where rotate and zoom happen without the mouse being clicked:

- mouseX causes the camera to rotate left or right

- mouseY causes the camera to zoom in and out

- I want to detect when the mouse is off the canvas, my current strategy is to define a margin around the edge of my canvas (say 20 pixels) and when the mouse transitions there I can detect that it has entered/left the canvas (is a better way? please let me know, the canvas will only be a small part of a webpage)

    - on leaving the canvas the rotate & zooms are slowly tweened back to there default values (resetting the scene) 

 

I have done this using a standard ArcRotateCamera to set everything up, but then want to define my own 'mousemove" event handling function which modifies the position of the camera target (using simple circle formula). I think I'm nearly there, but just need to disable the various mouse events in the babylon.js camera control code. I got a similar thing working with three.js, but am looking to do it with babylon.js as it seems to have better performance  

 

I will be happy to share my hacks(!), but I don't think what I am doing is very standard?!

 

@ Deltakosh

 

I downloaded the source files now, and then using your updated wiki post tried this code (which is the tutorial 01), but there's an 'syntax error' in default.vertex.fx':

 

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>BABYLON - BASICS</title>    <!--Loading babylon engine -->	<script src="hand.minified-1.3.7.js"></script>	        <script src="Babylon/Math/babylon.math.js"></script>	<script src="Babylon/Tools/babylon.database.js"></script>	<script src="Babylon/Tools/babylon.tools.dds.js"></script>	<script src="Babylon/Tools/babylon.tools.js"></script>	<script src="Babylon/babylon.engine.js"></script>	<script src="Babylon/babylon.node.js"></script>	<script src="Babylon/Tools/babylon.filesInput.js"></script>	<script src="Babylon/Collisions/babylon.pickingInfo.js"></script>	<script src="Babylon/Culling/babylon.boundingSphere.js"></script>	<script src="Babylon/Culling/babylon.boundingBox.js"></script>	<script src="Babylon/Culling/babylon.boundingInfo.js"></script>	<script src="Babylon/Lights/babylon.light.js"></script>	<script src="Babylon/Lights/babylon.pointLight.js"></script>	<script src="Babylon/Lights/babylon.spotLight.js"></script>	<script src="Babylon/Lights/babylon.hemisphericLight.js"></script>	<script src="Babylon/Lights/babylon.directionalLight.js"></script>	<script src="Babylon/Lights/Shadows/babylon.shadowGenerator.js"></script>	<script src="Babylon/Collisions/babylon.collider.js"></script>                                                  		<script src="Babylon/Cameras/Controllers/babylon.inputController.js"></script>	<script src="Babylon/Cameras/babylon.camera.js"></script>	<script src="Babylon/Cameras/babylon.freeCamera.js"></script>	<script src="Babylon/Cameras/babylon.touchCamera.js"></script>	<script src="Babylon/Cameras/babylon.arcRotateCamera.js"></script>	<script src="Babylon/Cameras/babylon.deviceOrientationCamera.js"></script>	<script src="Babylon/Rendering/babylon.renderingManager.js"></script>	<script src="Babylon/Rendering/babylon.renderingGroup.js"></script>	<script src="Babylon/babylon.scene.js"></script>	<script src="Babylon/Mesh/babylon.vertexBuffer.js"></script>	<script src="Babylon/Mesh/babylon.mesh.js"></script>	<script src="Babylon/Mesh/babylon.subMesh.js"></script>	<script src="Babylon/Materials/textures/babylon.baseTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.texture.js"></script>	<script src="Babylon/Materials/textures/babylon.cubeTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.renderTargetTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.mirrorTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.dynamicTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.videoTexture.js"></script>	<script src="Babylon/Materials/babylon.effect.js"></script>	<script src="Babylon/Materials/babylon.material.js"></script>	<script src="Babylon/Materials/babylon.standardMaterial.js"></script>	<script src="Babylon/Materials/babylon.multiMaterial.js"></script>	<script src="Babylon/Loading/babylon.sceneLoader.js"></script>	<script src="Babylon/Loading/Plugins/babylon.babylonFileLoader.js"></script>	<script src="Babylon/Tools/babylon.database.js"></script>	<script src="Babylon/Sprites/babylon.spriteManager.js"></script>	<script src="Babylon/Sprites/babylon.sprite.js"></script>	<script src="Babylon/Layer/babylon.layer.js"></script>	<script src="Babylon/Particles/babylon.particle.js"></script>	<script src="Babylon/Particles/babylon.particleSystem.js"></script>	<script src="Babylon/Animations/babylon.animation.js"></script>	<script src="Babylon/Animations/babylon.animatable.js"></script>	<script src="Babylon/Culling/Octrees/babylon.octree.js"></script>	<script src="Babylon/Culling/Octrees/babylon.octreeBlock.js"></script>	<script src="Babylon/Bones/babylon.bone.js"></script>	<script src="Babylon/Bones/babylon.skeleton.js"></script>	<script src="Babylon/Bones/babylon.skeleton.js"></script>	<script src="Babylon/PostProcess/babylon.postProcess.js"></script>	<script src="Babylon/PostProcess/babylon.postProcessManager.js"></script>	<script src="Babylon/PostProcess/babylon.passPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.blurPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.refractionPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.blackAndWhitePostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.convolutionPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.filterPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.fxaaPostProcess.js"></script>	<script src="Babylon/LensFlare/babylon.lensFlare.js"></script>	<script src="Babylon/LensFlare/babylon.lensFlareSystem.js"></script>	<script src="Babylon/Physics/babylon.physicsEngine.js"></script>	<script src="Babylon/Tools/babylon.sceneSerializer.js"></script>	<script src="Babylon/Math/babylon.axis.js"></script>	<script src="Babylon/Mesh/babylon.csg.js"></script>	<script src="Babylon/PostProcess/babylon.oculusDistortionCorrectionPostProcess.js"></script>	<script src="Babylon/Tools/babylon.virtualJoystick.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.oculusController.js"></script>	<script src="Babylon/Cameras/babylon.oculusOrientedCamera.js"></script>	<script src="Babylon/Cameras/babylon.virtualJoysticksCamera.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.keyboardMoveController.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.inputCollisionFilter.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.gravityInputController.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.globalAxisFactorsFilter.js"></script>	<script src="Babylon/Materials/babylon.shaderMaterial.js"></script>	<script src="Babylon/Mesh/babylon.mesh.vertexData.js"></script>    <!-- CSS -->    <!-- ------ -->    <style>        html, body, div, canvas {            width: 100%;            height: 100%;            padding: 0;            margin: 0;            overflow: hidden;        }    </style></head><!-- BODY --><!-- ------ --><body>    <div id="rootDiv">        <!-- Main Canvas -->        <canvas id="renderCanvas"></canvas>    </div>    </body>    <!-- BABYLON SCRIPT -->    <!-- -------------- -->    <script type="text/javascript">        // Get the Canvas element from our HTML below        var canvas = document.getElementById("renderCanvas");        // Load BABYLON 3D engine and set the root directory        var engine = new BABYLON.Engine(canvas, true);        //Create a new scene with a camera (mandatory), a light (better) and a sphere (to see the origin)        var scene = new BABYLON.Scene(engine);        // Creating a camera looking to the zero point (0,0,0)        var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);        // Creating a omnidirectional light        var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);        // Creating a sphere of size 1, at 0,0,0        var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);        // Attach the camera to the scene        scene.activeCamera.attachControl(canvas);        // Once the scene is loaded, just register a render loop to render it        engine.runRenderLoop(function () {            scene.render();        });    </script></html>

but if use the 'compiled' version the demo works fine:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>BABYLON - BASICS</title>    <!--Loading babylon engine -->	<script src="hand.minified-1.3.7.js"></script>		<script src="babylon.1.10.0.js"></script>    <!-- CSS -->    <!-- ------ -->    <style>        html, body, div, canvas {            width: 100%;            height: 100%;            padding: 0;            margin: 0;            overflow: hidden;        }    </style></head><!-- BODY --><!-- ------ --><body>    <div id="rootDiv">        <!-- Main Canvas -->        <canvas id="renderCanvas"></canvas>    </div>    </body>    <!-- BABYLON SCRIPT -->    <!-- -------------- -->    <script type="text/javascript">        // Get the Canvas element from our HTML below        var canvas = document.getElementById("renderCanvas");        // Load BABYLON 3D engine and set the root directory        var engine = new BABYLON.Engine(canvas, true);        //Create a new scene with a camera (mandatory), a light (better) and a sphere (to see the origin)        var scene = new BABYLON.Scene(engine);        // Creating a camera looking to the zero point (0,0,0)        var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);        // Creating a omnidirectional light        var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);        // Creating a sphere of size 1, at 0,0,0        var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);        // Attach the camera to the scene        scene.activeCamera.attachControl(canvas);        // Once the scene is loaded, just register a render loop to render it        engine.runRenderLoop(function () {            scene.render();        });    </script></html> 

[gwenael]

Could you try this?

<!--Loading babylon engine -->	<script src="hand.minified-1.3.7.js"></script>	        <script src="Babylon/Math/babylon.math.js"></script>	<script src="Babylon/Tools/babylon.database.js"></script>	<script src="Babylon/Tools/babylon.tools.dds.js"></script>	<script src="Babylon/Tools/babylon.tools.js"></script>	<script src="Babylon/babylon.engine.js"></script>	<script src="Babylon/babylon.node.js"></script>	<script src="Babylon/Tools/babylon.filesInput.js"></script>	<script src="Babylon/Collisions/babylon.pickingInfo.js"></script>	<script src="Babylon/Culling/babylon.boundingSphere.js"></script>	<script src="Babylon/Culling/babylon.boundingBox.js"></script>	<script src="Babylon/Culling/babylon.boundingInfo.js"></script>	<script src="Babylon/Lights/babylon.light.js"></script>	<script src="Babylon/Lights/babylon.pointLight.js"></script>	<script src="Babylon/Lights/babylon.spotLight.js"></script>	<script src="Babylon/Lights/babylon.hemisphericLight.js"></script>	<script src="Babylon/Lights/babylon.directionalLight.js"></script>	<script src="Babylon/Lights/Shadows/babylon.shadowGenerator.js"></script>	<script src="Babylon/Collisions/babylon.collider.js"></script>                                                  		<script src="Babylon/Cameras/Controllers/babylon.inputController.js"></script>	<script src="Babylon/Cameras/babylon.camera.js"></script>	<script src="Babylon/Cameras/babylon.freeCamera.js"></script>	<script src="Babylon/Cameras/babylon.touchCamera.js"></script>	<script src="Babylon/Cameras/babylon.arcRotateCamera.js"></script>	<script src="Babylon/Cameras/babylon.deviceOrientationCamera.js"></script>	<script src="Babylon/Rendering/babylon.renderingManager.js"></script>	<script src="Babylon/Rendering/babylon.renderingGroup.js"></script>	<script src="Babylon/babylon.scene.js"></script>	<script src="Babylon/Mesh/babylon.vertexBuffer.js"></script>             <!-- depends on vertexBuffer -->       <script src="Babylon/Mesh/babylon.mesh.vertexData.js"></script>	<script src="Babylon/Mesh/babylon.mesh.js"></script>	<script src="Babylon/Mesh/babylon.subMesh.js"></script>	<script src="Babylon/Materials/textures/babylon.baseTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.texture.js"></script>	<script src="Babylon/Materials/textures/babylon.cubeTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.renderTargetTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.mirrorTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.dynamicTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.videoTexture.js"></script>	<script src="Babylon/Materials/babylon.effect.js"></script>	<script src="Babylon/Materials/babylon.material.js"></script>	<script src="Babylon/Materials/babylon.standardMaterial.js"></script>	<script src="Babylon/Materials/babylon.multiMaterial.js"></script>	<script src="Babylon/Loading/babylon.sceneLoader.js"></script>	<script src="Babylon/Loading/Plugins/babylon.babylonFileLoader.js"></script>	<script src="Babylon/Tools/babylon.database.js"></script>	<script src="Babylon/Sprites/babylon.spriteManager.js"></script>	<script src="Babylon/Sprites/babylon.sprite.js"></script>	<script src="Babylon/Layer/babylon.layer.js"></script>	<script src="Babylon/Particles/babylon.particle.js"></script>	<script src="Babylon/Particles/babylon.particleSystem.js"></script>	<script src="Babylon/Animations/babylon.animation.js"></script>	<script src="Babylon/Animations/babylon.animatable.js"></script>	<script src="Babylon/Culling/Octrees/babylon.octree.js"></script>	<script src="Babylon/Culling/Octrees/babylon.octreeBlock.js"></script>	<script src="Babylon/Bones/babylon.bone.js"></script>	<script src="Babylon/Bones/babylon.skeleton.js"></script>	<script src="Babylon/Bones/babylon.skeleton.js"></script>	<script src="Babylon/PostProcess/babylon.postProcess.js"></script>	<script src="Babylon/PostProcess/babylon.postProcessManager.js"></script>	<script src="Babylon/PostProcess/babylon.passPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.blurPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.refractionPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.blackAndWhitePostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.convolutionPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.filterPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.fxaaPostProcess.js"></script>	<script src="Babylon/LensFlare/babylon.lensFlare.js"></script>	<script src="Babylon/LensFlare/babylon.lensFlareSystem.js"></script>	<script src="Babylon/Physics/babylon.physicsEngine.js"></script>	<script src="Babylon/Tools/babylon.sceneSerializer.js"></script>	<script src="Babylon/Math/babylon.axis.js"></script>	<script src="Babylon/Mesh/babylon.csg.js"></script>	<script src="Babylon/PostProcess/babylon.oculusDistortionCorrectionPostProcess.js"></script>	<script src="Babylon/Tools/babylon.virtualJoystick.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.oculusController.js"></script>	<script src="Babylon/Cameras/babylon.oculusOrientedCamera.js"></script>	<script src="Babylon/Cameras/babylon.virtualJoysticksCamera.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.keyboardMoveController.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.inputCollisionFilter.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.gravityInputController.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.globalAxisFactorsFilter.js"></script>	<script src="Babylon/Materials/babylon.shaderMaterial.js"></script>	

[GameMonetize]

When using unminified version of babylon.js you also need to define where the shaders are:

BABYLON.Engine.ShadersRepository = "/Babylon/Shaders/";

[Chendy]

still no joy

 

Please excuse me if I'm being dim, I'm not really a javascript programmer

 

I know this is a cheeky request, but it would probably help more than just myself: Would it be possible to have an examples folder in the top level of the bylon.js-master folder, that defiantly worked with the unminified source files? 

 

Anyway, here is my attempt below. I get the following errors (the last two lines) in firefox:

22:14:41.928 file:///home/chendy/Downloads/Babylon.js-master/hand.minified-1.3.7.js

22:14:41.929 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Math/babylon.math.js

22:14:41.929 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.database.js

22:14:41.929 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.tools.dds.js

22:14:41.930 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.tools.js

22:14:41.930 file:///home/chendy/Downloads/Babylon.js-master/Babylon/babylon.engine.js

22:14:41.930 file:///home/chendy/Downloads/Babylon.js-master/Babylon/babylon.node.js

22:14:42.052 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.filesInput.js

22:14:42.053 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Collisions/babylon.pickingInfo.js

22:14:42.053 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Culling/babylon.boundingSphere.js

22:14:42.054 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Culling/babylon.boundingBox.js

22:14:42.054 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Culling/babylon.boundingInfo.js

22:14:42.054 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Lights/babylon.light.js

22:14:42.055 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Lights/babylon.pointLight.js

22:14:42.055 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Lights/babylon.spotLight.js

22:14:42.055 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Lights/babylon.hemisphericLight.js

22:14:42.056 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Lights/babylon.directionalLight.js

22:14:42.056 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Lights/Shadows/babylon.shadowGenerator.js

22:14:42.057 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Collisions/babylon.collider.js

22:14:42.057 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/Controllers/babylon.inputController.js

22:14:42.057 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.camera.js

22:14:42.058 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.freeCamera.js

22:14:42.058 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.touchCamera.js

22:14:42.058 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.arcRotateCamera.js

22:14:42.059 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.deviceOrientationCamera.js

22:14:42.059 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Rendering/babylon.renderingManager.js

22:14:42.060 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Rendering/babylon.renderingGroup.js

22:14:42.060 file:///home/chendy/Downloads/Babylon.js-master/Babylon/babylon.scene.js

22:14:42.060 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Mesh/babylon.vertexBuffer.js

22:14:42.061 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Mesh/babylon.mesh.vertexData.js

22:14:42.061 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Mesh/babylon.mesh.js

22:14:42.061 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Mesh/babylon.subMesh.js

22:14:42.062 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.baseTexture.js

22:14:42.062 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.texture.js

22:14:42.063 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.cubeTexture.js

22:14:42.063 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.renderTargetTexture.js

22:14:42.063 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.mirrorTexture.js

22:14:42.064 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.dynamicTexture.js

22:14:42.064 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/textures/babylon.videoTexture.js

22:14:42.064 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/babylon.effect.js

22:14:42.065 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/babylon.material.js

22:14:42.065 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/babylon.standardMaterial.js

22:14:42.066 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/babylon.multiMaterial.js

22:14:42.066 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Loading/babylon.sceneLoader.js

22:14:42.066 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Loading/Plugins/babylon.babylonFileLoader.js

22:14:42.067 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Sprites/babylon.spriteManager.js

22:14:42.067 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Sprites/babylon.sprite.js

22:14:42.067 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Layer/babylon.layer.js

22:14:42.068 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Particles/babylon.particle.js

22:14:42.068 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Particles/babylon.particleSystem.js

22:14:42.068 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Animations/babylon.animation.js

22:14:42.069 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Animations/babylon.animatable.js

22:14:42.069 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Culling/Octrees/babylon.octree.js

22:14:42.070 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Culling/Octrees/babylon.octreeBlock.js

22:14:42.070 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Bones/babylon.bone.js

22:14:42.070 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Bones/babylon.skeleton.js

22:14:42.071 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.postProcess.js

22:14:42.071 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.postProcessManager.js

22:14:42.071 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.passPostProcess.js

22:14:42.072 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.blurPostProcess.js

22:14:42.072 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.refractionPostProcess.js

22:14:42.072 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.blackAndWhitePostProcess.js

22:14:42.073 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.convolutionPostProcess.js

22:14:42.073 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.filterPostProcess.js

22:14:42.074 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.fxaaPostProcess.js

22:14:42.074 file:///home/chendy/Downloads/Babylon.js-master/Babylon/LensFlare/babylon.lensFlare.js

22:14:42.074 file:///home/chendy/Downloads/Babylon.js-master/Babylon/LensFlare/babylon.lensFlareSystem.js

22:14:42.075 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Physics/babylon.physicsEngine.js

22:14:42.075 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.sceneSerializer.js

22:14:42.075 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Math/babylon.axis.js

22:14:42.076 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Mesh/babylon.csg.js

22:14:42.076 file:///home/chendy/Downloads/Babylon.js-master/Babylon/PostProcess/babylon.oculusDistortionCorrectionPostProcess.js

22:14:42.077 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.virtualJoystick.js

22:14:42.077 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/Controllers/babylon.oculusController.js

22:14:42.077 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.oculusOrientedCamera.js

22:14:42.078 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/babylon.virtualJoysticksCamera.js

22:14:42.078 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/Controllers/babylon.keyboardMoveController.js

22:14:42.078 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/Controllers/babylon.inputCollisionFilter.js

22:14:42.079 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/Controllers/babylon.gravityInputController.js

22:14:42.079 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Cameras/Controllers/babylon.globalAxisFactorsFilter.js

22:14:42.079 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Materials/babylon.shaderMaterial.js

22:14:42.251 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Tools/babylon.database.js

22:14:42.251 file:///home/chendy/Downloads/Babylon.js-master/Babylon/Bones/babylon.skeleton.js

22:14:42.448 syntax error default.vertex.fx:1

22:14:42.449 Error: 0 default.vertex.fx:249

 

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>BABYLON - BASICS</title>   <!--Loading babylon engine -->	<script src="hand.minified-1.3.7.js"></script>	        <script src="Babylon/Math/babylon.math.js"></script>	<script src="Babylon/Tools/babylon.database.js"></script>	<script src="Babylon/Tools/babylon.tools.dds.js"></script>	<script src="Babylon/Tools/babylon.tools.js"></script>	<script src="Babylon/babylon.engine.js"></script>	<script src="Babylon/babylon.node.js"></script>	<script src="Babylon/Tools/babylon.filesInput.js"></script>	<script src="Babylon/Collisions/babylon.pickingInfo.js"></script>	<script src="Babylon/Culling/babylon.boundingSphere.js"></script>	<script src="Babylon/Culling/babylon.boundingBox.js"></script>	<script src="Babylon/Culling/babylon.boundingInfo.js"></script>	<script src="Babylon/Lights/babylon.light.js"></script>	<script src="Babylon/Lights/babylon.pointLight.js"></script>	<script src="Babylon/Lights/babylon.spotLight.js"></script>	<script src="Babylon/Lights/babylon.hemisphericLight.js"></script>	<script src="Babylon/Lights/babylon.directionalLight.js"></script>	<script src="Babylon/Lights/Shadows/babylon.shadowGenerator.js"></script>	<script src="Babylon/Collisions/babylon.collider.js"></script>                                                  		<script src="Babylon/Cameras/Controllers/babylon.inputController.js"></script>	<script src="Babylon/Cameras/babylon.camera.js"></script>	<script src="Babylon/Cameras/babylon.freeCamera.js"></script>	<script src="Babylon/Cameras/babylon.touchCamera.js"></script>	<script src="Babylon/Cameras/babylon.arcRotateCamera.js"></script>	<script src="Babylon/Cameras/babylon.deviceOrientationCamera.js"></script>	<script src="Babylon/Rendering/babylon.renderingManager.js"></script>	<script src="Babylon/Rendering/babylon.renderingGroup.js"></script>	<script src="Babylon/babylon.scene.js"></script>	<script src="Babylon/Mesh/babylon.vertexBuffer.js"></script>       	<!-- depends on vertexBuffer -->	<script src="Babylon/Mesh/babylon.mesh.vertexData.js"></script>	<script src="Babylon/Mesh/babylon.mesh.js"></script>	<script src="Babylon/Mesh/babylon.subMesh.js"></script>	<script src="Babylon/Materials/textures/babylon.baseTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.texture.js"></script>	<script src="Babylon/Materials/textures/babylon.cubeTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.renderTargetTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.mirrorTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.dynamicTexture.js"></script>	<script src="Babylon/Materials/textures/babylon.videoTexture.js"></script>	<script src="Babylon/Materials/babylon.effect.js"></script>	<script src="Babylon/Materials/babylon.material.js"></script>	<script src="Babylon/Materials/babylon.standardMaterial.js"></script>	<script src="Babylon/Materials/babylon.multiMaterial.js"></script>	<script src="Babylon/Loading/babylon.sceneLoader.js"></script>	<script src="Babylon/Loading/Plugins/babylon.babylonFileLoader.js"></script>	<script src="Babylon/Tools/babylon.database.js"></script>	<script src="Babylon/Sprites/babylon.spriteManager.js"></script>	<script src="Babylon/Sprites/babylon.sprite.js"></script>	<script src="Babylon/Layer/babylon.layer.js"></script>	<script src="Babylon/Particles/babylon.particle.js"></script>	<script src="Babylon/Particles/babylon.particleSystem.js"></script>	<script src="Babylon/Animations/babylon.animation.js"></script>	<script src="Babylon/Animations/babylon.animatable.js"></script>	<script src="Babylon/Culling/Octrees/babylon.octree.js"></script>	<script src="Babylon/Culling/Octrees/babylon.octreeBlock.js"></script>	<script src="Babylon/Bones/babylon.bone.js"></script>	<script src="Babylon/Bones/babylon.skeleton.js"></script>	<script src="Babylon/Bones/babylon.skeleton.js"></script>	<script src="Babylon/PostProcess/babylon.postProcess.js"></script>	<script src="Babylon/PostProcess/babylon.postProcessManager.js"></script>	<script src="Babylon/PostProcess/babylon.passPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.blurPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.refractionPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.blackAndWhitePostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.convolutionPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.filterPostProcess.js"></script>	<script src="Babylon/PostProcess/babylon.fxaaPostProcess.js"></script>	<script src="Babylon/LensFlare/babylon.lensFlare.js"></script>	<script src="Babylon/LensFlare/babylon.lensFlareSystem.js"></script>	<script src="Babylon/Physics/babylon.physicsEngine.js"></script>	<script src="Babylon/Tools/babylon.sceneSerializer.js"></script>	<script src="Babylon/Math/babylon.axis.js"></script>	<script src="Babylon/Mesh/babylon.csg.js"></script>	<script src="Babylon/PostProcess/babylon.oculusDistortionCorrectionPostProcess.js"></script>	<script src="Babylon/Tools/babylon.virtualJoystick.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.oculusController.js"></script>	<script src="Babylon/Cameras/babylon.oculusOrientedCamera.js"></script>	<script src="Babylon/Cameras/babylon.virtualJoysticksCamera.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.keyboardMoveController.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.inputCollisionFilter.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.gravityInputController.js"></script>	<script src="Babylon/Cameras/Controllers/babylon.globalAxisFactorsFilter.js"></script>	<script src="Babylon/Materials/babylon.shaderMaterial.js"></script>    <!-- CSS -->    <!-- ------ -->    <style>        html, body, div, canvas {            width: 100%;            height: 100%;            padding: 0;            margin: 0;            overflow: hidden;        }    </style></head><!-- BODY --><!-- ------ --><body>    <div id="rootDiv">        <!-- Main Canvas -->        <canvas id="renderCanvas"></canvas>    </div>    </body>    <!-- BABYLON SCRIPT -->    <!-- -------------- -->    <script type="text/javascript">		// Get the Canvas element from our HTML below        var canvas = document.getElementById("renderCanvas");        // Load BABYLON 3D engine and set the root directory        var engine = new BABYLON.Engine(canvas, true);		engine.ShadersRepository = "/Babylon/Shaders/";        //Create a new scene with a camera (mandatory), a light (better) and a sphere (to see the origin)        var scene = new BABYLON.Scene(engine);        // Creating a camera looking to the zero point (0,0,0)        var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);        // Creating a omnidirectional light        var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);        // Creating a sphere of size 1, at 0,0,0        var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);        // Attach the camera to the scene        scene.activeCamera.attachControl(canvas);        // Once the scene is loaded, just register a render loop to render it        engine.runRenderLoop(function () {            scene.render();        });    </script></html>

 

[gwenael]

Try to remove `engine.ShadersRespository = ...` and `BABYLON.Engine.ShadersRepository = "/Babylon/Shaders/";` before `var canvas = ...`

ShadersRepository is a static member.

 

The problem could also come from the fact that you don't use a server to deliver the files. Let me try tomorrow.

[Chendy]

 

Try to remove `engine.ShadersRespository = ...` and `BABYLON.Engine.ShadersRepository = "/Babylon/Shaders/";` before `var canvas = ...`

ShadersRepository is a static member.

 

I tried that also, and just retried that, but I get the error "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied"

 

 

The problem could also come from the fact that you don't use a server to deliver the files

 

... but why would it allow the minified version by not the unminified? aren't they the same? (See above: I tested the same code with a local version of babylon.js minified, and it worked fine)

 

Look forward to hearing if you succeed

[Dad72]

May be the "use strict" which are present in the file unminified and which are not in the minified.

It's just an idea.

[GameMonetize]

Have you authorize .fx files on your web server?

[gwenael]

You don't seem to use a server according to what I can read in your log: "file:///". If I remember well, you can't use babylon.js without a server. You seem to be on linux or mac. EasyPHP should be fine for you.

[Chendy]

Hi guys,

 

Thanks, I will looking into setting up a local server if this is likely to solve these issues. 

 

Thanks

[Wingnut]

Yes, this is the ever-annoying restricted XmlHttpRequest (XHR) object problem. It has haunted me and SO MANY others.  It will also keep you from loading-in .babylon files at home.  I have been there - click here to see.

 

It all started WAY BACK when I first tried to run the beautiful Train Demo at home.    I used to use my browser to 'munge' all sorts of files on my hard drive, such as track route files from MS Train Sim, and my own source codes.  I would do regexp sniffings and find nodes (train files) and functions (source code) and create pretty drill-able html tables from the results, but those days ended when the XHR lost all its power, due to a security hole.  "They" should have allowed full file-loading access from/to any file:/// url, but no, they shut that off.  It pretty much killed my use of a JS powered browser as a local tool.  Sad days since then.

 

And getting back to babylon.js, it stops most of us from doing what you tried, Chendy.  We could contribute MUCH MORE to the bjs codebase if we could do home experimenting on BJS source code.  But, our XHR object blocks us from the fun.  Its not the fault of the framework.

 

DK mentioned, at that url above, that we could pull all the shader code out of their files and 'manually' fill up the shader cache with them, but I have not tried that yet.  In the new Clouds demo (which DOES run at home, yay), I saw shader code inserted into a SCRIPT element, which is simple, but I don't know what the story is on THAT, yet.  And getting the .fx shaders loaded without XHR hell is just the first step.  I would love to be able to get the .babylon files to load... but no. 

 

So, I never use a modeler, no model or scene exports, because I have no way to get models loaded into BJS.... at home.  But still I have fun with BJS.  Right now I am trying to make dynamic walls  ie.  BABYLON.CreateWall(huge_object_full_of_parameters).  It keeps me busy. 

 

Sorry for your hassles, Chendy.  Those hassles have hurt many of us, and have hurt BJS reputation as well (somewhat unfairly, but still has).

 

Clouds demo - http://www.babylonjs.com/Scenes/Clouds/index.html  You can even 'view source' on it!!!  What a nice change from the other demos on the BJS website, huh?  See the shader code in there?  I don't know what its story is, but HOLY CRAP, we might be able to play with shaders finally, and we might be seeing the beginnings of the end to .fx file loading hell!  Hurray! 

 

If you'll pardon my ranting, that html-swapping BJS website is nothing but a bucket of bison snot.  Want to know more about BJS?  Then scroll past this HUGE pile of oversized demo pictures and try to find the 4pt font links in low-contrast colors at the bottom.  They are super easy to not notice.  Who cares?  Apparently not the designer of that website.  Want to view the source of those demos?  Forget it.  You'll need to go dig them out of the samples folder at github.  Too bad we can't see the github link hidden at the bottom of the website. 

 

I am being un-nice, and I promised not to be that way anymore, so, I apologize for being mean, but its still the truth.  ( I have always struggled with tact vs. straight-shooting truth-of-opinion. Mothers Against Hurt Feelings is always sending me cease and desist letters. )    "Bucket of bison snot" is MUCH funnier than "less than optimal", right?

 

https://github.com/BabylonJS/Babylon.js  See that 'download zip' in the lower right?  I use that with every new version of babylon.js, and keep a 'master' folder on my local hard drive.  Its handy, and you can run the clouds demo from there... and maybe a couple of the other demos that don't use custom shaders and don't use .babylon files (mostly the little simple demos).  Its still better than peeing on your foot.

 

Be well.

[SideraX]

If you don't want to install a wamp/lamp/mamp, you can try http://www.html5gamedevs.com/topic/2166-introducing-project-warp/ , its a very simple static webserver (i didn't test it).

 

Or you can use https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Gulp to generate a js file with all the shaders inside, juste type 

gulp shaders

It will load all the .fx files and generate build/shaders.js based on them.

 

It will look like : 

BABYLON.Effect.ShadersStore={"blackAndWhitePixelShader":"#ifdef GL_ES\nprecision mediump float .....

Edit : 

The default action of gulp will generate also generate build/babylon.js, which is a non minified version of Babylon, if you want.

[Wingnut]

Hi SideraX.  Thanks for the help, but, where would you have us type 'gulp shaders'?  What I really need is allShaders.js.  Inside that is a single JS object with all the shaders on it.  Then somewhere in the BJS code:

 

if (shaderObject) { get all needed shaders from that object }

 

But I am likely well-confused, so I will sit back and watch the discussion... see if I can make sense of any of it.

[SideraX]

HI Wingnut.

 

To use Gulp - http://gulpjs.com/ (which is a building system like grunt.js if you know it, most of the js library (like jquery) uses this system to build their minified version), you need first to install nodejs and npm ( http://nodejs.org/download/ msi installer on windows ).

Now if you open a command line, you can type node or npm inside it

 

 

Next you need to install gulpjs, it's easy, you need to write inside the terminal.

npm install -g gulp

This command will download and install gulpjs.

 

Now with the terminal you need to go inside the directory Tools/Gulp of Babylon.js

 

Likewise you need now to write inside the command line :

npm install

This will install all the dependencies required by gulp (you can look inside the files package.json, they are declared here). 

 

You are now ready to build Babylon.js : just write gulp in the terminal

In the directory Tools/Gulp/build you have now two file babylon.js and babylon.min.js (this two files already have all the shaders inside).

 

Chendy can, if he need it, use babylon.js which is a non-minified version.

 

Now the part that is interesting is that to build this files, I need to read all the shaders and to put them inside a jsobject. It's the gulp task nammed shaders (you can see it in the last screenshot).

And it's also possible to execute this task alone : 

gulp shaders

 

build/shaders.js contains all the shaders in Babylon.js/Babylon/Shaders/.

So this file can be used by Chendy if he want to use directly the source inside his index.html and to not have to load the shaders with a xhr request.

 

But in the end, it's a lot easier to just install apache ^^

[gwenael]

Is there a way to specify dependencies between script files with gulp?

[SideraX]

Not really.

 

But inside gulpfile.js by exemple: for the task "scripts", all the script are concatenated in the order that they are declared in the gulp.src array parameter. If I had written gulp.src(['../../Babylon/**/*.js']) instead, the build would have failed (because the files would have been concatenated in a random order in this case).

 

Personally, I use browserify for my game to manage the dependencies by writing my source files in the commonjs style. But it's not possible to used this in the building process of Babylon unfortunately.

[gwenael]

OK thank you. I wrote https://github.com/BabylonJS/Babylon.js/blob/master/Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJS/Script.cs to deal with dependencies but unfortunately it's only for Windows users so I was wondering if we could get something more cross-platform.

 

EDIT: dependencies are not specified yet (with 'dependsOn' tags) in https://github.com/BabylonJS/Babylon.js/blob/master/Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJS/babylonJS.xml but the C# program is ready for it.

[SideraX]

I'm sure it's possible to write a gulp plugin to do something similar, I will think on it thanks

[gwenael]

That would be cool. For Windows users, my tool would call your tool.