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

Not everything is shiny, e.g. human skin

$
0
0

I have been having a problem showing materials in a scene, where some are shiny & some not.  Usually, you might not notice everything being a little shiny, by default BJS scenes are a little shiny, but my material is human skin.  It is very important it not look too shiny.  It will look like a doll that was just in the bath tub.  People will pick up on that immediately.

 

It seems that there are many different angles to handle specular.  One way is to turn it off at the light source.  Skin looks good, but nothing else in the scene will.  I also do not want to resort to special lights for skin using layer masks.

 

The default specular of a light is 1,1,1.  Let's stick with that for now.  Here is what my character looks like:

default shiny.png

 

The eyes & teeth look ok.  The shirt is actually shiny, just not in the part showing.  Here is the code generated that make the skin material:

material = new BABYLON.StandardMaterial("VoiceSync.Clothed_ponytail:Female1605:Young_caucasian_female", scene);
material.ambientColor  = new BABYLON.Color3(0.302,0.302,0.302);
material.diffuseColor  = new BABYLON.Color3(1,1,1);
material.emissiveColor = new BABYLON.Color3(0,0,0);
material.specularPower = 256;
material.alpha =  1;
material.backFaceCulling = true;
material.checkReadyOnlyOnce = true;
texture = new BABYLON.Texture(materialsRootDir + "young_lightskinned_female_diffuse.png", scene);
texture.hasAlpha = true;
texture.level = 1;
texture.coordinatesIndex = 0;
texture.coordinatesMode = 0;
texture.uOffset = 0;
texture.vOffset = 0;
texture.uScale = 1;
texture.vScale = 1;
texture.uAng = 0;
texture.vAng = 0;
texture.wAng = 0;
texture.wrapU = 1;
texture.wrapV = 1;
material.diffuseTexture = texture;

If I control it by turning off specular at the light, I like the skin, but everything else looks dead, see eyes.  I played with some of the source above by hand, but things like setting specularPower to 0, just turned the skin bright white.  I am hoping this is just an education problem on my part.  Is there something that can be done?

light no specular.png


Interaction with meshes while the pointer is locked

$
0
0

Hi! I seriously do not know how to do this. I use the ActionManager, like so:

 

antagonist.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, antagonist, "scaling", new BABYLON.Vector3(2, 2, 2), 1000)).

 

I can click on a mesh and it performs the intended action, but I have the pointer lock implemented, as it is a first person game, so the cursor disappears. How do I enable that same action when my camera is centered on the mesh and I press the left mouse button? Any ideas?

 

Thanks in advance.

 

 

Hi-value positions glitch

create a viewcube with multimaterial

$
0
0

Hi,

 

I create a ViewCube to inform the view of the window (front, back, top, bottom, left, right).  I apply a dynamic texture with a multimaterial. I used an orthographic camera to display the cube in the upper right hand corner with a layerMask. so far, all are well.
 
But I have some difficulty for submeshes portion of the cube that I do not fully understand.
 
this:
viewcube.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 4, viewcube));
viewcube.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 4, 8, viewcube));
viewcube.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 8, 12, viewcube));
viewcube.subMeshes.push(new BABYLON.SubMesh(3, 0, verticesCount, 12, 16, viewcube));
viewcube.subMeshes.push(new BABYLON.SubMesh(4, 0, verticesCount, 16, 20, viewcube));
viewcube.subMeshes.push(new BABYLON.SubMesh(5, 0, verticesCount, 20, 24, viewcube));
Could you help me please you. I create the sample on the playground to reproduce what I have done so far.

 

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

 

Thanks for help

How to export a model texture to png or jpg?

$
0
0
Hi.

Can anybody help me?

I have a model exported from blender and until now I can barely move, scale and rotate the texture (with uvScale, uvOffset, uvAng)but what I need to know is how can I do a function to export the modified texture (after moving, scaling and rotating) to jpg or png?

If you know where I can find a live example you'll be my god :)

Thank you all.

