Beginner questions

[²Digitalgames]

Hello, i am totally new to the Babylon.js scripting framework. 

 

My first question is, how can i change the value of alpha for an material on klick event.

 

samplematerial.alpha = 0.3; seems to be a float , however, there is also new BABYLON.Color3 and new BABYLON.Color4 which can be changed on actionmanager code.

Color3 is RGB and Color4 is RGB Alpha. 

 

So how can i change the alpha value ? Should i use color4 ? 

 

Here is what i have so far :

 

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

 

Also, i can´t figure out which of this code seqments do what or how they are named like. Like this things that are inside "example".

I have to begin somewhere so i hope my first question isn´t that bad.

 

Greetings and thanks in Advance 

[JohnK]

Welcome    ²Digitalgames you will find everyone very friendly and helpful here.

 

Just a couple of minor errors in your code.

 

Line 7 - too early to set actionmanager on sphere - sphere not yet defined.

 

Line 40 - bracket after "alpha" should be after 1

 

Corrected http://www.babylonjs-playground.com/#1ST0I#2

 

Also, i can´t figure out which of this code seqments do what or how they are named like.

 

 

Not sure what you you want to know about which code segements.  Give one and ask about what it does.

[²Digitalgames]

Hello, thank you JohnK for your fast response and help. 

 

Usually iam scripting with another engine with visual nodes. Iam more an technical artist and not very good in in depth programming. Iam new to the rules of java scripting and the babylon.js framework. 

I want to understand more of the rules and how to do or not to do something.

 

"Line 7 - too early to set actionmanager on sphere - sphere not yet defined."

Ah yes i wasn´t sure about that. Hm. I can´t understand why nothing happens if i click on the sphere. 

 

sphere.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnRightPickTrigger, sphere.material, "alpha", 1));

 

SetValueAction(trigger, target, propertyPath, value, condition), so trigger is OnRightPickTrigger, target is sphere.material 

 

Iam unsure if "alpha" is the right propertyPath, and what does condtition do ?

 

Greetings, thanks in advance.

 

Oh i totally have right-left disorientation, its working for now and i have to play around with it. Thanks and see you

[²Digitalgames]

Sorry for doublepost,

 

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

 

Okay, now i need to click twice on the mapmarker- but i want to activate new BABYLON.SetValueAction in the next line with the previous action. Iam searching around meanwhile but i haven´t sighted something like this for now.

Actually, it is quite difficult for me for now, because i have to make this event chain:

 

Mouse over mapmaker, color change - on click set visibility for the map marker to 0 and make the secret box material transparent, so it reveals the hidden box.

After that, a click anywhere would change all back to the original state. Guess i have to learn states/conditions. 

[RaananW]

Hi and welcome :-)

 

You can register as many actions as you want. So doing something like this - 

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

will work as you wanted.

[gryff]

Hi DG and welcome. Try this digital I marked the changes

SingleClick

The

.then 

Is for using click sequences.

You can also combine actions :

Combine Actions

See Vousk-prod's post.

cheers, gryff

[²Digitalgames]

Wohow, crazy. Thank you, that is very kind of you!

 

I will work further on that tomorrow. See you

[²Digitalgames]

Hello again. There is one last thing i can not solve for now. I need to have text that is not checked against depth or scene objects so its always infront of everything. I found this http://www.html5gamedevs.com/topic/9297-sprites-rollover/

and tested this :

http://playground.babylonjs.com/#1NNYYR

The plane is now invisible which could be due to the fact its not pointing towards the camera the right way or it isn´t rendered at all. Text is the last thing i need to know, other things are working as expected.

Thanks in Advance

Edit: 

This seems to be the easiest Idea 

http://playground.babylonjs.com/#3HQSB#4

found here http://www.html5gamedevs.com/topic/18636-bjb-doesnt-have-spritehud-like-threejs/#entry105753

Iam pretty surprised this is asked often even if the question is slightly different everytime. Rendering Group is a really powerful thing !

[GameMonetize]

renderingGroupId is the right tool for you here:)

[²Digitalgames]

Hello again. I am just a day before my project time limit ends. I am testing on Wamp server, but there is something i can´t understand. I followed this tutorial http://pixelcodr.com/tutos/toad_attack/toad_attack.html

 

He seems to use the sceneInit.js instead of writing the code directly into the html file. But that doesn´t seem to work i only geht a blank white page. If i use a index.html from the Playground however, it renders

without any problem. But from what i can guess, it would not be good to have a lot of code directly written into the .html file or does it ? I don´t know. 

I would prefere to load an external js script . What do i need to to do ?

[JCPalmer]

Just a complete guess, based on the fact that the tutorial actually wrote to js/initScene.js, not sceneInit.js.

 

