Jump to content

Beginner questions


²Digitalgames
 Share

Recommended Posts

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 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

<!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

post-17361-0-37212300-1448210754.jpg

post-17361-0-72534400-1448210754.jpg

post-17361-0-93803900-1448211492.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

post-17361-0-67044000-1448212852_thumb.j

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by ²Digitalgames
Link to comment
Share on other sites

  • 1 month later...

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...