Are Indices optional, or can they be?

November 19, 2015, 10:03 am

≪ Previous: Water material black smudges

I am informed by the behavior of the Blender exporter for BabylonJS. If you assign a skeleton to a mesh, it no longer writes an optimized list of verts/normals/UV/etc. It writes them all. Now I do not really know why this required, but lets assume it (I will challenge this through experimentation @ another time).

This can create a choke point. As your mesh gets larger, if you have a skeleton you could reach the 65k limit of indices (likely causing problems for mobile), where as if they were optimized they would not. If you are not optimizing, would not requiring indices completely solve the problem?

That is if it works. There is much checking if indices are defined in JS, but will the other buffers work without the index?

↧

Interesting playgrounds

November 19, 2015, 10:13 am

≫ Next: Equalizer !

≪ Previous: Are Indices optional, or can they be?

Hello community!

I created a new page in the documentation : http://doc.babylonjs.com/generals/playgrounds (CTRL+F5 to clean your browser cache please - new css)

This page is here to list all interesting playground that you can do or that you can find here in this forum.

How tu update it ?

I will suppose you have a Github account. If not, create one (it's free!)

Go here.

Clic on the pen icon :

Edit the file, add your new playground (don't forget the author!) and clic on the bug greeny button :

And it's done!

From now on, your mission should you choose to accept it, is to fill this page with your BEST Babylon.js demos!

To your keyboards!

↧

Equalizer !

November 19, 2015, 10:21 am

≫ Next: Creating awesome demos for Babylon.js

≪ Previous: Interesting playgrounds

Hi guyz !

Here is a simple effect demonstrating how to use the analyser in Babylon JS and some cool things

+ DOF

+ UV Mapping

+ Reflection map (spherical)

etc ...

The code is not obfuscated and i think it's clear....

Hope you enjoy.

http://synergy-development.fr/equalonyzer/

↧

Creating awesome demos for Babylon.js

November 19, 2015, 12:41 pm

≫ Next: Why some models have diffrent colors in diffrent browser

≪ Previous: Equalizer !

Hell all,

following a previous thread, I would like to start this topic about babylon.js.

If you want to help spreading the word about Babylon.js, you have several options:

Help improve the current demos on homepage: https://github.com/BabylonJS/Samples
Send your own demo to be showcased on homepage. It can be a feature demo (more oriented toward a feature) or a showcase demo (more oriented toward a waouuh effect:))

Please feel free to use this topic to discuss about ideas, help request or whatever related to demos

↧

Why some models have diffrent colors in diffrent browser

November 19, 2015, 2:40 pm

≫ Next: Model manifest is there any way to disable it?

≪ Previous: Creating awesome demos for Babylon.js

Hello, some of my models are red in google chrome, black(nolight) in safari, how i can fix this bug?
First screen is from chrome, second from safari and last from mobile chrome.

Attached Thumbnails

↧

Model manifest is there any way to disable it?

November 20, 2015, 3:26 am

≫ Next: Another day, another PG ! (Glass wobble ball)

≪ Previous: Why some models have diffrent colors in diffrent browser

Hello every model needs manifest, can I disable this?

↧

Another day, another PG ! (Glass wobble ball)

November 20, 2015, 6:13 am

≫ Next: Character locomotion animation blending

≪ Previous: Model manifest is there any way to disable it?

Hi all !

Here is another PG for learning purpose !

This is a "Glass wobble ball" demoish effect (no shader)

Maybe we should a topic where we will post our PG instead of opening new topic each time ?

In all case, hope you enjoy.

http://www.babylonjs-playground.com/#CXOLW#3

Attached Thumbnails

↧

Character locomotion animation blending

November 20, 2015, 6:44 am

≫ Next: babylon export file not found

≪ Previous: Another day, another PG ! (Glass wobble ball)

Hi guys
I'm writing the locomotion algorithm for a character I created in blender.
What I'm trying to achieve is a blend tree that will allow me to blend between the "walk-front", "strife-left" animations according to the velocity of my character (something similar to https://www.youtube.com/watch?v=Xx21y9eJq1U&feature=youtu.be&t=1263).
I've been able to blend between two frames, by calculating a weighted average of the transformation matrix for each bone, so far so good.
Now before going on with my development I'm asking myself the following design question.

Supposing I will have a state machine to control the character, should I write an update(dt) method called at each engine tick and reposition its bones individually or rather bake at run-time a new animation with frames each time the direction/velocity changes?

I just do not know the pros/cons sticking with Babylon Animations versus going on with my own update method.

What I like of using Babylon Animations is the fact that I can fast up / slow down my walk cycles so to simulate faster/slower velocities.

Thank you in advance for any feedback,
Joez

↧

babylon export file not found

November 20, 2015, 7:24 am

≫ Next: Path3D & zero-filled initialVector

≪ Previous: Character locomotion animation blending

Hi I am trying to figure out my why my import babylon scene file is always not found.

I included it in the same location as my html files

I am not running it off a web server, its running of my browser.

var canvas = document.getElementById("3dCanvas");
	var engine = new BABYLON.Engine(canvas, true);
	
	var scene;

	BABYLON.SceneLoader.Load("", "t.babylon", engine, function (newScene){
    	scene = newScene;
		var c = scene.getMeshByName("tetrahedron");

    //Do what you want
	});

XMLHttpRequest cannot load file:///C:/Users/zmm/lifeprint/new/t.babylon.manifest?1448032895642. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.t.checkManifestFile @ babylon.js:2
babylon.js:3 XMLHttpRequest cannot load file:///C:/Users/zmm/lifeprint/new/t.babylon. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.h @ babylon.js:3
babylon.js:3 Uncaught Error: Error status: 0 - Unable to load t.babylon

↧

Path3D & zero-filled initialVector

November 20, 2015, 2:48 pm

≫ Next: BabylonJS + Webpack

≪ Previous: babylon export file not found

When setting (0,0,0) as initial vector all other normal and binormal vectors of points in the path will be (0,0,0) too (not just the first). I don't know if this is a bug or a feature since the initial vector probably isn't supposed to be (0,0,0). Maybe this should trigger a warning?

I almos went crazy since I didn't find the error. :/

Example:

http://www.babylonjs-playground.com/#7SQDY

↧

BabylonJS + Webpack

November 20, 2015, 4:07 pm

≫ Next: Spheres get "corrupted" normals if radiusXYZ or diameterXYZ is used

≪ Previous: Path3D & zero-filled initialVector

Hi,

I just switched to webpack in one of my babylon.js projects and found a few oddities:

1. src version as "main" in package.json

This is not only webpack related. As far as I am aware libraries should not refer to a minimized version here. Browserify, webpack and the likes will do minification if desired. I couldn't find the package.json in the git repository. Would have created a pull request but it doesn't seem to be there

2. "use strict";

As my project is ES2015 I am using babel to transpile it back to es5. During this process babel will prepend a "use strict" to every script (for whatever reason ). I am cloning a few meshes in my project and I think it found a possible bug there:

Uncaught (in promise) TypeError: Cannot set property hasLODLevels of #<r> which has only a getter

at Function.r.DeepCopy (http://localhost:8080/output.js:20748:93937)

at new r (http://localhost:8080/output.js:20748:333962)

at r.clone (http://localhost:8080/output.js:20748:349913)

at http://localhost:8080/output.js:20274:35

The problem here is that DeepCopy will iterate over all properties and copy the value to the cloned mesh. This includes all the properties defined via Object.defineProperty

However they are getters only and thus it throws an error here. That makes perfect sense. Maybe babylon.js should always include "use strict"? Maybe there are more potential bugs hiding out there

Currently I am just ignoring babylon.js while building.

↧

Spheres get "corrupted" normals if radiusXYZ or diameterXYZ is used

November 20, 2015, 4:31 pm

≫ Next: Prevent camera from going 'underground'

≪ Previous: BabylonJS + Webpack

I was checking around the latest code of icosphere and find out that the normal are corrupted when radiusX/radiusY/radiusZ are used.
More over the BABYLON.MeshBuilder.CreateSphere seems to have the same issue if diameterX/Y/Z are used.
Both spheres use the normal define as line between vertex position to sphere center line.
Fine, but if the sphere is scaled to a flat ellipsoid with radiusY or diameterY for instance, then the (center --> ellipse point) is not the normal anymore.

I setup a basic playground to illustrate the issue (added blue line matching normal for several vertices):
flat sphere: http://www.babylonjs-playground.com/#24XHJP#2
flat icosphere: http://www.babylonjs-playground.com/#24XHJP#3

This can be fix "easily" in BJS code:

I have a tentative fix commit in my fork:

https://github.com/regis-c/Babylon.js/commit/f7d6b0159e8498943a689744cd5d019692e70191

(normals and shading seems much better when I run the playground code with the fix in my local setup)

Let me know if you think it is done in the right way (I didn't check much so side effect still possible).

Then I can send a PR if OK.

↧

Prevent camera from going 'underground'

November 21, 2015, 6:35 am

≫ Next: Clickable labels of debugger don't work

≪ Previous: Spheres get "corrupted" normals if radiusXYZ or diameterXYZ is used

Since the default camera collision behavior is kind of awkward (camera 'glues' to any surface it bumps into until manually 'released'), I resorted to just try to prevent the camera from going underground, so to speak, with just moving its target upwards as much as the camera would otherwise be underground.

http://www.babylonjs-playground.com/#1OWKH4

However the camera will start to flickr from going underground in one frame to being corrected in the next frame. More noticeable on lower FPS. How to prevent this?

Thanks in advance

↧

Clickable labels of debugger don't work

November 21, 2015, 11:36 am

≫ Next: playground height bug

≪ Previous: Prevent camera from going 'underground'

Not sure if it's a bug I created or something...

Anyways, whenever you start the BabylonJS debugger, and go to the Generals tab and tick Clickable labels, it outputs this error:

"Uncaught TypeError: Cannot read property 'getViewMatrix' of undefined"

on line 27344 (development version of Babylon, .max version), which is this line:

_this._camera.getViewMatrix().multiplyToRef(_this._camera.getProjectionMatrix(), _this._transformationMatrix);

I guess the _camera variable doesn't exist.

Like I said I'm not sure if I caused the problem, as some examples show them working correctly, but I can't seem to have it working in my game

↧

playground height bug

November 21, 2015, 8:37 am

≫ Next: Camera to follow mouse without clicking

≪ Previous: Clickable labels of debugger don't work

I wasn't sure where to report this issue so hopefully here is OK.

My surface pro is cutting off the drop-down list. Can be replicated by shrinking the browser height.

Quick fix - Change `max-height` to <= 500px for my little screen

ul#scriptsList {
    ...
    max-height:600px
}

↧

Camera to follow mouse without clicking

November 21, 2015, 10:16 am

≫ Next: How to set the starting and ending points of a Sound ?

≪ Previous: playground height bug

Hi,

I'm trying to replicate the camera movement from a typical FPS game. I want the camera to follow the player's mouse, without the need to click at all.

Here's what I've got so far:

var lastMove = 0;

oldx = 0,
oldy = 0,

mousemovemethod = function (e) {

    if(Date.now() - lastMove > 40) {

        if (e.pageX < oldx) {
            camera.rotation.y -= .1;
        } else if (e.pageX > oldx) {
            camera.rotation.y += .1;
        }

        if (e.pageY < oldy) {
            camera.rotation.x -= .1;
        } else if (e.pageY > oldy) {
            camera.rotation.x += .1;
        }

        oldx = e.pageX;
        oldy = e.pageY;

        lastMove = Date.now();
    }
}

document.addEventListener('mousemove', mousemovemethod);

The camera movement is rough and intermittent. I'd like it to be smooth with a bit of easing.

Here's a link to the full code: http://www.babylonjs-playground.com/#WM1VE

My questions are:

How can I smooth out the rotation code above, or is there a better way?
Is it possible to keep track of mouse movement outside the browser window?

↧

How to set the starting and ending points of a Sound ?

November 22, 2015, 4:56 am

≫ Next: Incorrect vertex points, import raw data from clara

≪ Previous: Camera to follow mouse without clicking

I am looking for a way to manipulate sounds so that I can set the starting and ending moment of the Sound.

This could resolve the bad .mp3 looping for example ?

This doesn't seem to work :

var loop_start = 0;
var loop_end = 0.5782708333;

sound.loopStart = loop_start;
sound.loopEnd = loop_end;
sound.loop = true;

↧

Incorrect vertex points, import raw data from clara

November 22, 2015, 11:37 am

≫ Next: ArcRotateCamera does not correctlly use upVector

≪ Previous: How to set the starting and ending points of a Sound ?

I am trying to do the following, Take a model in wireframe and add new meshes to its vertices.

I created a simple model of 2 tetrahedrons and imported it into babylon using the raw data from the export file, using setVerticesData.

It renders correctly however the next part to my project is to add meshes to each vertex point ( suppose to be 8 ),

I instead get 24 points into my array when I use the function

getVerticesData(BABYLON.VertexBuffer.PositionKind);

In clara.io I see 8 vertices. So I am not sure why I am getting so many vertex points.

The reason why I am importing the raw data is due to the fact I do not want to use a web server for this project.

it must run off the browser in offline mode.

see code

I also attached screenshots from the playground

I would like to get the correct 8 vertices to add my custom meshes to it

link to clara.io model

https://clara.io/view/2ee8381f-23f5-4eeb-b682-01e6f68f037d/image

thanks

zak

var createScene = function () {


   var scene = new BABYLON.Scene(engine);


var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);
var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);


camera.attachControl(canvas, true);


    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;


var base = createBase(scene);
var vertices = base.getVerticesData(BABYLON.VertexBuffer.PositionKind);
createMeshAtVertices(vertices, scene)
return scene;
};


function createBase(scene){
var tet1 =  new BABYLON.Mesh("base", scene);
         
var tet1positions = [-0.009,0.1071,-0.01,-0.2019,0.7687,0.4279,0.473,0.7658,-0.0316,-0.2019,0.7687,0.4279,-0.009,0.1071,-0.01,-0.2622,0.7861,-0.3862,0.473,0.7658,-0.0316,-0.2019,0.7687,0.4279,-0.2622,0.7861,-0.3862,-0.009,0.1071,-0.01,0.473,0.7658,-0.0316,-0.2622,0.7861,-0.3862,0.009,-0.1271,0.0092,0.2622,-0.8054,0.3865,-0.473,-0.7857,0.0319,0.2019,-0.7894,-0.4276,-0.473,-0.7857,0.0319,0.2622,-0.8054,0.3865,0.2019,-0.7894,-0.4276,0.2622,-0.8054,0.3865,0.009,-0.1271,0.0092,0.2019,-0.7894,-0.4276,0.009,-0.1271,0.0092,-0.473,-0.7857,0.0319];


var tet1normals = [0.5243,-0.3584,0.7725,0.5243,-0.3584,0.7725,0.5243,-0.3584,0.7725,-0.9461,-0.3177,0.0632,-0.9461,-0.3177,0.0632,-0.9461,-0.3177,0.0632,0.018,0.9996,0.02,0.018,0.9996,0.02,0.018,0.9996,0.02,0.4038,-0.3236,-0.8557,0.4038,-0.3236,-0.8557,0.4038,-0.3236,-0.8557,-0.4038,0.3249,0.8552,-0.4038,0.3249,0.8552,-0.4038,0.3249,0.8552,-0.0179,-0.9997,-0.0184,-0.0179,-0.9997,-0.0184,-0.0179,-0.9997,-0.0184,0.9461,0.3177,-0.0637,0.9461,0.3177,-0.0637,0.9461,0.3177,-0.0637,-0.5243,0.3571,-0.773,-0.5243,0.3571,-0.773,-0.5243,0.3571,-0.7734];


var tet1uvs = [0.375,0.6959,0.875,0.6959,0.625,0.3041,0.875,0.6959,0.375,0.6959,0.125,0.3041,0.625,0.3041,0.875,0.6959,0.125,0.3041,0.375,0.6959,0.625,0.3041,0.125,0.3041,0.625,0.3041,0.875,0.6959,0.375,0.6959,0.125,0.3041,0.375,0.6959,0.875,0.6959,0.125,0.3041,0.875,0.6959,0.625,0.3041,0.125,0.3041,0.625,0.3041,0.375,0.6959];


var indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
tet1.setVerticesData(BABYLON.VertexBuffer.PositionKind, tet1positions,  true);
tet1.setVerticesData(BABYLON.VertexBuffer.NormalKind, tet1normals, true);
tet1.setVerticesData(BABYLON.VertexBuffer.UVKind, tet1uvs, true);
tet1.setIndices(indices);


var material = new BABYLON.StandardMaterial("pyshical", scene);
material.wireframe = true;
material.diffuseColor = BABYLON.Color3.White();
material.specularColor = BABYLON.Color3.White();
material.emissiveColor = BABYLON.Color3.Blue();


tet1.material = material;
tet1.scaling = new BABYLON.Vector3(15, 15, 15);
tet1.rotation.z = -0.4;
tet1.rotation.y = 2.5;
tet1.rotation.x = 2.6;
tet1.bakeCurrentTransformIntoVertices();
return tet1;
};




function createMeshAtVertices(vertices, scene) {
var stype = 0;
var shape;
for (var i = 0; i < vertices.length / 3; i++ ){
if(stype == 5)
stype = 0;
shape = BABYLON.Mesh.CreatePolyhedron("pyshical", { type: stype, size:0.5 }, scene);    
shape.position = BABYLON.Vector3.FromArray(vertices, i);
shape.scaling = new BABYLON.Vector3(1, 1, 1);
stype++;




}
};

Attached Thumbnails

Attached Files

untitled-scene-babylon.zip 902bytes 0 downloads

↧

ArcRotateCamera does not correctlly use upVector

November 22, 2015, 2:52 pm

≫ Next: Please welcome..the Physically based rendering material!

≪ Previous: Incorrect vertex points, import raw data from clara

I don't believe ArcRotateCamera correctly uses the upVector. Instead of getting into my use case, I've setup some playground demonstrations.

Playground 1: This is the default. upVector is Y+.

Behavior: Move the mouse left, spins clockwise around the Y axis. Move the mouse right, spins counter clockwise. Move the mouse up, pushes the Y+ axis away from the screen, move the mouse down, pulls the Y+ axis towards the screen.

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

This default works as expected.

Playground 2: Set the upVector to Z+

Expected Behavior: Move the mouse left and right should spin around the Z axis. Move the mouse up and down should pull the Z axis towards and away from the screen. Unfortunately, that is not the actual behavior.

http://www.babylonjs-playground.com/#2K6AJC#3

Thanks

↧

Please welcome..the Physically based rendering material!

November 22, 2015, 6:55 pm

≫ Next: Limiting free camera movement up or down

≪ Previous: ArcRotateCamera does not correctlly use upVector

Everything is here:

http://doc.babylonjs.com/extensions/Physically_Based_Rendering

Have fun!

↧