Are you actually specifying a <script> tag that matches the .js file you are loading, & in the right directory?  Bring up you browser console.  It should have a tab that lists the loaded script files.  Is your .js showing?  It also will show error messages somewhere on your console.

 

What you need to do is start using browser console.  There is absolutely nothing exotic about putting your code in a separate file.

[²Digitalgames]

<!DOCTYPE html><head>	<link rel="stylesheet" type="text/css" href="css/style.css" />	<script src="js/babylon.2.2.js"></script>	<script src="js/initScene.js"></script></head><body>	<canvas id="renderCanvas"></canvas></body></html>

var canvas = document.getElementById("renderCanvas");      var engine = new BABYLON.Engine(canvas, true);      var createScene = function () {          var scene = new BABYLON.Scene(engine);          //Adding a light          var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);          //Adding an Arc Rotate Camera          var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);          camera.attachControl(canvas, false);          // The first parameter can be used to specify which mesh to import. Here we import all meshes          BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {              // Set the target of the camera to the first imported mesh              camera.target = newMeshes[0];          });          // Move the light with the camera          scene.registerBeforeRender(function () {              light.position = camera.position;          });          return scene;      }      var scene = createScene();      engine.runRenderLoop(function () {          scene.render();});      // Resize      window.addEventListener("resize", function () {          engine.resize();});

Thats my current test set up. 

 

I have attached the log from Chrome- , the scripts are inside /js

[JCPalmer]

Good,  now there is some data.  You show an "Uncaught Error: WebGL not supported in babylon.2.2.js line 6: ".

 

Might not seem like progress, but it is.  You cannot fix what you do not know.  I never use Chrome, so I cannot advise except for this.  Search forum for "Chrome WebGL", and try a different browser to see what happens.

[²Digitalgames]

Shouldn´t be a problem since that only happens if i load from an external .js. It works if i write the code directly into the index.html. Don´t know why that happens. Chrome never had problems with webgl.

Strange however. From what i understand is that the initScene.js does the same as writing code into the <canvas id="renderCanvas"></canvas>

<canvas id="renderCanvas"></canvas>    <script>        var canvas = document.getElementById("renderCanvas");        var engine = new BABYLON.Engine(canvas, true);        var createScene = function () {            var scene = new BABYLON.Scene(engine);                    //Adding a light            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);                    //Adding an Arc Rotate Camera            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);            camera.attachControl(canvas, false);                    // The first parameter can be used to specify which mesh to import. Here we import all meshes            BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {                // Set the target of the camera to the first imported mesh                camera.target = newMeshes[0];            });                    // Move the light with the camera            scene.registerBeforeRender(function () {                light.position = camera.position;            });                    return scene;        }                var scene = createScene();        engine.runRenderLoop(function () {            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });    </script>

[MarianG]

Hi. 

You need to put this line

<script src="js/initScene.js"></script>

in  html. in body, not in header, because 

 

this line 

 var canvas = document.getElementById("renderCanvas");

will return an error, and 

this line 

var engine = new BABYLON.Engine(canvas, true);

will return webgl error, because canvas it's undefined. 

[jerome]

A good practice is to wait that everything is loaded before starting the execution of the js code.

So just set this somewhere in your html file for instance :

<script>window.onload = myMainFunction</script>;

and then put all your code in myMainFunction() wherever you want it to be located (main page or external file)

 

The function myMainFunction() will be triggered only after every resource of the html page is loaded. Thus you are sure that BJS is loaded, as well as all your own external files.

[²Digitalgames]

Thank you bulisor and jerome. 

 

This is such a great forum. I hope this was the last thing i stumbled upon. If someone needs art assets in return, i can build them with Blender. 

 

See you

[²Digitalgames]

Hello again, 

 

i did not reach the time limit. I got stuck on how to change materials from loaded .babylon jsons. I also had no idea how i can search on that topic. I don´t know if this is called referenzing, or getting vars.

 

 

Except that problem, .babylon scenes can be so filled up with vertex data, its hard to find importand stuff between all this data. 

 

Here take a look, i searched for meshes inside the skull.babylon. The mesh seems to be called test. But i can´t replace the material for this skull :

 

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

[MarianG]

Hi.

Your variable "test" is undefined, so you have to define it as global, or change skull material inside the ImportMesh function 

like here

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

[²Digitalgames]

Thanks bulisor, but i still feel like iam stupid. I have tried to find answers on that next thing but no matter how hard i try i can´t find the specific answer. Its god damn hard for me to keep going.

 

Next problem ahead, i just want to make that previous action script to change the alpha from the material. 

The Skull does not loose its texture, however, my textures gets lost. 

  // Loading Babylon Scene, set up all actions here !            BABYLON.SceneLoader.ImportMesh("", "scenes/", "Cube_1.babylon", scene, function (newMeshes) {              var Vwerk_1 = newMeshes[0];              var samplematerial = new BABYLON.StandardMaterial("texture1", scene);  		        samplematerial.alpha = 0.5;              Vwerk_1.material = samplematerial;              //Create an Action Manager              Vwerk_1.actionManager = new BABYLON.ActionManager(scene)  	          //Register an action for the sphere (how to ?)  	          Vwerk_1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnLeftPickTrigger, Vwerk_1.material, "alpha", 0.5))  	          .then(new BABYLON.SetValueAction(BABYLON.ActionManager.NothingTrigger, Vwerk_1.material, "alpha", 1))            });

So my guess is that i have to read the Materials from the Mesh and save it inside a var. This var holds the new materials and can be changed with actions without the loss of textures. But i haven´t found a very specifig topic on that, this is what i found and isn´t that what i would have expected :

http://www.html5gamedevs.com/topic/13777-problem-to-apply-diffuse-color-to-imported-mesh/

 

Okay, i don´t know what caused this problem, but i had to full restart the Computer. This is what worked :

 

var canvas = document.getElementById("renderCanvas");

        var engine = new BABYLON.Engine(canvas, true);

 

        var createScene = function () {

            var scene = new BABYLON.Scene(engine);

 

            //Adding a light

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

 

            //Create a Material for the cube

         var samplematerial = new BABYLON.StandardMaterial("texture1", scene);

         samplematerial.alpha = 0.5;

 

            //Adding an Arc Rotate Camera

            var camera = new BABYLON.ArcRotateCamera("Camera", 90, 0.8, 10, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, false);

 

            // Loading Babylon Scene, set up all actions here !

            BABYLON.SceneLoader.ImportMesh("", "scenes/", "Cube_1.babylon", scene, function (newMeshes) {

 

              var Vwerk_1 = newMeshes[0];

         Vwerk_1.material.alpha = 0.3;

 

              //Create an Action Manager

              newMeshes[0].actionManager = new BABYLON.ActionManager(scene)

 

           //Register an action for the sphere (how to ?)

           newMeshes[0].actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnLeftPickTrigger, Vwerk_1.material, "alpha", 0.5))

           .then(new BABYLON.SetValueAction(BABYLON.ActionManager.NothingTrigger, Vwerk_1.material, "alpha", 1))

 

 

 

            });

 

 

 

            // The first parameter can be used to specify which mesh to import. Here we import all meshes

            //BABYLON.SceneLoader.ImportMesh("", "scenes/", "Cube_2.babylon", scene, function (newMeshes) {

            //});

 

 

            return scene;

        }