displayLoadingUI and container

$
0
0

Hi,
 
Recently, I had a problem with debugLayer and containers (layout) that has been fixed here. but I have the same problem with displayLoadingUI.

 

be able to choose the container for display this LoadingUI like debugLayer I guess.

 

Thank you DK

Rotating the character into the mouse direction

$
0
0

Hello. I am a Babylon.js noob :) and i have been stuck on this problem for quite some time now. Im trying to implement that my character rotates toward the point where my mouse cursor is. I haven't found something like this for Babylon, but i have been trying to copy some of the unity scripts, but was unsucessful. 

I have a 3D ortographic view (camera), and have been trying to do it as it is shown in the code below (something similar works in unity).

document.onmousemove = function(e){
            cursorX = e.pageX;
            cursorY = e.pageY;
            var vector = new BABYLON.Ray.CreateNew(character.position.x,character.position.z,cursorX,cursorY,camera.getWorldMatrix(),camera.getViewMatrix(),camera.getProjectionMatrix());
            character.lookAt(vektor.direction);

  }

My character only rotates at the start for a small value (also in the wrong direction, i only want to rotate the x and y axis) and after that the mouse movement doesn't impact him. If anybody has any kind of tip or a solution to the problem,  I would be very grateful. Cheers :)

Stop mesh without collision

$
0
0

Hi! I'm new to this so this is probably a dumb question.. Been trying to make a game where object moves through labyrinth without going through walls. I implemented collision detection to the point where I'm sure its working but when I tried to move it with .position method there was no collision happening so I ended up using the moveWithCollisions method. This works but once you press the button the object starts moving and doesn't ever stop it just changes direction at another key press. It also increases speed and both of this thing make it very useful to move it through gaps in the walls and navigate it.. So is there a way to control speed and stop mesh before there is a collision/intersection? Or is there a whole different better way to implement movement of that kind? Any advice, opinion and info welcome and thanks so much :) 

 

