Search the Community
Showing results for tags 'visibility'.
Found 19 results
-
Need some help. I try to find what I am missing hear for days. But I don't get it.. Maybe someone of you can point me in the right direction. A moving sprite, that is followed by the camera, disappears on "certain" areas. For example in one scene: it disappears in the upper left and most left areas of the scene. In some others on all areas around the borders of the world. - Tilemaps and every other object are still visible. 1. The moving sprite does not involve any alpha 0 / 1 settings 2. The moving sprite does not die/destroy 3. The moving sprite does not set any kind of BlendMode 4. The moving sprite does not set any visibility 5. There are NO overlays that could cover up the moving sprite 6. Worldbounds and main cameras bounds are set (code below) this.physics.world.setBounds(0, 0, this.map.widthInPixels * SCALE, this.map.heightInPixels * SCALE, true, true, true, true); this.cameras.main.setBounds(0, 0, this.map.widthInPixels * SCALE, this.map.heightInPixels * SCALE); I also tested adding a second camera, it is the same behavior, but here I can see, any time the moving sprite disappears, the camera background is set to a different color... and I don't know why this is happening. The game's code is too much to post it all. But basically, the only thing with bounds that is set, are the two lines, I posted here. At this time it is quite confusing and I already spend days investigating in it. I got no clue, why this is happening. Any hint is highly appreciated! cheers -
hey guys, new to Babylon and i'm trying to figure out is there an easy function to disable rendering of any vertices not visible to the camera as well as to do flat shading? e.g. this scene in blender becomes very bizzare, i tried to do it with basic materials and just set it to shadeless but it renders it with shadow and for some reason it subdivide smooths all the polygons. I'm not sure why. Then when I disabled the fills and enabled rendering outlines it renders the backfaced ones. I tried to disable backface culling but it made no effect. so in short is there a way to render items as flat colours ignoring light data(or using it as a simple second colour e.g. toon shading) and is there a way to only render only what's visible to the camera ignoring back sides? Thanks so much for any useful info in advance <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test1</title> <style media="screen"> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="js/babylon.js"></script> <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> <script src="js/cannon.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); //prevents the error when looking for manifest file engine.enableOfflineSupport = false; BABYLON.SceneLoader.Load("", "testScene.babylon", engine, function (newScene) { // Wait for textures and shaders to be ready newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); console.log(newScene.meshes) var sceneObjects = []; var sceneMaterial = new BABYLON.StandardMaterial("trans", newScene); sceneMaterial.alpha = 0.3; sceneMaterial.backFaceCulling = true; for(var i=0;i<newScene.meshes.length;i++){ sceneObjects.push(newScene.meshes[i]); //newScene.meshes[i].convertToFlatShadedMesh() newScene.meshes[i].material = sceneMaterial; newScene.meshes[i].enableEdgesRendering(.9999); newScene.meshes[i].edgesWidth = 4.0; newScene.meshes[i].edgesColor = new BABYLON.Color4(0, 0, 1, 1); } engine.runRenderLoop(function() { newScene.render(); }); }); }, function (progress) { }); window.addEventListener("resize", function () { engine.resize(); }); } </script> </body> </html> testScene.babylon
-
Hi, When the browser tab is out of focus, the game will pause, we all know that default setting. But is there a way to detect whenever it happen? I have my own countdown timer and when the game is paused this way, my timer still works so I need to detect it's status to pause my timer as well. Thanks, Jody
-
Is it possible to pick hidden objects in a scene? If so, how is this achieved? Thanks in advance
-
heya https://www.babylonjs-playground.com/#1DN6LQ#1 Line 25 seems DOA in latest. thx update: I just noticed that partial .visibility DOES work... when there is a .material on the mesh. Not sure if that matters... just passing it along.
-
Hello! I'm importing an obj model, and I want to tweak the visibility of it, or just dispose it when I click a button... var loader = new BABYLON.AssetsManager(scene); var leg = loader.addMeshTask("leg", "", "", "leg.obj"); BABYLON.SceneLoader.ImportMesh("", "", "leg.obj", scene, function (newMesh) { BABYLON.SceneLoader.Load("", "leg.obj", engine, function (newScene) { }); }); $('#quadril_bt').click(function () { //........ something to dispose the mesh, or make it invisible }); Can't seem to find a way to do it!
-
Hello, We are making a game with Phaser and works perfect in all the browsers except in Safari (iPad). It's pretty strange becouse the game seems to be running becouse we can hear the music, but the canvas is not displayed... Few seconds later the game is destroyed... We can't use the remote debugging becouse we don't have any Mac to conect the IPad... (Phaser Version: 2.6.2 / IOS version: 9.3.2) Please help!! Thank you
-
Hello, I'm not sure what I'm doing wrong but I can't get bgui to show up in my scene. I'm creating it within the createScene() function. I've tried different variations of the code below, carefully following examples and documentation to no avail. I know my texture is loading in fine, I tested it on a plane. I noticed that bgui is creating a separate camera to display objects, maybe that's off? Any direction is much appreciated. gui = new bGUI.GUISystem(scene, window.innerWidth, window.innerHeight); gui.updateCamera(); gui.enableClick(); var head = new bGUI.GUIPanel("head", face, null, gui); head.position(new BABYLON.Vector3(5,5,0)); head.setVisible(true);
-
Is there a way to set the visibility of a mesh to false and have all of it's child meshes be affected as well? I'm setting the children using .parent = parentMesh. Currently it seems that the only way is to loop through all of the children manually. The major problem with this approach is when you have children of children of children. Here is a PG to demonstrate. Uncomment the comment block. http://www.babylonjs-playground.com/#17IGZF#0 var materialSphere = new BABYLON.StandardMaterial("texture2", scene); materialSphere.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red materialSphere.alpha = 0.2; // grand parent var grandParent = BABYLON.Mesh.CreateSphere("sphere1", 16, 3, scene); grandParent.material = materialSphere; // parent var parent = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); parent.material = materialSphere; parent.parent = grandParent; // child var child = BABYLON.Mesh.CreateSphere("sphere1", 16, 1, scene); child.material = materialSphere; child.parent = parent; // uncomment block below to hide the grandParent and its children /* grandParent.visibility = false; // grandParent.getChildren().forEach(function(_child) { _child.visibility = false; }, this); */ // although children's children are not effected
-
Linesmesh does not seem to have semitransparant option. It is shown or it is invisible. (LinesMesh.visibility = 0.5 has no effect). I have unsucessfully with animated visibility nor with material.alpha. Animation itself works. How do I make it smooth fade from visible to invisible ?
-
disappearing geometry near the edge of scene window
DezOnlyOne posted a topic in Questions & Answers
I have a scene that has a virtual patient. I am using a free camera in the scene, and I am having an issue where the right side edge of the scene window is close to the patient, the head and the entire body goes invisible. I attached some images to illustrate, but is this an issue where the camera frustum edge is making geometry invisible? Is there a way to make adjustments to it so that I am not clipping my virtual patient? headOn.png - shows how the patient is normally headOff.png - what happens when the patient is near the edge of the window. He will disappear completely if he is closer. Thanks in advance -
Hello, I'm using a ActionManager.OnPickUpTrigger to trigger a translation of an object. It works well, and was surprisingly easy to setup. But I have a problem : actions are triggered even if the object is hidden behind another one. You can check it on this babylon playground : http://www.babylonjs.com/playground/?17 If you click on a target through the moving torus, the target is picked and triggered anyway, as if it was visible. Is it the correct behaviour ? Should I use a more traditionnal picking code instead ? -
I have a problem that's sort of hard to describe. To try and sum it up, setting the visibility of a DOC to false and then updating the position of the non-visible DOC, when setting the DOC back to visible, the DOC isn't where it's supposed to be. See? sorry... it's hard to explain I have a page set up as an example. EDIT: And HERE is a jsfiddle to mess with (but using black squares instead of actual images because of cross-domain problems) The code is very messy, but this is more of a "proof of concept" test page to work out some ideas to implement on the main project. Let me try to explain the goal of what I'm doing: I took a large image and separated it out into multiple smaller images. I've then "stitched" them together as sprites on a DOC. I've then taken the same large image, made it half sized, and then split it up into the same sized "tiles" as the previous, and then placed those tiles on a second DOC. Once more with a 3rd iteration, making the image 1/4 of the original size. On mouse wheel, all three DOCs scale in and out and click-dragging pans all 3 DOCs around. (there's also some culling going on for tiles that get placed outside of the canvas bounds). At a certain zoom level, I hide one DOC and show another (the corresponding "zoom-levels", think Google Earth) All of this works beautifully. Except when I scale in and out AFTER panning the DOCs around. What's weird is that when panning, the position is getting updated and that's pretty much it. When scaling, the position is ALSO updated. If I don't set the visibility to false on either 3 DOCs, they never shift in their positioning. You can pan them and scale them and they'll never "jump". Once you start setting the visibility to "none" and then pan them around, when it gets set back to visible=true, its position is off. Like something doesn't get updated properly when the visible is set to false. BTW, sorry for the crazy image I'm demoing with. It's just a placholder instead of the actual game's image, but it get's the point across Here's the code for what's going on in the link listed above Again, sorry for how disheveled the code is, it's me playing with ideas and learning how to do them for later on in a projects dev. You can safely ignore the big blob of code at the top, It should be a link to another js file (The bunny examples stats.js) but instead I just copied the lines directly into the page. <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="<?php echo base_url()."js/pixi/bin/pixi.js"; ?>"></script> <script src="<?php echo base_url()."js/jquery.mousewheel.min.js"; ?>"></script> </head> <body> <script> $(document).ready(onReady);var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function({b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div");k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function({s=b;switch(s){case 0:a.style.display="block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height=a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};var islandSprites = [];var scale = 1;function onReady(){ renderer = new PIXI.autoDetectRenderer(1920, 1080, {transparent:true}); stage = new PIXI.Stage(0xFFFFFF); $('canvas').attr('id','canvas'); $('body').on('mousewheel','canvas', function(event) { event.preventDefault(); var evt = event.originalEvent; var currentMouseX = evt.pageX - $(this).offset().left; var currentMouseY = evt.pageY - $(this).offset().top; scaleFactor = 1.1; var zoom = (scaleFactor - (evt.wheelDelta < 0 ? 0.2 : 0)); var newScale = scale * zoom; var newScale2 = (scale * zoom) * 2; var newScale3 = (scale * zoom) * 4; var origin = map1.position; origin.x = currentMouseX - (currentMouseX - origin.x) * zoom; origin.y = currentMouseY - (currentMouseY - origin.y) * zoom; map1.position = new PIXI.Point(origin.x, origin.y); var origin2 = map2.position; origin2.x = currentMouseX - (currentMouseX - origin2.x) * zoom; origin2.y = currentMouseY - (currentMouseY - origin2.y) * zoom; map2.position = new PIXI.Point(origin2.x, origin2.y); var origin3 = map3.position; origin3.x = currentMouseX - (currentMouseX - origin3.x) * zoom; origin3.y = currentMouseY - (currentMouseY - origin3.y) * zoom; map3.position = new PIXI.Point(origin3.x, origin3.y); map1.scale.x = newScale; map1.scale.y = newScale; map2.scale.x = newScale2; map2.scale.y = newScale2; map3.scale.x = newScale3; map3.scale.y = newScale3; if(newScale > .5){ map1.visible = true; map2.visible = false; map3.visible = false; } if(newScale <= .5 && newScale > .25){ map1.visible = false; map2.visible = true; map3.visible = false; } if(newScale <= .25){ map1.visible = false; map2.visible = false; map3.visible = true; } scale *= zoom; }); renderer.view.style["transform"] = "translatez(0)"; document.body.appendChild(renderer.view); renderer.view.style.position = "absolute"; stats = new Stats(); document.body.appendChild( stats.domElement ); stats.domElement.style.position = "absolute"; stats.domElement.style.top = "0px"; requestAnimFrame(update); map1 = new PIXI.DisplayObjectContainer(); map2 = new PIXI.DisplayObjectContainer(); map3 = new PIXI.DisplayObjectContainer(); map2.scale.x = 2; map2.scale.y = 2; map3.scale.x = 4; map3.scale.y = 4; map2.visible = false; map3.visible = false; stage.addChild(map1); stage.addChild(map2); stage.addChild(map3); var map1Count1 = 0; var map1Count2 = 0; for (var i = 0; i <= 47; i++){ createIslandTile((i+1), 512*map1Count1, 512*map1Count2, map1, '../images/ui/lush/test-map/images/test-map_'); if(map1Count1 < 7){ map1Count1++; }else{ map1Count1=0; map1Count2++; if(map1Count2 > 5){ map1Count2=0; } } } map1.addChild(new PIXI.Text("MAP1", { font: "20pt monospace", fill: "gray" })); var map2Count1 = 0; var map2Count2 = 0; for (var i = 0; i <= 11; i++){ createIslandTile((i+1), 512*map2Count1, 512*map2Count2, map2, '../images/ui/lush/test-map/images-half/test-map_'); if(map2Count1 < 3){ map2Count1++; }else{ map2Count1=0; map2Count2++; if(map2Count2 > 2){ map2Count2=0; } } } map2.addChild(new PIXI.Text("MAP2", { font: "20pt monospace", fill: "gray" })); var map3Count1 = 0; var map3Count2 = 0; for (var i = 0; i <= 3; i++){ createIslandTile((i+1), 512*map3Count1, 512*map3Count2, map3, '../images/ui/lush/test-map/images-quarter/test-map_'); if(map3Count1 < 1){ map3Count1++; }else{ map3Count1=0; map3Count2++; if(map3Count2 > 1){ map3Count2=0; } } } map3.addChild(new PIXI.Text("MAP3", { font: "20pt monospace", fill: "gray" })); }function createIslandTile(tileNumber,x,y, doc, filePath){ var islandTile = new PIXI.Sprite.fromImage(filePath+tileNumber+'.png'); islandTile.interactive = true; islandTile.mousedown = islandTile.touchstart = function(data) { // store a refference to the data // The reason for this is because of multitouch // we want to track the movement of this particular touch this.data = data; this.alpha = 0.9; this.dragging = true; map1.sx = this.data.getLocalPosition(map1).x * map1.scale.x; map1.sy = this.data.getLocalPosition(map1).y * map1.scale.y; map2.sx = this.data.getLocalPosition(map2).x * map2.scale.x; map2.sy = this.data.getLocalPosition(map2).y * map2.scale.y; map3.sx = this.data.getLocalPosition(map3).x * map3.scale.x; map3.sy = this.data.getLocalPosition(map3).y * map3.scale.y; }; // set the events for when the mouse is released or a touch is released islandTile.mouseup = islandTile.mouseupoutside = islandTile.touchend = islandTile.touchendoutside = function(data) { this.alpha = 1 this.dragging = false; // set the interaction data to null this.data = null; }; // set the callbacks for when the mouse or a touch moves islandTile.mousemove = islandTile.touchmove = function(data) { if(this.dragging) { // need to get parent coords.. var newPosition = this.data.getLocalPosition(doc.parent); map1.position.x = newPosition.x - map1.sx; map1.position.y = newPosition.y - map1.sy; map2.position.x = newPosition.x - map2.sx; map2.position.y = newPosition.y - map2.sy; map3.position.x = newPosition.x - map3.sx; map3.position.y = newPosition.y - map3.sy; } } islandTile.position.x = x; islandTile.position.y = y; doc.addChild(islandTile);}function update(){ stats.begin(); //culling for(var i = 0; i < map1.children.length; i++){ //if your right side goes out of the left bounds or your bottom side goed out of the top bounds OR if your left side goes out of the right bounds or your top side goes out of the bottom bounds, then hide if((map1.position.x <= (((map1.children[i].position.x * map1.scale.x) + (map1.children[i].width* map1.scale.x)) * -1)) || (map1.position.y <= (((map1.children[i].position.y * map1.scale.x) + (map1.children[i].height * map1.scale.x)) * -1)) || ((map1.position.x + (map1.children[i].position.x * map1.scale.x) >= renderer.width) || (map1.position.y + (map1.children[i].position.y * map1.scale.x) >= renderer.height))){ map1.children[i].visible = false; }else{ map1.children[i].visible = true; } } renderer.render(stage); requestAnimFrame(update); stats.end();} </script> </body></html>Thanks
-
Hi Guys, I am building a system where I load tiles of a terrain by demand. Depending of where the camera is, I create new GroudMeshes as needed and tile it on the terrain. My Tiles are a json object with altitude data and some other values. I am facing a problem after loading the grounds. I cannot see any error and the grounds are loaded but they are "not visible" and depending of the angle of the camera they appear in the scene and disappear. They should also be checking collisions but they are not. I have a running example of my system, for simplicity I am always loading the same json but the control of the tiles and the rest are the same. https://dl.dropboxusercontent.com/u/63244599/CollisionsAndVisibility/CollisionsAndVisibility.html To see the problem just click on the link after loading try to move the camera arround (keep the same position) looking in a 20 degree down aprox. and You will see the ground, if you are lucky :S According with my testing, it seems to be something related with loading the meshes during the "before render" or "render" events. If I load all of them before start running the scene. It looks ok. I can also provide you with a zip file that includes the folder and all the files. Any ideas?
-
Hi again, just a quick (maybe weird) question: I want an invisible mesh to cast a shadow and cant get it to work. As soon as I set visibility on the mesh or alpha on the material to something else than 1, I don't get a shadow anymore. Am I doing something wrong or is this maybe intended like that? What could be a work around to get my shadow without the user seeing the mesh. Playground example here: http://playground.babylonjs.com/#I2H3M
-
I put this together today just to test out some of the new features as well as get a handle on exactly what raytracing is, how it works, and why it might be important. Phaser: Light and Magic: http://static.codevinsky.com Source: http://github.com/codevinsky/phaser-light-and-magic Please note, the code isn't cleaned up. There's some left over stuff from other demo projects in there, all you need to worry about is what's in play.js
- 6 replies
-
- 3
-
-
- tilemap
- raytracing
- (and 2 more)
-
It seems like my normals are all messed up. They look correct in 3DS Max. Was easy to fix in Blender, but I can't figure out what is wrong in 3DS. I'm pretty sure it's the normals, but I can't be certain especially since they appear correctly in the 3DS Max editor. The hidden rider... lol He only appears when the base he stands on is out of the frame.... very strange. Any suggestion? Item in 3DS Max
-
I've created a scene in 3dsmax and exported it to .obj and then converted it to .babylon and then uploaded it to 000webhost.com. Problems: 1. It mirrors all the objects, I don't know it is the export problem or conversion problem. 2. It jerks on some of the planes in the scene. 3. Visibility problem on my sever. I don't know what to call it. Problem 1: Here is the 3dsmax screen shot, but in the real scene its all mirrored: Problem 2: It almost works fine on sandbox, but little bit jerking on some of the windows of the house in the scene. Problem 3: The real visibility problem is here, on my server: Check yourself here
-
Can I set the visibility of a tilemapLayer at runtime, such as semi-transparency?
