Quantcast
Channel: Babylon.js
Viewing all 388 articles
Browse latest View live

How to update online documentation

$
0
0

Hi,

 

I spend much time updating the documentation online : I edit the file with the github editor, this creates a branch in my own repo, then I PR it.

I understand that these PR are merged because I received mails notifying it.

 

But when I come to the github doc site on the branch master, I can often see that my updates aren't in the master doc. So where are they then ?


Animation loopMode

$
0
0

Hi.  Please, escape me - animation does not allow me to sleep on nights :)  And have all chances will be my personal nightmare )))

I just do not understand how it works.

 

http://www.babylonjs-playground.com/#1UGLI9#3

if we change loopMode in animation process - we have the same result - animation play to end and stop.

Next, if we swap modes:

http://www.babylonjs-playground.com/#1UGLI9#4

we also can not change animation loopMode. Why?

 

Perhaps loopMode cant be changed, while animation played?  Try:

http://www.babylonjs-playground.com/#1UGLI9#5

click just stopped animation.

 

And:

http://www.babylonjs-playground.com/#1UGLI9#6

Oh, no... restart() do nothing again :((((

 

More:

http://www.babylonjs-playground.com/#1UGLI9#8, http://www.babylonjs-playground.com/#1UGLI9#9

If we click - sphere not return in original state.

 

Please, open the animation logic for new bee - it really unclear and seems unlogic (( 

 

 

Questions regarding Playground and Textures

$
0
0

Hi,

 

I am designing a shed and would like to use a texture for the siding.   I really like this playground environment and even though I am a beginner, I have made good progress rendering my partial shed, but I can't seem to get the playground to let me use a custom texture image.

 

Here is my scene so far:

 

http://www.babylonjs-playground.com/#1VMKSE#60

 

I am using grass as my texture because I can't upload my file to the playground (I don't see a mechanism for that).  I tried an absolute url instead of "textures/grass.jpg" in the code but that didn't work for some reason.  Is there a way to use custom texture .jpg images in the playground?

 

I also have a some of other questions:

 

1. I have defined my walls as boxes. I now need to add windows and doors and allow movement of those.   Is there any way I can cut my box defined mesh to allow the doors and windows or do I need to start over and define the mesh as a list of vertices?

 

2. is there a way to define different textures for different sides of a mesh?  I read about a cube of meshes to be placed in a subdirectory but didn't totally understand it.

 

3. I have visual studio 2015 and heard there is a way to use that as a build environment with intellisense but couldn't find any details.  Does that documentation exist?

 

thanks for any help.

 

Jeff

 

Always visible mesh

$
0
0

Hi,

 

I'm looking for a property I just can't remember the name.

It allows a mesh to be forced to be "rendered" even if its bounding box isn't in the frustum.

 

Any ideas ?

CASTORGUI dynamic slidescroll list

$
0
0

Hello, how can i make CASTORGUI dynamic slidescroll list? I want to load array to few buttons then add it to  portraid slidescroll.

Oculus camera rotation

$
0
0
Hi everyone

I am trying to get Oculus Rift DK2 working with my WebGL Javascript code.
I am attaching WebVRFreeCamera to my canvas in the scene.
I can see that some head tracking happening but unfortunately in the wrong directions.
For example if I rotate my head about X axis canvas rotates in Z axis and vice versa.

Did anyone has experimented this before? Any solution?

Thanks..

Skeleton doesn't work after i use the latest master version

$
0
0

this.scene.beginAnimation(this.mesh.skeleton, 215, 245, true, 1.0);

 

it worked before...

 

But i download the latest version from github, and the skeleton dosn't show any move...

 

I step into the code and found nothing wrong. 

scene.render -> _animate -> animatable ->animation.animate....

 

is there something changed?

Use a picture as a dynamic texture

$
0
0

Hello guys,

 

I want to know if it's possible to use an image as a texture for a plane or a box and use a control panel to resize, move, etc the image on the plane. I suppose i have to use dynamic textures but i'm not very sure that will be the best way to have the result.

 

 


November challenge - celebrating materials

$
0
0
Hi guys,

A new challenge for cold November. better late than never!
This month's challenge is meant to celebrate Babylon's new material library. A wonderful edition to the framework, which you ALL should know by now :-) If you don't - https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary

November's challenge is simple - we create shaders. Better yet, we create new materials. I cannot promise they will be integrated in the library, but if they are good, they probably will!!

For those who are afraid of shaders (AHH!!!!!!!!!!) - fear no more! Or do, but it won't help you...
There are many ways of learning them, I found this one to be wonderful - https://www.npmjs.com/package/shader-school

To see what's possible with shaders, try this website - https://www.shadertoy.com/ . They are truly a wonderful toy.

The challenge's rules:
  • Shader must be original!
  • Shader must be used as a library (thus forcing your poor souls to actually use the material library). If anyone need help with that, write here!
  • Must be more than 2D image manipulation. It must have a 3D effect.
  • (late edition) must be cross platform, including mobile!
That's it.
Party on!

Once again, honor, glory, and beer to the winner !

ImportMesh by http and Access-Control-Allow-Origin

$
0
0

Hello,

 

I am looking to importMesh() from my server (http://www.castorengine.com) on my local project (http://1270.0.1:122). but each time I : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:122' is therefore not allowed access.

 

I added on every page: 

header('Access-Control-Allow-Origin: *');

I did like this:

 

By http://www.castorengine.com

function Importer(url, type) { 
        parent.postMessage({url:url, type:type}, '*');
}
window.addEventListener('message', function(event) {
	if (~event.origin.indexOf('http://www.castorengine.com')) {
		var data = event.data;
		layout.addObjet.importMediaStore(data.url, data.type);
	}
});

Why I have this error Access-Control-Allow-Origin and how to solve it.

 

with this url :  http://www.castorengine.com/boutique/MESHES/table/table.babylon

 

Thanks for help

 

Procedural Textures

$
0
0

Hey guys,

 

are the procedural textures deprecated or just broken at the moment? :P

 

The example playground doesn't seem to work anymore: http://www.babylonjs-playground.com/#24C4KC

 

And my try to set up a super simple test doesn't seem to work either: http://www.babylonjs-playground.com/#1C7HU0

 

If I try with a version that I downloaded not too long ago everything seems fine. So I am assuming something (bad) happened in the last few days... maybe something went wrong when introducing the material library?

Oimo Behaviour with Imported Meshes

$
0
0

Hey everyone,

 

I made a pretty basic scene in blender few bowling pins and a plane. As a still it seems to render fine. But, when I attach oimo the pins seem to shoot all over the place.  The face on the floor either disappears or I get crazy artifacts.  I had previously tried using a blender cube mesh for the floor (the pins sank halfway into the floor when I did this)...  Is there something I am missing?  Also, the move:false property doesn't seem to work with oimo.

 

And if I looked at the position on myloader.mesh[0].position it seems to be moving all over the place (I think this may relate to the weird artifacts I was getting).

 

Does this relate to importing meshes from blender and adding physics to them?

 

When I crank up the properties of the meshes it seems to have no effect...

 

Any help or suggestions would be appreciated.

 

Example:

 

https://25ec50416d915381f564e8e072111117f4bfc2ab-www.googledrive.com/host/0B7OlMPbfskONY1hWeVgtUDhQcVU/

 

Thanks in advance!

if (BABYLON.Engine.isSupported()) {
    var canvas = document.getElementById("rencanvas");
    var engine = new BABYLON.Engine(canvas, true);
    var meshesColliderList = [];
    var myloader;

    BABYLON.SceneLoader.Load("", "bowl.babylon", engine, function (newScene) {
        // Wait for textures and shaders to be ready
        newScene.executeWhenReady(function () {
            // Attach camera to canvas inputs

            newScene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());
            //newScene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.CannonJSPlugin());

            newScene.activeCamera.checkCollisions = true;
            newScene.activeCamera.applyGravity = true;
            newScene.activeCamera.collisionsEnabled = true;

            newScene.activeCamera.attachControl(canvas);
            newScene.gravity = new BABYLON.Vector3(0, -9.8, 0);

            checkColliders(newScene);
            myloader = newScene;
            console.log(myloader);
            //addListeners(myloader);
            // Once the scene is loaded, just register a render loop to render it
            engine.runRenderLoop(function () {
                myloader.render();

            });
        });
    }, function (progress) {
        // To do: give progress feedback to user
    });
}


function checkColliders(newScene) {
    for (var i = 0; i < newScene.meshes.length; i++) {
        if (newScene.meshes[i].id == "Plane") {
            newScene.meshes[i].setPhysicsState({
                impostor: BABYLON.PhysicsEngine.PlaneImpostor,
                mass: 1,
                friction: 2,
                restitution: 0.1,
                move: false
            });

        }
        else {

            newScene.meshes[i].setPhysicsState({
                impostor: BABYLON.PhysicsEngine.BoxImpostor,
                mass: 1,
                friction: 2,
                restitution: 0.1,
                move: false
            });
            meshesColliderList.push(newScene.meshes[i]);

        }
    }
}

function addListeners(myLoader) {
    canvas.addEventListener("mousedown", function (evt) {
        var pickResult = myLoader.pick(evt.clientX, evt.clientY);
        if (pickResult.hit) {
            var dir = pickResult.pickedPoint.subtract(myLoader.activeCamera.position);
            dir.normalize();
            pickResult.pickedMesh.applyImpulse(dir.scale(1), pickResult.pickedPoint);
            console.log(pickResult);
        }
    });

}

Is there any way to split one main.js to few?

$
0
0

hello, im new in JS, can i split my main.js file into:
player.js
gui.js
other.js
and how to comunicate betwene it?

How to set alpha in fragment.fx

$
0
0

Hi,

 

I try to set alpha in fragment.fx with code : gl_FragColor = vec4(finalColor, 0.4);

 

but it displays almost white, not transparency.

 

BTW, the shader works well.

 

How can I set transparency in fragment.fx?

 

Thanks for your help.

How to use mirror texture in fragment.fx

$
0
0

Hi,

 

I want to use a mirror texture in fragment.fx for rendering water.

 

I created mirror texture and set it to the uniform sampler, but it's black. However, it works well if I set an other texture.

 

It is ok if I use the same mirror texture for a plane without using shader.

 

Thanks for your  help. 


Babylon screenshot

$
0
0

Hello everyone!

 

I have this pretty big scene, heavy on polygons and textures, and I need to make a screenshot in high quality. I'm using Tools.CreateScreenshot method, explained in this tutorial, which works well for small/medium size (I've managed to extract an image up to 1344x756px, of 1.48MB), but when I try to extract a bigger image, nothing happens at all, no matter how long I wait. 

 

I also tried this playground I found in this topic, and with this scene I can extract images of 5000x5000px.

 

So does this happen to my scene because it's too big? Any ideas to make it work?

 

Thank you!

New 3D instructional video!

$
0
0

You guys have probably figured that when I start asking a lot of annoying questions it means I'm working on something  :P

 

I want to have a way where people can learn how to dance or do martial arts from 3D videos.  This way they can pause, slow down, skip timeline and watch at a different angle.  I'm hoping to get a motion capture rig soon, but in the meantime I've been working with the animation functions to get the controls working.  You can have a play here http://www.punkoffice.com/tori  This should work on most modern mobile devices too (works on my iPhone 6+).  Have a play and tell me what you think 

Mesh with baked lightmap (Blender Cycles)

$
0
0

Hello everyone! I've been lingering these forums for a few days, just reading, seems like people here are really nice and helpful to each other.

 

Anyway, I've been using three.js for the past month for my project, exporting blender models with lightmap textures baked in using cycles and the node editor (pretty much the most basic lightmap baking workflow, probably).

 

Now, I'm on the verge of a decision on switching to babylon.js, because after looking through the code, seems to me, even though it's younger than three.js it's a lot more complete.

 

Anyway, from what I've read in various places about the babylon.js exporter for blender, I cannot use cycles or nodes to export my models (only blender renderer, whoever uses that nowadays...).

 

Is there a quicker way of exporting my models using cycles baked in lightmaps/textures (via the node editor) into babylon, without doing the long manual labor (bake->export->edit texture externally (merge lightmap with the texture itself)->add a blender render texture in blender, find the texture->export to babylon) for each seperate model? My scenes have from 20 to 80 different objects with textures, so this cumbersome workflow is very ineffective.

 

I hope you understand my question and I really hope it's not a stupid one (or an answered one, because I've searched the whole forum for answers). :)

reflection probes warning

$
0
0

http://www.babylonjs-playground.com/#KA93U#16

 

WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.

That's what appears in the console, having too much warnings makes WebGL not give any more information until you refresh your page.

Documentation site : CSS suggestion

$
0
0

Hello,

 

Imho, it would be nice that, in the documentation site, all the code parts would be displayed with some fixed size fonts.

It would be more readable and would look like the code we write or read in our editors.

In-line syntaxic coloration would be great too.

 

example : I personnaly like the style in Temechon's folders http://pixelcodr.com/tutos/physics/physics.html

or the github coloration also

both are easliy readable

Viewing all 388 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>