Edited November 27, 2015 by ²Digitalgames

[²Digitalgames]

Hi, is it possible to ignore OnPointerOverTrigger on objects that have no collision ? I want to pick an object inside onother object over hover. 

 

mesh.renderingGroupId = 1; renders the mesh in front of another object which is what i want but it acts like its still inside the object and hidden.

 

I thought that OnPointerOverTrigger would understand that meshes with a higher renderGroupId would be also infront of objects for OnPointerOverTrigger.

How can i fix that ?

[GameMonetize]

Hello

here is the predicate used to pick meshes:

https://github.com/BabylonJS/Babylon.js/blob/6b2dc170a722e63419b074aef4d3f43382b6d83c/src/babylon.scene.js#L328

[²Digitalgames]

Hm. Wasn´t quite the direct answer but i might have found what you wanted me to find inside the code deltakosh. Thank you

 

http://www.babylonjs-playground.com/#1ST0I#7

 

so i could set all meshes that are not pickable to mesh.isPickable = false; and all pickable meshes to mesh.isPickable = true; ?

It quite seems like it. I am unsure because my previous test inside my .js code did not work as it does here. Its quite interesting that it works here.

 

Hm. Anyway, it was interesting and actually much fun to dig this out.

[GameMonetize]

This is why I wanted Babylon.js to be open source To allow everyone to check by themselves

[²Digitalgames]

Hi, how do i use http://doc.babylonjs.com/classes/2.1/OutlineRenderer this ? What i want to archieve this time, an outline effect on an hidden mesh. Searched the Playground and the Source. I also found the shader stuff for the Outline effect. 

But for now what i understand is that the http://doc.babylonjs.com/classes/2.1/OutlineRenderer might be what i wanted but without an example i can´t figure out how i do it. Perhaps i am all wrong and it has nothing to do with the outline shader (there is an outliner in blender that has nothing to do with outlining meshes visually).