Leaderboard


Popular Content

Showing most liked content since 11/13/2017 in all areas

  1. 7 points
    RaananW

    The new Babylon Viewer

    Hi boys and girls, I don't know if you noticed, but the repository has a new directory called "Viewer" : https://github.com/BabylonJS/Babylon.js/tree/master/Viewer The viewer is a simple way of displaying a model without the need of JavaScript at all. It (obviously) uses babylon, and can be customized to your needs using HTML tags and HTML attributes. The only two important lines in your page would be: <babylon model="https://playground.babylonjs.com/scenes/Rabbit.babylon"></babylon> <script src="https://viewer.babylonjs.com/viewer.min.js"></script> Which will result in this: https://viewer.babylonjs.com/basicexample You can read about how to use it and how to customize it here - http://doc.babylonjs.com/extensions/the_babylon_viewer It is currently in a very early stage. The (public) project can be found here - https://github.com/BabylonJS/Babylon.js/projects/6 , including future plans. I am in the process of simplifying the development, build, and deploy process and it will soon be available on NPM as well, if anyone wishes to embed it using webpack/imports/require/whatever
  2. 6 points
    Deltakosh

    Please welcome the TransformNode

    I know this was a big ask from the community so I'm glad to announce that we finally support TransformNode! They are node with position / scaling / rotation like any mesh but without all the rendering. So they are just here to add transformation to a hierarchy. Example: https://www.babylonjs-playground.com/#JT0HN4 @JohnKsorry my friend because this could require some update to the doc (even if by itself everything will keep working the same as before)
  3. 5 points
    bulisor

    3D scatterplot on babylonjs

    Hi. As I promised, I'm back with a new application of babylonjs. Without any presentations a 3D scatterplot https://www.smarteam3d.com/portfolio/3DScatterPlot.html And here is the playground version: https://www.babylonjs-playground.com/#E3XJMU#26 And here is a very basic example how to do your own 3D grid to draw your own scatterplot. https://playground.babylonjs.com/#AFGPGD#1 PS: It's not fully optimized, and I'm sure it can be done better, but it's a begining.
  4. 4 points
    jerome

    LineMesh and LineSystem Per Point Color

    Hi people, Based on the internal initial code from @JCPalmer, here are the per point colors for LineMesh and LineSystem var points = [arrayVector3]; var lineColors = [arrayColor4]; var line = BABYLON.MeshBuilder.CreateLines("l", {points: points, colors: lineColors}, scene); // same for LineSystems var lines = [arrayVector3[] ]; var colors = [arrayColor4[] ]; var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, colors: colors}, scene); Note1 : this works also with updatable LineMesh or LineSystem objects as the colors array can be updated live. Note2 : when set at construction time, the parameter colors overwrite the hypothetical line or lineSystem .color property. If colors is passed but undefined, the object color falls back to the .color property value. [EDITED]Note3 : if you need to enable the alpha blending (line or segment transparency), just set the parameter "useVertexAlpha" to true at construction time : var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, colors: colors, useVertexAlpha: true}, scene); var line = BABYLON.MeshBuilder.CreateLines("l", {points: points, colors: colors, useVertexAlpha: true}, scene); This will allow you to create rulers, axes, graduation systems with multiple colors and to draw them in a single draw call. As usual, documentation and PG examples coming soon ... meanwhile : http://jerome.bousquie.fr/BJS/test/linesystem.html
  5. 4 points
    jerome

    LineMesh and LineSystem Per Point Color

    casino royale ? http://playground.babylonjs.com/#W9LE0U#5 [EDIT] as usual, can't stop playing then http://playground.babylonjs.com/#W9LE0U#6 [EDIT 2] colors and alpha : http://playground.babylonjs.com/#W9LE0U#7
  6. 4 points
    Deltakosh

    What's next?

    Hello dear community, we are about to ship 3.1 (early december). I'm really proud of what we did so far but I want more for 3.2 SO I'm wondering what could be useful for you regarding ease of access and simplicity. Please use this thread to give me any idea / feedback. I cannot guarantee that everything will be developed but I can promise that everything will be considered seriously
  7. 4 points
    Just a simple demo displaying the power of the ParticleSystem by creating a low-hanging fog. Not cinematic quality and it can no doubt be done better with a shader, but pretty nice looking for the very low performance impact it has. http://www.babylonjs-playground.com/#BHNVUE Thanks to @Wingnut for finding the PG used as base for this demo. Have a nice saturday
  8. 4 points
    jerome

    Three.js or Babylon.js for room design

    Even with expensive software products or other service Premium offers, you will never meet such a fast and dedicated free answer and fix. Maybe, this is THE reason that you might consider about choosing BJS over ... anything else
  9. 3 points
    jerome

    LineMesh and LineSystem Per Point Color

    chronos ... one draw call http://playground.babylonjs.com/#W9LE0U#9 stessed ? http://playground.babylonjs.com/#W9LE0U#10 funny http://playground.babylonjs.com/#W9LE0U#11
  10. 3 points
    JohnK

    Playground Based Tutorials

    Writing playground based tutorials (PBTs) just got easier. Well a little bit easier than when it started in this thread. There are now methods available in the playground for anyone to highlight or hide lines in the editor and to build simple standard information and selection dialogue boxes. Documentation is available to describe the available functions with links to a couple of examples and how they were coded. Even if you do not want to write a full tutorial the functions can be used just to highlight some lines in your code or even to hide and unhide some lines as in this example https://www.babylonjs-playground.com/#NLMGJ2 A word of warning - I thought that this example was simple enough so I ignored my own advice from the documentation and just added the function to hide code straight into the playground and forgot to change a true to a false and ended up losing the code I needed to correct. So unless you are just using line decoration always write and edit the code in a text editor and copy and paste into a PG and Run to test, don't Save until you are sure everything is correct..
  11. 3 points
    Something like this? https://www.babylonjs-playground.com/#1QM99D#14 another: https://www.babylonjs-playground.com/#1QM99D#15
  12. 3 points
    mattstyles

    Saving and Loading

    Minecraft (I don't think) saves all those blocks either, nor does it have to, if you've used git source control then you'll be familiar with the concept of 'diffs', which I think is how Minecraft saves world data. In any case the following limits the amount you have to save, you need 2 things: * A pure deterministic world generation algorithm * Understanding how to store diffs against the deterministic world The process is actually really simple: Generate a seed (number, string, anything, doesn't matter) and use that seed to generate a world, the algorithm must be pure (referentially transparent) i.e. the same seed always produces the same structure (world map), an easy way to achieve this is to use the seed to seed a random number generator. No-one wants to make their own RNG, so pick one out there that allows supplying a seed (note that RNG is proper tricky, inside a computer people actually use its normally fairly easy to maintain entropy, on a server it can be trickier, mostly whatever OS you are running handles keeping entropy up). If your world map is immutable then you only ever need to store the seed, that'll deffo fit in local storage as it'll likely only be a few bytes. In this case it doesn't matter how much of the world has been explored on a previous visit, you can generate it on the next playthrough from the stored seed, so long as your algorithm is pure then you know the world will always be the same, so long as you can generate the world fast enough as your player moves around you're laughing but you'll have this problem anyway. If your world map is mutable (like vanilla Minecraft) then you'll have to work a little harder. Storing everything you've generated is the naive approach and, as you've noticed, doesn't work very well. The thing is, not much of your world will actually change, so just store the changes, this vastly reduces the problem space. Just store the diffs between world gen and current state. You'd also want a way to overwrite previous diffs where necessary, i.e. I place a stone block at [10, 12], then a wood block in the same place, well, you only store the diff between world gen and placing the wood block and nuke the previous diff that mentioned the stone block. On the next (loaded) play through you generate the world using the seed, then apply the stored diffs to regain where the player left off. To further reduce save/load times save/load only what you currently need i.e. when a player leaves an area save it, when they enter an area load it.
  13. 3 points
    RaananW

    Scaling Uploaded OBJ mesh

    A few options here: 1. I had the answer already, I just waited a second before you posted yours and then posted mine. 2. I have full control over the database, and I changed the signature of my post 3. I really AM a retired time traveler! 4. I wrote a very complex AI extension for chrome that tells me the minute there is a question i can actually answer. And if it can, it simply answers on its own. based on IBM Watson, Amazon Alexa, Siri, Cortana, and that horrible thing google has. Choose 1!
  14. 3 points
    For you@max123: https://github.com/BabylonJS/Babylon.js/commit/9824853960fc2a4be97b1acb6907244c8df9f05e
  15. 3 points
    I'm convinced it is not possible to satisfy everyone. But I assure you we are trying hard
  16. 3 points
    NasimiAsl

    Planar section cut through geometry

    hi @Sebavan http://www.babylonjs-playground.com/#7AIII8#10 glass material http://www.babylonjs-playground.com/#7AIII8#12 http://www.babylonjs-playground.com/#7AIII8#11 metal+roughness http://www.babylonjs-playground.com/#7AIII8#13 http://www.babylonjs-playground.com/#7AIII8#14 i start make it in custom material too ( but need fix some problem first )
  17. 2 points
    https://www.babylonjs-playground.com/#1QM99D#20
  18. 2 points
    You can use scale, scaleX, and scaleY with the PixiPlugin.
  19. 2 points
    adam

    Animation Methodology Review

    I created that PG when I was developing the IK controller. At that time I hadn't added the slerpAmount feature. Here is an example of how to use slerp: https://www.babylonjs-playground.com/#PNJGW#8
  20. 2 points
    jerome

    LineMesh and LineSystem Per Point Color

    @Wingnut http://playground.babylonjs.com/#W9LE0U#3 just play then with the vars : radius, angle, max, width [EDIT] http://playground.babylonjs.com/#W9LE0U#4 you can set the red line internal radius at the line 35
  21. 2 points
    jerome

    LineMesh and LineSystem Per Point Color

    Example 1 : a simple ruler http://playground.babylonjs.com/#W9LE0U#1 Example 2 : colorized mesh normal visualization https://www.babylonjs-playground.com/#1ENDNT#5 (same less dark : https://www.babylonjs-playground.com/#1ENDNT#6 )
  22. 2 points
    Wingnut

    Animation Methodology Review

    Ahem. Wingy points to the wonderful .babylon file type, and then pops a confetti cannon. Early mesh.spin() and mesh.move() tests... here. Funcs defined in lines 3-13, and 5-segment animation sequence in lines 110-114. Just doing ground, early tests, no easing yet. Update: [link] A bit longer animation sequence, built-in cubic ease-in/out... and look how little the PG is. So fun! Not so well 'sync'd. Also, fuschia and yellow cones... don't want to ever finish. hmm. Wingnut bug, likely. But perhaps, not. Another update: [link] Ahh, there we go. Two of my spin calls had negative speed settings, but needed negative radians and positive speed. Wingnut screw-up... now fixed. One more: [link] Coded-up the other 2 funcs... .scale()/scale2... and .color(). They are working fine. YAY! Fun! Still evolving. Okay, just one more (so far) [link] A little shorter demo, but using ALL "To" and targets. Notice that there is a BJS vector3 or color3 in EVERY animation line (150-166). These are the targets. I'm still thinking about HOW I get control of components, when other values are unknown. In other words, moveTo works fine to force all three components, x, y, and z. Difficult to animate ONLY Y component, while NOT knowing the values of mesh X and Z components. Currently, the first param of all "To" funcs.. is not used. Animating a specific component (like setting ONLY Y-axis to +5, yet not knowing current X or Z)... via using a "To" func... will require some ingenuity: setTimeout(()=>mesh.moveTo("unused", new BABYLON.Vector3(mesh.position.x, 5, mesh.position.z), 35), 19000); (not tested, but should work, in theory)
  23. 2 points
  24. 2 points
    aFalcon

    Animation Methodology Review

    ANIMATION METHODOLOGY -> LOOKAT, HEAD & EYES: #1) after combing the two. First head.lookAt() then eye.lookAt() -> for some reason eyes look high again. QUESTION: any idea why eyes would look high after sequential: head then eye lookAt()'s? - cause it adds the rotation twice? Ah neat. - yep, looks like @aWeirdo explained (something like that) last year... - I'll add this with CONSTRAINTS, unless someone knows off hand... #2) Also -> try reversing the order... - COOL INSIGHT! Its a subtle difference, but it seems running eye.lookAt() before head.lookAt() causes eyes to look faster... (maybe?). Time for Lunch!
  25. 2 points
    aFalcon

    Animation Methodology Review

    -> ANIMATION METHODOLOGY ~ LOOKAT, HEAD: There were some tricky spots. I'll explain... #1) Hey look, the local Axis' are different? Local space... without rotate? On import? Symptoms later... CODE: var head1 = [] var eyes1 = [] //left, right; //Orbiting-TargetSphere var targetsphere = BABYLON.Mesh.CreateSphere("sphere", 2, 1, scene); targetsphere.isVisible = true; targetsphere.position.y = 1; targetsphere.position.x = -15; var angle1 = 0; scene.registerBeforeRender(function() { targetsphere.position.z = 8 * Math.cos(angle1); angle1 += 0.02; displayMeshAxis(targetsphere); if(head1.length) displayMeshAxis(head1[0]); if(head1 && head1[0]){ //sphere look at points up the x-axis. var gazeTgt = targetsphere.position; // gazeTgt.z += 0.02; head1[0].lookAt(gazeTgt); // head1[0].rotationQuaternion.y += 0.025; } }); var assetsManager = new BABYLON.AssetsManager(scene); var meshTask1 = assetsManager.addMeshTask("mesh1", "", "../../3d/", "eyes8.gltf"); meshTask1.onSuccess = function (task) { var meshes = task.loadedMeshes; //.meshes[0]; var skeleton = task.loadedSkeletons[0]; //.skeletons[0]; //init input: filter out camera and lamp, etc. for(var i = 0; i < meshes.length; i++){ if(meshes[i].name === "eye_R"){ eyes1[0] = meshes[i]; } else if(meshes[i].name === "eye_L"){ eyes1[1] = meshes[i]; } else if(meshes[i].name === "head"){ head1[0] = meshes[i]; } } // if(head1.length){displayMeshAxis(head1[0]);} if(head1.length && eyes1.length){ eyes1[0].parent = head1[0]; eyes1[1].parent = head1[0]; //parent head to eyes. } }; assetsManager.load() BLENDERFIX: SYMPTOM: at first -the face looking the wrong way. It would only look from its left ear! SOLUTION: can orient face, exactly backwards in Blender... to get face to lookAt() target. And I don't understand why (yet).... QUESTION: how to align Babylon Axis to Blender Front Position? (numpad 1)[-y?] What is going on there? Setting is LeftHandSystem = true; Happy to keep everything backward facing in Blender (ctrl+1 numpad) but... anyone know why? #2) Tilt Eyes-Down (didn't anticipate) COOL INSIGHT: head.lookAt() is not the same as eye.lookAt()... difficult to guess that in design. OR... the character moves both head and eyes. Interesting... --> Onto ~EYES-ONLY, then ~HEAD & EYES!!!
  26. 2 points
    Wow! I am looking for fog like that! Thanks a lot man! Check your fog in my game! -> https://streamable.com/x8nkv
  27. 2 points
    Hi @Steffen The picking doesn't pick by boundingboxes. I ended up doing a workaround thus far, a prototype for abstractMesh which adds a "picking Box" (just a BABYLON.Mesh.CreateBox) the size of the mesh's bounding box, parented to the mesh, only pickingBox has isPickable and then a visibility of 0.001 or so. And on picking it's just pickedMesh.parent to get the actual mesh. I hope it makes sense.
  28. 2 points
    Xav

    Align ArcRotate camera alpha

    Hi ! I think I have fixed the problem: Ligne 52 with this condition if (EndAlpha - StartAlpha > Math.PI){ EndAlpha = EndAlpha - (Math.PI*2); } http://www.babylonjs-playground.com/#XCGI1K#11 Thank you for putting me on the right path
  29. 2 points
    SUCCESS: MINIMUM GLTF BONES FROM BLENDER (methodology): Thanks @adam for SkeletonViewer. It is great! We have similar animation methodologies: animate in code with a starting Blender Armature. My search is for BOTH, or ALL animation methodologies (later)... So, steps here for anyone who wants to replicate methodology. STEPS TO MINIMUM-BONE: It is an ongoing challenge to get the pipeline correct because there are many options. Gotta get em aligned. This is not a problem when the pipeline is working - but it is when it isn't. : ) So all parts need to be streamlined to get the right results. Or flow not flowing... what? 1) Loading Options (Append works, need to try each. Also, skeleton or mesh locations can be different in parameter): - BABYLON.SceneLoader.Append //good (example below) - BABYLON.SceneLoader.ImportMesh //better - BABYLON.AssetsManage //best (for my needs): var assetsManager = new BABYLON.AssetsManager(scene); var meshTask1 = assetsManager.addMeshTask("mesh1", "", "../../3d/", "bonebox10.gltf"); meshTask1.onSuccess = function (task) { var mesh = task.loadedMeshes; //.meshes[0]; var skeleton = taskloadedSkeletons; //.skeletons[0]; }); assetsManager.load() 2) Import options (blender export plugins: File > User Preferences > Add-Ons > Install Add-On From File > Save Settings) ... derp. - .babylon //favorite - Tower Of Babel //interesting (tons of custom options in Blender) - glTF //looks awesome: compression, interoperability, complex animation compositions, and (MSGb) multi-scene-graph-baby! (links above) 3) Blender Options (Challenge Area #1 ) It takes a while to memorize the special sequence of Blender hotkeys that unlock the magic prize! FUTURE-NOTE (to self): Don't need Armature-Modifier, and don't need Weight-Paint. Enstead... *Parent Bone to Mesh using Automatic-Weights. (wiki-link above) STEPS: @gryff mentioned all this... years ago. -> Right click Mesh first, then Armature last (for the bones to be the parent). Important. -> ctrl + p -> Set Parent To -> Armature Deform -> With Automatic Weights. -> Pose mode, rotate a bone. -> File -> Export -> (blender plugins) -> gltf 2.0 (gltf) https://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/Bones 4) Loading into Babylon (Challenge Area #2) Trouble-shootin' time! What is this? Two Blender bugs... Ha! And grey hair... 1st SOLUTION: again thx gryff - "the bones and the mesh not in the same spot." Ah, ha! BLENDER FIX (RTS-RESET): Select Armature, Object Mode -> Object -> Apply -> Location & Rotation & Scale. Select Mesh, Object Mode -> Object -> Apply -> Location & Rotation & Scale. Export....again. Where is the other bone?!? 2nd SOLUTION: thanks to @adam (1.5 yrs ago), if he didn't mention it.... "doesn't draw the last bone if the bones don't have a length property.". Look Blender, sure enough. No Length??? http://www.html5gamedevs.com/topic/20814-skeletonviewer-class/ BLENDER FIX: Ah well, added a baby-bone at the end, pieceivecake. (HINT: one cannotsee the babybone). derp... - export again... SUCCESS! -> MINIMUM-BONE-EXPORT from BLENDER. 6) Why??? To TEST the multiplicitous-animation-methodologies. What, black-magic?!? No, it's just multi... ok: BABYLON ANIMATION OPTIONS: BoneControls(1st thing @Wingnut), Blender Keyframes, Action Manager, ActionBuilder, Morph Targets, Shape Keys, Baking?, Motion Paths, LookAt, Interpolations, etc... -> in another fact-finding-info-thread ... Also thanks @JCPalmer Here is loader code for EAT... (Export Append Test ): BABYLON.SceneLoader.Append("../../3d/", "bonetube2b.gltf", scene, function (obj) { var mesh = obj.meshes[0]; var skeleton = obj.skeletons[0]; // Create a skeleton viewer for the mesh var skeletonViewer = new BABYLON.Debug.SkeletonViewer(skeleton, mesh, scene); skeletonViewer.isEnabled = true; // Enable it skeletonViewer.color = BABYLON.Color3.Red(); // Change default color from white to red }, null, function (obj) { }); No, yes. endure. 5) GLTF (isn't necessary for this solution, but it sure is cool!) Get the correct version of Babylon... <script src="../../lib/gltf/babylon.preview.js"></script> <script src="../../lib/gltf/babylon.glTFFileLoader.min.js"></script> From glTF ... RTS (rotation, translation, scale). So golden-rule: 'in Blender be sure to Object -> apply -> RTS. Else-anim-stuffs-breaks!' Here are the great glTF DOCS: https://doc.babylonjs.com/how_to/gltf 6) (dot).babylon Blender exporter - Why different? https://doc.babylonjs.com/resources/blender 3rd SOLUTION: thanks to the docs on exporting, "gotta check flat-shading" BLENDER FIX: (check) -> Mesh, Vertex-Data -> Use Flat Shading: Also the background was black: BLENDER FIX: -> No selection, World -> Ambient Color One last thing: Why is the .gltf tube grey and .blender white? Default colors. -> when no color is specified .gltf defaults to 50% grey. zing! That's that ... my wife says I must EAT now. ... most of those pesky terrrible jokes removed. BABYLON.Rocks(true);
  30. 2 points
    Oh, never mind that, I thought you were having a scope problem. In levelData, use enemy: 'Teacher', … enemy: 'Seeker',
  31. 2 points
    icp

    Need cordova plugin

    This is the one i'm currently using in my game https://github.com/artberri/cordova-plugin-play-games-services .
  32. 2 points
    Deltakosh

    Reverse Particle System

    So: -updateFunction is called once per static frame time - emitRate is the number of particles generated per static frame time - Age is in static frame time (but the updateSpeed property can change it) static frame time is running at 60fps (even if the rendering is not at 60fps) Here is the relevant code: https://github.com/BabylonJS/Babylon.js/blob/master/src/Particles/babylon.particleSystem.ts#L194 _scaledUpdateSpeed is compute like this: this.updateSpeed * animationRatio: https://github.com/BabylonJS/Babylon.js/blob/master/src/Particles/babylon.particleSystem.ts#L426 AnimationRatio is build like this:https://github.com/BabylonJS/Babylon.js/blob/fb232eca8e296b7cec94edc04b15fe3479638568/src/babylon.scene.ts#L3399 So at 60fps the scale is 1 Also: would love to get some help improving the doc if you have some free time:)
  33. 2 points
    https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons#boneikcontroller https://www.babylonjs-playground.com/#1EVNNB#15 https://www.babylonjs-playground.com/#PNJGW#7
  34. 2 points
    Zygomatic

    500 HTML5 games in 4 years.

    Today, we finished number 500 of our growing list of html5 games. We (Arjan Haverkamp and me, Bram Schoonhoven) started this journey at the end of 2013. Our first html5 game was a remake of our Flash game Animals Connect. Now almost 400 different games are launched on our various portals. Our next goal: 1,000 HTML5 games. If we keep releasing 2 new games a week, it will take us another 5 years. All our games can be licensed for your game portal or you can distribute our games for free. Some statistics: Our most played game is Candy House with 2.5 million game plays. We have around 6 Million game plays per month with 1.25 million unique users playing our games. Average playing time is 12 minutes per game. Interestingly enough, our games are played 69% on desktop, 16% tablet and 15% mobile. Top 5 countries: United States, Germany, Brazil, Poland and Russia. Chrome is used in 58% of the game plays. Some of the tools/technology we use: Howler.js for audio. Hammer.js for touch support. Cloudflare as CDN solution. Javascript Obfuscator for obfuscating Javascript code. Browserstack for testing the games in various browsers. Google IMA SDK for monetization. Google Analytics. Add to Homescreen for adding game to the home screen. Screenfull.js for full screen support. Webfontloader.js for loading custom (Google) fonts. Cordova for creating apps. Website2APK for creating Android apps. PNGquant and JPEGoptim for optimizing images. Wavepad for creating sound sprites and optimizing MP3's.
  35. 2 points
    JohnK

    Playground Based Tutorials

    This demo https://economist-exposures-32112.netlify.com/ is inspired by @Wingnut's thoughts about a playground based tutorial. Whilst I have copied the PG code it is meant to be something different to the PG not a replacement. For a start the user cannot edit any code or do their own thing in anyway. It might not be what @Wingnut intends so consider it as the start of a proof of concept. This means you can ignore the style and the twee alien. The code can be found at https://github.com/BabylonJSGuide/InteractiveTutorials and the README gives some information on how I messed around the PG code. Currently there is only one tutorial and here is the code that runs it. Anyone interested in helping with further development of this - you would be most welcome.
  36. 1 point
    @Wingnut I think stable is OK, but anything on latest was not working and also the playground kept switching to latest! I thought momentarily I was at a Pink Floyd concert or something - maybe just an acid flashback. sorry for the upset stomach!
  37. 1 point
    > how to do if I want to use app as a world map and only render camera. That's something you must nail in your brain: World map does not have size. Camera doesnt have size. Any pixi container does not have size. Size is second-class citizen, while position&scale&pivot are first. If something renders beyond the screen, its vertex shaders run but fragments aren't - that's how WebGL works. It does not calculate pixel colors outside the screen. Another thing that is very hard to understand if you dont clear your mind and forget about whatever way you wanted to implement it: Imagine that you have all data for big map, but not actual sprites/graphics/whatever. You maintain a "window" 2x or 3x size of camera, that is filled with your objects. Every time camera rectangle (that you calculate, pixi doesnt know about it) touches that "window" edge, you calculate new "window" centered at the camera and fill it with objects that has to be inside that area. You can re-use objects. You can also treat moving objects differently - dont apply that strategy for them, or check every time if they are in your culling "window". This strategy allows to optimize many objects with PIXI.Graphics or https://github.com/pixijs/pixi-tilemap or PIXI.mesh. There are no tutorials on that, its just common sense that you have to understand and at least try to implement. > window.outerWidth, window.outerHeight Use innerWidth.
  38. 1 point
    RaananW

    Playground Error

    The playground works for me on chrome. There seems to be a problem with firefox, I will look into that
  39. 1 point
    Wingnut

    Animation Methodology Review

    Aw c'mon, Falconoid... back hoe, first thing. Or maybe just... ISS Canada Arm 2. Aren't we talking about animating non-mesh bones, here, and then wiring the weightedVertices of ANY mesh... to those bones? So you end up with a library of common bone animations, yes? It might be somewhat overwhelming to attempt to build a library of specific animated mesh. Not sure. But bone animations need to be included, somewhere, eh? Eyeballs... just rock their gizmo rotations back and forth with a Math.sin "rocker" on the Y-axes. Probably not worth storing in an archive of often-used animations. Sure, a guy could have an animatePosX() (pitch), animateNegY() (yaw)... but eyes only rotate JUST SO FAR and they must stop. So, eyes are a "special use" of animatePosX and animateNegY... with limits. An elbow uses SAME rotation funcs, yet different limits. A front end loader, same funcs, different start/end limits. EVERYTHING has specialized/specific animation behaviors... and it will be difficult to build re-usables... because of those specifics. I once talked about mesh.spinTo(), moveTo(), scaleTo()... funcs. Those are REALLY a great starting place... for easier animation, I think (And easy to code-up in a testing playground). Mizewell do colorTo(), as well. The 'to' part might be bad/wrong. That indicates that you are animating from current orientation TO a new orientation. The way I use it below... doesn't provide a TO. Only an amount. I think moveWithCollisions is also an amount, so we should probably keep it consistent. Perhaps code-up spin() AND spinTo(), eh? Build yourself a library of mesh movers... another layer of animation API above the BJS layer. leftEye.gizmo.spin({ axis: y, radians: -1.3, speed: 25, [stopOnCollisions: true, pivotOffset: new BABYLON.Vector3(0, -0.8, 0)] }); [ optional params ] Then the new spin() / spinTo() func would use a BABYLON.Animation.createAndStartAnimation() with its automatic valueType sensing, to build/start the animation for us. Easy. And, BABYLON.Animation.createAndStartAnimation() is "another layer of animation API"... in itself. It was a late-add to BJS, created to make things easier. If we had these 3/6 new funcs, would eyeball-animating tasks... be easy? I think so. *shrug*
  40. 1 point
    Deltakosh

    Animation Methodology Review

    Hello:) not sure to get what you need from the community
  41. 1 point
    Deltakosh

    Why getBoundingInfo returns Nullable ?

    Merged! thanks guys. It will actually help me remove a lot of redundant code
  42. 1 point
    Hello this is a more general web based question. You cannot directly serve your content from the file system because of security constraints You have to use a local webserver (like IIS express or Apache)
  43. 1 point
    So far the code you've posted is really weird. Did you look at https://github.com/kittykatattack/learningPixi ? I dont know why do you need CreateSprite2D in first place, the supposed way for you is to load all textures through loader, then create stage when loader finishes everything. In stage there can be many sprites with same texture,you can take textures either using "loader.resources[name].texture" either using ""Texture.fromImage" , also there are shortcuts like "Sprite.fromImage". There's no sense in creating sprite just after one texture load. Also CreateSprite2D looks just like "Sprite.fromImage" .
  44. 1 point
    ivan.popelyshev

    Slow performance on mobile

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height"> <meta name="apple-mobile-web-app-capable" content="yes"> Also make sure that you've enabled autoResize in renderer renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, { resolution: window.devicePixelRatio, autoResize: true)); That thing changes canvas CSS, of course you can do it manually, just check that in CSS width and height are innerWidth and innerHeight respectively. Remember that "renderer.screen" and all pixi elements are in CSS pixels. - use it. "renderer.view" (Canvas) and "renderer.width" are real pixels - dont use it. As a result, with pixelRatio=2, innerWidth=640, innerHeight=480, CSS pixels must be 640x480, while real 1280x960. Check everything one more time
  45. 1 point
    jerome

    Three.js or Babylon.js for room design

    Moreover there are serious and objective reasons to prefer BabylonJS over ThreeJS : - the name "BabylonJS" is longer than the name "ThreeJS" - Deltakosh's hairdressing is more fashionable than Mr Dood's one - BabylonJS has an animated logo
  46. 1 point
    Dad72

    Three.js or Babylon.js for room design

    I tried TrreJS and when I discovered Babylon, I realized more than I would have done with TreeJS. So I suggest you in all honesty and objectivity BabylonJS. Many people here come from TrreJS and we prefer to use BabylonJS because of its simplicity and a very reactive super community.
  47. 1 point
    I'm using the preview release of Babylon (3.0. alpha) and the 5.3.-1 exporter in Blender. The Blender scene includes shape keys attached to a mesh called "Cloth": When I export to a babylon file, this information appears to be saved correctly. There is a "MorphTargetManager" entry in the file JSON that looks like this: "MorphTargetManager": { "id": "Cloth", "targets": [ { "name": "Draped", "position": [lots of numbers...], "influence": 0 }, { "name": "testtest", "position": [lots of numbers...], "influence": 0 } ] } I then load the babylon file with BABYLON in the browser, but I can't for the life of me figure out how to access this saved MorphTargetManager. Here are some things I tried: BABYLON.scene.morphTargetManagers; ==> [] BABYLON.scene.getMorphTargetManagerById("Cloth"); ==> null BABYLON.scene.getMorphTargetManagerById(0); ==> null (After setting the "Cloth" mesh to clothMesh...) clothMesh.morphTargetManager; ==> undefined (but present when I inspect the mesh object...) I feel like all the parts are there, I just can't figure out how to access the MorphTargetManager that I think should be present when I import the babylon file. Any help you can offer would be appreciated! Thanks!
  48. 1 point
    xiuhtecuhtle

    Find which face of mesh was hit

    Awesome, thanks @Wingnut and @Deltakosh. You pointed me in the right direction - what I do is cast a ray from the centre of one mesh to the centre of the other and use scene.pickWithRay to get the PickingInfo. No need in fact to get faceId to get the normal: PickingInfo has its own getNormal() method. This isn't perfect - you could quite easily conceive of a situation where two meshes collide but the ray cast from the centre of one to the centre of the other doesn't intersect the collided faces. But it's good enough for my purposes. Incidentally, PickingInfo.getNormal(false, false) sometimes returns a normal in the wrong direction. Ie the face hit has normal (0,0,-1) and getNormal returned (0,0,1). The solution, for anyone interested, is to use PickingInfo.getNormal(false, true). Here's my code: var didHitSideOfPlatform = function (ship, platform) { var ray = new BABYLON.Ray(ship.position, platform.position.subtract(ship.position)); var pickInfo=scene.pickWithRay(ray, function (item) { return item == platform }); if (pickInfo.hit) { var normal = pickInfo.getNormal(false, true); return Math.abs(normal.x) < 0.01 && Math.abs(normal.y) < 0.01; } return false; } Thanks again
  49. 1 point
    Stvsynrj

    Transparent Gradient Material

    Hi ! Another way to get something similar is to first create the gradient with alpha like this : Then, set it as a diffuse, emissive and opacity texture. http://www.babylonjs-playground.com/#LCGQ8#2 Hope this help
  50. 1 point
    Kilombo

    Mesh to follow a path/curve

    It would be a good idea to define paths using bezier curves. This is quite powerfull, theres a tutorial. http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/