Popular Content

Showing content with the highest reputation on 07/10/18 in all areas

  1. 3 points

    TYPESCRIPT in Playground

  2. 3 points

    TYPESCRIPT in Playground

    Ok Folks here we are: https://www.babylonjs-playground.com/ts.html Let me know how you feel about it
  3. 2 points

    Reshape SpotLight with a texture

    Okay I fine tuned it more and made it feasible for my use I think. Still based on the same idea, the trouble was with box cutter not being exactly centered. Here is the last version. You should also notice, that the transparent center of the box is smaller than the sides so it can accommodate the circle being cut. I just made it significantly smaller also.
  4. 1 point

    Shadow probleme black bar

    Should be good now: http://www.babylonjs-playground.com/#IFYDRS#12 This is mostly because we need to avoid reading data from the border of the texture (check line 36) I also recommend to boost the shadowOrthoScale a bit (0.2+) to make sure the shadowmap encompasses all the bones
  5. 1 point

    Shadow probleme black bar

    I repro it now
  6. 1 point

    Status of Camera rig VR

    Thanks, but no, I had not. I can say that I am all about control & that looks to have none (no frame rate, no quality, no resolution). I just completed using toDataUrl(). It is the only one in which you can control quality. In the 1.6 sec clip below, the .webm + .wav files combined size is a MASSIVE 8,858 kb. That is a lot for so small a clip, but when the multi-pass VP9 codec convert & sound track merge is done by ffmpeg, it is only 277 kb. As I am merging the consolidated soundtrack afterward anyway, giving ffmpeg the most crisp frames as a source to encode as VP9 or H264 is very desirable. It takes a lot of RAM, but I have 16 gb & room for 16 more. The annotations in the cropped black bars were supposed to be just a joke, but it is really helpful to bake settings right into the video during dev. You can easily mix your files without knowing. Am now starting to work on a clip with actual talking, work on recording code is done, unless I fine something. The alpha for VR is probably in the cameras, not background thinking about it. Going to throw VR under the Bus. Actually, YouTube can show 360 videos. Not going to attempt this right now, but wonder about having a rig with say 300 cameras & viewports. The VR distortion on the combined, probably wrong for this though. side-by-side-vp9.webm
  7. 1 point
    To correct the order of actions, I now do: export default function* rootSaga() { yield all([ modelingSagas.watch(), calculationSagas.watch(), previewSagas.watch(), ]); } - the modelingSagas fetches and initializes the initial model. - the calculationSagas can recalculate the model when values are changed - the previewSagas listens on actions on the model and dispatches one action named 'updatePreview' which contains the last state of the model and the originalAction. As in: export function* watch() { yield takeEvery(modelingTypes.MODEL_INSTANCE_CREATE, updatePreview); yield takeEvery(modelingTypes.MODEL_INSTANCE_UPDATE_PROPERTY, updatePreview); yield takeEvery(modelingTypes.MODEL_INSTANCE_UPDATE_ARRAYPROPERTY, updatePreview); yield takeEvery(modelingTypes.MODEL_INSTANCE_ADD_TO_ARRAYPROPERTY, updatePreview); yield takeEvery(modelingTypes.MODEL_INSTANCE_UPDATE_COMPONENTPROPERTY, updatePreview); yield takeEvery(modelingTypes.MODEL_INSTANCE_DELETE_PROPERTY, updatePreview); } function* updatePreview(action) { const state = yield select(); var house = state.getIn(['modeling', 'instance', 'house']).toJS(); yield put({ type: 'updatePreview', house: house, originalAction: action }); } Notice the yield select() which gets the last updated state. I tried to do it via props, but it doesn't update when I want it to update. With redux-saga I have a lot more fine-grained control over what happens when. Then this is my editor code: this.actionHandler = (action) => { if (action.type === 'updatePreview') { ComponentReducer(action.house, action.originalAction, this.scene); } }; So, I only handle the updatePreview action. The ComponentReducer is updating BabylonJS. Note it is not actually a redux reducer... I might need to change that name The ComponentReducer basically switches on the (original)action and update BabylonJS accordingly. action.house is used for calculation.
  8. 1 point

    Leaderboard sample

    Here's a PG I created a while back that might be helpful: https://www.babylonjs-playground.com/#R4C9C1#10
  9. 1 point

    Tiled objects

    createFromOjects returns an array of the objects created. So in the first two examples your player is not the sprite itself but instead an array which contains the player sprite. createFromObjects is a fantastic method but its going to take a bit more to get it to do what you want. For instance you could check the contents of the array and assign them to variables. Or you could create custom gameobjects and register them to the GameObjectFactory which can then be created using createFromObjects. Your custom objects would have your additonal methods, movement etc. I cut all of that out and just made my own object creation method. See the convertObjects() method on my LevelScene: https://github.com/B3L7/phaser3-tilemap-pack/blob/master/src/scenes/Level.js
  10. 1 point

    Leaderboard sample

    Hi guys. I've been playing... https://www.babylonjs-playground.com/#08KEYA#46 Pretty complicated and rigid... using a row-stackPanel swap-in/out system... to simulate scrolling. MouseWheel scroller is being grumpy yet, but slider works ok. Dialog height and row rectangle height... super sensitive... not easily scalable (currently frozen to 6 items in-view). *shrug* It's something to mess-with. Other/better coders might advance it. I just finished the sort-by-score section. The database (array-of-objects) is built in lines 158-169, with the sorter happening next. I'm not sure if I will continue to advance this or not. The lawn needs mowing, and I need lunch. Are those good excuses to give my brain a break? A nod/wink/hi5 to @The Leftover. Although the sort code is borrowed from web-folk, I thought about some things he's been teaching me... when I entered line 174. He's been teaching me about calling a function with a function as the arg/param. It still feels retarded, but, I'm workin' it into my brain... slowly. A dynamic parameter. weird. Update: PG now at 46. I had the dialog set for proper height... when I had my dev tools open. When I closed my dev tools pane, dialog white space went bad. Better now. I THINK I used to know how to set a GUI control so that it didn't "squish" when I opened my dev tools panel . But, I forgot how to do that. Note: How many of you had a flashback to "Leaderboard Golf" when you read this thread title? :) Twas a popular series, long ago.
  11. 1 point

    Leaderboard sample

    You can basically do a lot with our StackPanel but we do not support scrolling yet
  12. 1 point
    i set my mesh's backFaceCulling = false and that took care of it. Thanks!
  13. 1 point
    This is starting to get somwehere.... http://www.babylonjs-playground.com/#3ENM44#7 It is buggy, but I have to run now. Only works when dragging on X now (and isnt always consistent). I'm sure the code could be condensed some more.
  14. 1 point

    Phaser 3 animation framerate

    Try frameRate instead of framerate.
  15. 1 point

    TYPESCRIPT in Playground

    That's really great, thanks a lot !
  16. 1 point
    each face has a normal. https://doc.babylonjs.com/resources/normals backface culling: https://doc.babylonjs.com/babylon101/materials#back-face-culling Looks like your normals may be backwards or shared. If you want them visible from both sides you need to disable backFaceCulling. If you share your model then likely we can figure it out.
  17. 1 point

    Shadow probleme black bar

    This looks like you have self shadow turned on and you have got acnea. black to white regular stripes. Could you increase the bias a bit ? PS: you can also play with normalBias to prevent it at grazing angle.
  18. 1 point
    *nod* https://www.babylonjs-playground.com/#HHFBT#2 There's a grid-drag-snap. (yawn) Also... umm... http://www.html5gamedevs.com/topic/20751-aabb-snapping-in-3d/ *shrug* Party on!
  19. 1 point

    InputText dead key support

    Here's what I've got so far. What I'm trying to achieve is to be able to very easily configure different custom key mappings outside of Babylon and to be able to switch between them at runtime. This is all done in a callback I give to InputText. I can modify the entered character and event prevent it from being added to the input. This enables me, for example, to easily add dead key support or to just allow numbers to be entered. I think this also solves the "input mask" case we talked about here: Here's an incomplete dead key handler: let input = new gui.InputText(); input.onBeforeKeyAdd = (target, key) => { if (target.deadKey) { switch (key) { case "a": key = "á"; break; case "A": key = "Á"; break; } target.deadKey = false; } return { add: true, key: key }; }; And here's a handler that only allows numbers to be entered: let input = new gui.InputText(); input.onBeforeKeyAdd = (target, key) => { let add = false; if (key >= "0" && key <= "9") { add = true; } return { add: add, key: key }; }; What I'd also like to do is to bundle a set of these key modifiers along with Babylon so user's can pick the ones they need but I'm unsure of the best way to do that (where to put them). Any ideas?
  20. 1 point

    Reshape SpotLight with a texture

    Yeah, I'll add them there!
  21. 1 point

    Scale Text?

    You can scale Text object just like any other Container. var text = new game.Text('Hello'); text.scale.set(2); Is that what you were looking for? You can also set properties as parameter: var text = new game.Text('Hello', { scale: { x: 2, y: 2 }, alpha: 0.5 });
  22. 1 point

    Reshape SpotLight with a texture

    THAT ... is VERY cool! haha. Truly tasty mad-scientist stuff. Time to open a VR movie theater, because kjue has built the projectors.
  23. 1 point

    Destroy all children

    No worries! I really should add some kind of searching to the docs.
  24. 1 point

    Destroy all children

    https://www.panda2.io/docs/api/Container method removeAll
  25. 1 point

    Reshape SpotLight with a texture

    Thanks @Wingnut and @brianzinn those are helpful! I updated the playground (remember to hit Run!) to match those examples and took it a bit further. I noticed there are ways I can adjust the sort of U and V mapping of the texture being projected. This enabled me to clip the video to roughly match the size. @Wingnut you can always use the layerMask to exclude objects from the scene though they are in the renderlist for the shadow generator. I did that here. You can imagine I'm slightly restless with this kludge though I can see it working. I will think if I can put into place the clipping into the light function directly. I found this example that does precisely that and I think others would love to have that in there too.
  26. 1 point
    PR submitted - https://github.com/BabylonJS/Babylon.js/pull/4722
  27. 1 point

    Align / Center Text

    align property is used only on multi-line text, so you can remove that. To recenter you do have to set the x anchor after you change your text (because the width of the text changes), like this: this.countdownTxt.setText('9'); this.countdownTxt.anchor.x = this.countdownTxt.width / 2;
  28. 1 point
    Thanks a lot guys..!!! I really appreciate this..!!! 🙏
  29. 1 point

    Physics Examples

    As always amazing response speed and fix @enpu keep up the awesome work!
  30. 1 point
    I think each mesh requires as many draw calls as it has subMaterials, which would explain the huge draw calls count. Any hint about what you are trying to render ? A full city ? A very detailed building ? The easiest way to improve performances would be -> Freeze meshes not moving. If a mesh only move "sometime" (on user input for example), keep it frozen when it's not. There's some true optimization here, if not done already. -> Merge meshes sharing materials together, you will reduce the draw calls count, also some true optimization. It's harder, but you will also need some LOD and / or baking into texture, because I'd say your triangle count is way too high... Everything's here : https://doc.babylonjs.com/how_to/optimizing_your_scene Good luck !
  31. 1 point

    Dynamic DDS files

    You have the right Base64. I've created a PG that works for me: https://playground.babylonjs.com/index.html#JPMIF9
  32. 1 point

    Physics Examples

    @8bitdna Good find, thanks! I have now fixed this and updated p2.js plugin to version 1.2.1
  33. 1 point

    Using typescript in playground

    Thanks a lot @NasimiAsl!!
  34. 1 point

    exploring matrix multiplications

    the next day (use mousewheel, if you able to) https://www.babylonjs-playground.com/#SQP9E0#5
  35. 1 point

    Reshape SpotLight with a texture

    I had the same idea as Wingnut, so not sure if you are after that same effect done another way (look up): https://www.babylonjs-playground.com/#X3XD2C#3
  36. 1 point

    Reshape SpotLight with a texture

    Hi guys. http://www.babylonjs-playground.com/#1Z89KY#13 Wingnut goofin' around. This requires shadowGenerator. I can't make transplane2.visibility = 0, though. Not so far. Essentially, I'm shining light thru an inverse cookie-cutter. Kludge. This is probably not helpful, but I thought I should show it. Note: This PG was contributed-to... by many people. Line 44 - mat2trans.anisotropicFilteringLevel = 0; ...is not understood by me. Future users may wish to investigate its use/need.
  37. 1 point
    This topic is worth a read
  38. 1 point
    Here's a PG that has a 'roof' added: http://www.babylonjs-playground.com/#4GBWI5#90 However, depending where you are in the world, a roof could be one of many types; flat, pitched, hipped etc.
  39. 1 point
    Cool wall-generator code, Thamali! You are driving BJS/JS quite well... considering you are "new". Thx for providing that useful playground demo. @dbawel... squares/rectangles... I could MAYBE help-with. That "indented corner" probably makes this challenge too difficult for my simpleton brain. But, I will keep thinking and looking thru my list of playgrounds. I have a strange personal issue (what's new?). It seems my brain can't code anything... until them soccer kids are removed from that cave. hmm. Sorry to hear about your internet issues, DB. First time I have ever heard about heat causing internet problems. Sucks, but interesting. I bet the ISP(s) is/are getting tons of complaints.
  40. 1 point
    @thamali You have all of the information you require in your 'buildFromPlan' function to accomplish this. Just use selected info from this function and add the roof within the function. If this isn't clear enough to you right now. then I'm certain I or someone else on this forum can modify the PG scene to demonstrate how. I'll try to get to it soon, but due to the 42C degree temperatures her right now, my internet connection is only up for a few minutes or hours at night when the temperature drops a bit. I'm expecting this to get better as the temperature should be in the 30C's tomorrow. At least I hope. @Wingnut... want to help him out? DB
  41. 1 point
    Hey losthope, I see you had some fun with the raptors You are the second person - out of two - who mentioned the trees. I'm starting to doubt that the CDN is doing a good job sending off the high-quality models fast enough... I don't see any reason why p2p WebRTC connection wouldn't work behind shared IP. If you are interested to just mess around with WebRTC to figure out whether it's for you or not, I would recommend PeerJS as a start because establishing a connection between two people is a nightmare if you want to do it yourself. PeerJS have live demos as well so you can try the shared IP issue without committing yourself. Please don't have second thoughts about contacting me if you have any other questions, and let me know if your hobby game is available for a spin
  42. 1 point
    Hi Hit2501, Well 3 solutions come to my mind: Yes you can use sprites. I would recommend to reduce the sprite locations to have a minimum distance (so they don't overlap, which isn't fancy). See the Street Hoops 3D demo on babylonjs.com when you aim the basket ball you see a trail of dots for an example. Hint: Put the Vector3 points into a Path3D to get more useful properties about the trajectory for free. You can also use the Line mesh to draw a line through the points. See https://doc.babylonjs.com/how_to/parametric_shapes#lines If you have multiple trajectories you can use the LineSystem (and give each ball line a different color etc.). Finally you can use a Ribbon or mesh extrusion along a Path3D if you want the line to have some sort 'shape' in 3D. E.g. for a ball which is a sphere your line shape will be an extruded Circle to create a (bended) tube. Demo's http://jerome.bousquie.fr/BJS/demos/rollercoaster.html see the track that is constructed along the line path. Also see the docs on extruding a shape along a path. Maybe there are more ways, but these 3 will probably help you get started. I use option #2 (for debug) an #3 for my Model Train Simulator game to construct the rail track path. Enjoy. Q
  43. 1 point
    @thamali It all depends on how you're constructing the walls representing each footprint. @Wingnut has a potential solution, but it all depends on how you're generating the geometry which you roof is dependent. DB
  44. 1 point
    Hi thamali, welcome to the forum. First, I'm going to assume that "footprint" is almost the same as "building foundation". Footprint is a good term, but might be confusing to some readers. Umm... you need to "sum" the bounding-areas of all the walls. I think there is a function nearby... which does that. I'm searching. Help needed from others, please. (I will keep looking, though.) I think, if you meshMerge all the wall meshes... then you can do... var myTapeMeasure = mergedMesh.getBoundingInfo().boundingBox; Then examine the properties on your tape measure object, and you will see some useful values. Stay tuned... better answers are nearby. Does anyone have/know-of a function that ... sums the bounding-volumes of an array of positioned mesh? Thx! Post url/info here, please.
  45. 1 point

    Playground saved scenes hosed

    Thank you guys..I was a fun wake up for me 6am: my inbox full of alerts, 2 issues created on the repo. I jumped naked from my bed to my office 6:30am: Issue seems to come from the snippet server not able to communicate anymore with our azure SQL server. 6:45am: Ok the SQL server is forcefully refusing all incoming requests. 7am: Even with no firewall, all incoming connections are rejected. Opening a ticket. I have to pay to get support. Closing the ticket 8am: My daughter woke up. I need to dress and to stop my investigation but seems related to a hard limit linked to the subscription I'm using (Free) 9am: Ok my daughter is at school, let's go back to business 9:15am: Bumping the SQL Server instance to a bigger subscription. Problem solved
  46. 1 point
    Hello, I am developing a 3d page, with babylonjs, I have the scene, that I am modeling and exporting in "blender" to a babylon file. In code I am adding shadows and lights, some of these lights I need turn on an turn off whe the lamp is clicked. I create the lights like this: //Luz global light[0] = new BABYLON.DirectionalLight("LuzGlobal", new BABYLON.Vector3(0, -1, 1), scene); light[0].diffuse = new BABYLON.Color3(1, 1, 1); light[0].specular = new BABYLON.Color3(1, 1, 1); light[0].direction = new BABYLON.Vector3(0, -1, 1); light[0].position.x = 27; light[0].position.y = 28; light[0].position.z = -89; light[0].intensity = 1.0; //createLensFlare(); //Creamos las luces de las lamparas light[1] = new BABYLON.SpotLight("lampara1", scene.getMeshByName("lamp1").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[1].diffuse = new BABYLON.Color3(1, 1, 1); light[1].specular = new BABYLON.Color3(1, 1, 1); light[2] = new BABYLON.SpotLight("lampara2", scene.getMeshByName("lamp2").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[2].diffuse = new BABYLON.Color3(1, 1, 1); light[2].specular = new BABYLON.Color3(1, 1, 1); light[3] = new BABYLON.SpotLight("lampara3", scene.getMeshByName("lamp3").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[3].diffuse = new BABYLON.Color3(1, 1, 1); light[3].specular = new BABYLON.Color3(1, 1, 1); light[4] = new BABYLON.SpotLight("lampara4", scene.getMeshByName("lamp4").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[4].diffuse = new BABYLON.Color3(1, 1, 1); light[4].specular = new BABYLON.Color3(1, 1, 1); And I switch the state like this: // Apagamos o prendemos la luz de la lampara 1 scene.getMeshByName("lamaparaCalle1").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle1").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[1].isEnabled() == true){ light[1].setEnabled(false); if(scene.getMeshByName("vlsT1") != null) scene.getMeshByName("vlsT1").setEnabled(false); } else{ light[1].setEnabled(true); if(scene.getMeshByName("vlsT1") != null) scene.getMeshByName("vlsT1").setEnabled(true); } })); // Apagamos o prendemos la luz de la lampara 2 scene.getMeshByName("lamaparaCalle2").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle2").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[2].isEnabled() == true){ light[2].setEnabled(false); if(scene.getMeshByName("vlsT2") != null) scene.getMeshByName("vlsT2").setEnabled(false); } else{ light[2].setEnabled(true); if(scene.getMeshByName("vlsT2") != null) scene.getMeshByName("vlsT2").setEnabled(true); } })); // Apagamos o prendemos la luz de la lampara 3 scene.getMeshByName("lamaparaCalle3").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle3").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[3].isEnabled() == true){ light[3].setEnabled(false); if(scene.getMeshByName("vlsT3") != null) scene.getMeshByName("vlsT3").setEnabled(false); } else{ light[3].setEnabled(true); if(scene.getMeshByName("vlsT3") != null) scene.getMeshByName("vlsT3").setEnabled(true); } })); // Apagamos o prendemos la luz de la lampara 4 scene.getMeshByName("lamaparaCalle4").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle4").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[4].isEnabled() == true){ light[4].setEnabled(false); if(scene.getMeshByName("vlsT4") != null) scene.getMeshByName("vlsT4").setEnabled(false); } else{ light[4].setEnabled(true); if(scene.getMeshByName("vlsT4") != null) scene.getMeshByName("vlsT4").setEnabled(true); } })); But the first time that i turn off the lights the scene is paused and then continue, what is the best way to do that? maybe I am doing something wrong. the complete source is: https://github.com/flelix/entorno-models.git the project path is: entorno-models/code/proyBabylon/p2/ thanks and regards
  47. 1 point

    Fastest way to display fps

    @Pryme8 - Actually, I prefer to use my own code - which as I know your skillset is most likely known to you - but for others, here's a simple method to set this up in your script. add this to your CSS file #fpsLabel { position: absolute; right: 20px; top: 20px; color: #999; cursor: default; } And set the display position wherever you like. Then in your script body, use this: engine.runRenderLoop(function () { scene.render(); var fpsLabel = document.getElementById("fpsLabel"); fpsLabel.innerHTML = engine.getFps().toFixed() + " fps"; }); I added in the runRenderLoop function just to show where to call this using the DOM. This is how the FPS is displayed on the playground, and it will not impact performance in any way. Also, you don't need to use any browser tools, and always register your FPS at will without modification to your browser. DB
  48. 0 points
    One of my customers are well known company, they are here in the forums too with good reputation. They purchased custom game and I've delivered it to them. They delayed payment with tons of explanations. Now I see my code used on their site but I haven't received any payment from them. I am going to look for legal solution. And this is a simple reminder - always get at least half in advance even if you have several projects with the same client before. And those guys have reputation, haha. My bad for being too naive.