This is how code for one key press looks like: (sphere is the object we're trying to move - i have yet to import it but at least I know how to do that)

window.addEventListener("keydown", function(evt) {

if (evt.keyCode==87){//forward
                    scene.registerBeforeRender(function () {
                        sphere.computeWorldMatrix(true);
                        //labyrinth.computeWorldMatrix(true);
                        if (!sphere.intersectsMesh(labyrinth, true)) {
                            //sphere.applyImpulse(new BABYLON.Vector3(premikanjeX, 0, premikanjeZ), sphere.position);
                            var forward = new BABYLON.Vector3(parseFloat(Math.sin(parseFloat(sphere.rotation.y))) / 8, 0, parseFloat(Math.cos(parseFloat(sphere.rotation.y))) / 8);
                            sphere.moveWithCollisions(forward);
                        }
                    });
}
}, false);
 
 

Using game map made in Blender this._worl undefined ERROR

$
0
0

Hello! I have a problem with using map made in Blender. Everything is working when I am using a map made out of just one plane with textures. But when I use this one, which consists of different objects and multiple textures, it shows a this._world is undefined error. Everything works just fine when using Sandbox. I really don`t understand what is the problem.

 

 You can access the file here: https://www.dropbox.com/s/6od5tp9ppg06o42/Blender.zip?dl=0

 

 

Attached Thumbnails

  • map12.jpg

Multiple shadow generators

$
0
0

I currently have a terrain that should cast shadows and receive them from itself. I need to use a shadowGenerator for it which doesn't use variance shadow map. I have a very high bias for this, as otherwise the shadow looks horrible. 

 

The problem is that I also want objects where you do use variance shadow map with a low bias. I thought you could just create a new shadow generator and then use that, however it seems that the last shadow generator which I've declared gets used and the other doesn't. This means that or the terrain can't cast shadows to itself, or the objects can't cast shadows.

 

Playground link: http://babylonjs-playground.azurewebsites.net/#1IP45

Make Gif Animation With Shader and one texture

Grouping - parent child relationship

$
0
0

Hello,

 

I have a problem regarding the parent - child relationship. I have imported a 3d object from blender and I would like to bind it to an invisible mesh (box) so it would move. It doesn't work no matter which way I try it. Here's the code:

 

var monster;

var parentMonster = BABYLON.Mesh.CreateBox("p", 3, scene);
 
            BABYLON.SceneLoader.ImportMesh("", "assets/", "monster1.babylon", scene, function (newMeshes1) {
                monster= new BABYLON.StandardMaterial("assets/", scene);
                monster.diffuseTexture = new BABYLON.Texture("assets/monsterlayer1.bmp", scene);
                monster.diffuseTexture.uScale = 1;
                monster.diffuseTexture.vScale = 1;
 
                for(var i = 0; i < newMeshes1.length; i++) {
                    newMeshes1[i].isVisible = true;
                    newMeshes1[i].checkCollisions = true;
                    newMeshes1[i].scaling = new BABYLON.Vector3(1, 0.3, 1);
                    newMeshes1[i].position = new BABYLON.Vector3(30, -8, 2);
                    newMeshes1[i].material = posast;
                } 
            });
            monster.parent = parentMonster;
 
            parentMonster.position = new BABYLON.Vector3(30, -8, 2);
            parentMonster.isVisible = false;
 
Please help, I'm desperate.
Thank you.

Mesh part smooth part flat shading

$
0
0

Hi!

 

I'm trying to figure out how to set part of the mesh shading as smooth and part of it as flat.

 

A quick sample on an image bellow rendered with Blender (from left to right):

  • Mesh with smooth shading
  • Mesh with flat shading
  • Mesh with mixed shading (achieved with edge split modifier)

Ideally shading type could be set per vertex group or per material.

Attached Thumbnails

  • flathsmooth.png

IE browser in HD4000 GPU

$
0
0

Hi all.

 

I found that the babylonjs website demo run in IE 11 with intel HD4000 GPU. The default background would  flash all the time.

 

Maybe this is IE's problem. Because there are no this issue in Chrome and Firefox.

 

Just curious to know how this happen.

Syntax for playing and pausing video textures

$
0
0

Hello,

 

Sorry I've been out for a month - I doubt anyone missed me.  :(  I had to travel to Thailand (my Wife is Thai) for personal family issues which will take me back to Thailand on the 24th.  So I had to put my multiuser real time drawing app on hold.  But now I want to complete the first version in the next week, and am really stuck on something today.

 

I have buttons that send the correct values to my conditional statements, but I don't know what the operation or proper syntax is to play and pause a video texture within my conditions.  I must be missing something as this doesn't seem that difficult.

 

I can certainly get these statements to cause a play or pause operation:

videoTexture.video.play();

videoTexture.video.pause();

but only once in my scene and not in a conditional statement.

 

 

I assume I must be missing further declaration - potentially for the object the video is playing attached as a diffuse video texture. Perhaps something similar to:

scene.getMeshById("mymesh").visibility = 0;

to set visibility and other attibutes for an object.

 

I often use for a simple switch:

plane.actionManager = new BABYLON.ActionManager(scene);
plane.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function () {
videoTexture.video.pause();
}));

but certainly remark this out as in this case it might cause a conflict with my conditions.  So how might I pause and play a video texture in a conditional statement?

 

As always, your help is greatly appriciated.

 

Cheers,

 

DB

 

 

 

 


BJB doesn't have Sprite(HUD) like Three.js

$
0
0

I want to add name label to character in the 3d scene.

 

the label should always orient to the camera and not cover by other object.

 

how can i make it ?

Virtual Joystick's canvas cover the renderCanvas and scene can't listener mouseEvent

$
0
0

Virtual Joystick's canvas cover the renderCanvas and scene can't listener mouseEvent...

 

also the GUI button can't use.

 

 

I want to add a virtual joystick to my game and control the character move. 

commit erased

Using dynamic texture on imported mesh

$
0
0

Dear All,

 

Below is the code listing to try out the dynamic texture on imported mesh, but kind of fail on the "targetMesh".

It only works when I'm using Plane mesh "newPlane" produced from the code using BABYLON.Mesh.CreatePlane.

Am I missing something here?

BABYLON.SceneLoader.Load("", "plane.babylon", engine, function (newScene) {

        newScene.executeWhenReady(function () {

            var canvas = engine.getRenderingCanvas();

            //newScene.activeCamera.attachControl(canvas);

            // This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -125), newScene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);
            newScene.activeCamera = camera;

            //now here I want to select some meshes from the active scene

            var targetMesh = newScene.getMeshByName('plane');

            if(targetMesh) {

                // debugger;

                // Create new standard material
                var stdMat = new BABYLON.StandardMaterial('Material', newScene);
                stdMat.alpha = 1;
                stdMat.backFaceCulling = true;
                stdMat.specularPower = 64;
                stdMat.useSpecularOverAlpha = true;
                stdMat.useAlphaFromDiffuseTexture = false;

                // emissive definitions;
                stdMat.emissiveColor = new BABYLON.Color3(0.00, 0.00, 0.00);
                // ambient definitions;
                stdMat.ambientColor = new BABYLON.Color3(0.00, 0.00, 0.00);
                // specular definitions;
                stdMat.specularColor = new BABYLON.Color3(1.00, 1.00, 1.00);

                var dynTexture = new BABYLON.DynamicTexture("Dynamic texture", 1024, newScene, true);
                dynTexture.uScale = 1;
                dynTexture.vScale = 1;
                dynTexture.coordinatesMode = 0;
                dynTexture.uOffset = 0;
                dynTexture.vOffset = 0;
                dynTexture.uAng = 0;
                dynTexture.vAng = 0;
                dynTexture.level = 1;
                dynTexture.coordinatesIndex = 0;
                dynTexture.hasAlpha = false;
                dynTexture.getAlphaFromRGB = false;

                // set stdMat diffuse texture
                stdMat.diffuseTexture = dynTexture;

                // draw text
                dynTexture.drawText("Eternalcoding", null, 100, "70px Segoe UI", "red", "#555555");

                // set sub mesh material
                targetMesh.material = stdMat;

                // calculate mesh size
                var vectorsWorld = targetMesh.getBoundingInfo().boundingBox.vectorsWorld;
                var size = vectorsWorld[1].subtract(vectorsWorld[0]).length(); // distance between summit 0 and summit 1

                // New Plane
                var newPlane = BABYLON.Mesh.CreatePlane("New Plane", size, newScene, false);
                newPlane.scale = 0.5;
                newPlane.position.z = targetMesh.position.z;
                newPlane.position.y = targetMesh.position.y;
                newPlane.position.x = targetMesh.position.x+(size/2);

                // newPlane.parent = targetMesh;
                // set sub mesh material
                newPlane.material = stdMat;

                stdMat.diffuseTexture.update();
            }

            engine.runRenderLoop(function() {
                newScene.render();
            });

        });
});

Here is the "plane.babylon"

{"autoClear":true,"clearColor":[0.0,0.0,0.0],"ambientColor":[0.0,0.0,0.0],"fogMode":0,"fogColor":null,"fogStart":0.0,"fogEnd":0.0,"fogDensity":0.0,"gravity":[0.0,0.0,0.0],"cameras":[{"name":"Camera001","id":"a713edbb-dbb0-4077-a018-06a07e8fb30c","parentId":null,"lockedTargetId":"5523fadc-396d-4b51-b859-4b9df68f56dd","type":"FreeCamera","position":[-202.8126,116.4834,-271.5265],"rotation":[0.0,0.0,0.0],"target":null,"fov":0.6024,"minZ":0.1,"maxZ":10000.0,"speed":1.0,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.0,0.0,0.0],"autoAnimate":false,"autoAnimateFrom":0,"autoAnimateTo":0,"autoAnimateLoop":false,"animations":[]}],"activeCameraID":"a713edbb-dbb0-4077-a018-06a07e8fb30c","lights":[{"name":"Default light","id":"2baddbc0-0c64-46ee-89ac-aa01cd23c503","parentId":null,"position":null,"direction":[0.0,1.0,0.0],"type":3,"diffuse":[1.0,1.0,1.0],"specular":[1.0,1.0,1.0],"intensity":1.0,"range":3.40282347E+38,"exponent":0.0,"angle":0.0,"groundColor":[0.0,0.0,0.0],"excludedMeshesIds":null,"includedOnlyMeshesIds":null,"autoAnimate":false,"autoAnimateFrom":0,"autoAnimateTo":0,"autoAnimateLoop":false,"animations":null}],"meshes":[{"id":"a2652875-3a25-4d9c-97ab-1d7d038c5f8e","parentId":null,"materialId":null,"isEnabled":true,"isVisible":true,"pickable":false,"pivotMatrix":null,"positions":[-56.0677,0.0,-45.6579,56.0677,0.0,-45.6579,56.0677,0.0,45.6579,56.0677,0.0,45.6579,-56.0677,0.0,45.6579,-56.0677,0.0,-45.6579],"normals":[0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0],"uvs":[0.0,1.0,1.0,1.0,1.0,2.0,1.0,2.0,0.0,2.0,0.0,1.0],"uvs2":null,"colors":null,"hasVertexAlpha":false,"matricesIndices":null,"matricesWeights":null,"indices":[0,1,2,3,4,5],"checkCollisions":false,"receiveShadows":true,"infiniteDistance":false,"billboardMode":0,"visibility":1.0,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":6,"indexStart":0,"indexCount":6}],"instances":[],"skeletonId":-1,"showBoundingBox":false,"showSubMeshesBoundingBox":false,"applyFog":true,"alphaIndex":1000,"physicsImpostor":0,"physicsMass":0.0,"physicsFriction":0.0,"physicsRestitution":0.0,"name":"plane","position":[0.0,0.0,0.0],"rotation":[-1.5708,0.0,0.0],"scaling":[1.0,1.0,1.0],"rotationQuaternion":null,"actions":null,"animations":[],"autoAnimate":true,"autoAnimateFrom":0,"autoAnimateTo":100,"autoAnimateLoop":true},{"id":"5523fadc-396d-4b51-b859-4b9df68f56dd","parentId":null,"materialId":null,"isEnabled":true,"isVisible":true,"pickable":false,"pivotMatrix":null,"positions":null,"normals":null,"uvs":null,"uvs2":null,"colors":null,"hasVertexAlpha":false,"matricesIndices":null,"matricesWeights":null,"indices":null,"checkCollisions":false,"receiveShadows":true,"infiniteDistance":false,"billboardMode":0,"visibility":1.0,"subMeshes":null,"instances":[],"skeletonId":-1,"showBoundingBox":false,"showSubMeshesBoundingBox":false,"applyFog":true,"alphaIndex":1000,"physicsImpostor":0,"physicsMass":0.0,"physicsFriction":0.0,"physicsRestitution":0.0,"name":"Camera001.Target","position":[-3.9516,-2.5059,23.297],"rotation":[-1.2479,0.5934,0.0],"scaling":[1.0,1.0,1.0],"rotationQuaternion":null,"actions":null,"animations":[],"autoAnimate":true,"autoAnimateFrom":0,"autoAnimateTo":100,"autoAnimateLoop":true}],"sounds":[],"materials":[],"multiMaterials":[],"particleSystems":null,"lensFlareSystems":null,"shadowGenerators":[],"skeletons":[],"actions":null}

Disposing objects

$
0
0

Hello,

 

I have a problem with disposing objects. I generate multiple objects in my game and cannot seem to dispose them.

Is there any way to destroy the objects? I also tried the dispose() method but it didn't quite work.

 

Thank you!

Viewing all 388 articles
Browse latest View live


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