Popular Content

Showing most liked content since 04/16/2017 in all areas

  1. 19 likes
    Hello community! As you know, the playground is a very valuable tool if you want to try, experiment and share your Babylon scenes. You can even search for a specific word in the whole snippet database from the documentation website, that make it easy to find and discover a new snippet. And because we know it's a very powerful tool, we worked hard last month with @Deltakosh on a better user experience when searching for playground. From now on, when saving a new playground, you'll have to fill several information: a title, a description and some tags. It will be asked only once at the playground creation, and all next iterations of this PG will share these metadata. You won't be able to redefine it afterwards. For all PG that don't have any metadata, you will be asked to fill it only once. The search has also been improved. You can search for a word in the PG code like usual, but you can also search for a word into a PG title/description, or a specific tag. The overall quality of search had also been improved (ou can now search with several words, that will return all PG that contain these words, and several bugs have been fixed). All this work couldn't have been done without @Jaskar and @DeathSoul who wrote all the code (back and front-end), and @Deltakosh of course So go try it : http://doc.babylonjs.com/playground Please helps us by reporting all bugs you can have in this thread Thank you very much !!
  2. 12 likes
    Hey team!!! I'm pleased to announce the availability of morph targets! Please read more here:http://doc.babylonjs.com/tutorials/how_to_use_morphtargets
  3. 6 likes
    Hi Everyone, Pie.Ai (alpha) is my new HTML5 multiplayer game. Jump straight into the action and eat as much as you can of everything (even other players) but don't stand in the JAM! With simple one touch control to jump, eat, fly, open locks, break blocks or attack the game is designed to offer seamless experience across all devices (phones, tablets, PC). This alpha version was developed in one month (originally part of another project, more details below). Note that I have currently limited the number of players to 12 for the alpha so you may get the "Tables full" message if it gets busy at time (you can always spectate to get an idea). Click here to play Here is what to expect in the next few days: Lootable Armor (or temp invulnerability). Improved bot AI. More skins Multi-language support Gold shop to unlock starter packs and skins (gold farming allowed). Game Design: Propeller vs Jetpack for flying (currently both items behave the same, I am thinking of differentiating them) Smash items mechanism (jumping on some items to trigger some effects) Game modes (have a few ideas that need to be tried out). Initially that game was to be part of another upcoming project (mini game for Idle Brainz) but somehow I got stuck with the top-down graphics and changed to adopt an isometric view. Since the style ended up so different from Idle Brainz, I decided that a separate standalone release would probably be better. Feedback are welcome.
  4. 6 likes
    It's a pleasure to announce a texture generator "TexGen" to be used by BABYLON developers. Due to the excellent work of @NasimiAsl 's ShaderBuilder it's possible to build a somewhat generic shader and inject the runtime properties (uniforms) on the fly. I've designed a shader-script which takes altenative inputs, generates artificial normal maps, mixes with another optionally image and outputs a really nice 3D look of the (flat) inputs. Live system available HERE (updated) Key featuers: Alternative input sources: PatternGenerator, NoiseGenerator and plain image No need for normal maps, they will be generated on the fly by the shader pattern generator on the javascript side, once generated => turbo speed on the shader side noise generator on the javascript side (Perlin,Fractal,Turbulence), once generated => turbo speed on the shader side Preset concept, all shader/pattern/noise-parameters can be reduced to a handful numerical settings (JSON-Format) Full procedural, images can be mixed optionally Here are some preset patterns from the noise generator and some other Examples. I hope you find this interesting... Greetings, javalang PS. a short description to the LIVE-System (from right to left): on the upper right you find a slider with three input-sources. The next menu are the properties for the pattern generator. On thenext menu are the shader properties mainly for the normal map creation and a slider "balance" where you can mix another image to the input. And on the left side is the noise menu (I prefer preset9 ), there are endless more to be detected... Full procedural image with noise: Mixed with another image: Input source: single image! Input source: pattern generator Noise mixed with image:
  5. 5 likes
    Hey team, I've just added a small page here: https://github.com/BabylonJS/Babylon.js/tree/master/tests/validation (It can be run directly from VS code) This page will run some visual tests against the current babylon.js library:
  6. 5 likes
    Hello, As some of you may know, we have been forced to introduce a breaking change in the way to use the physics engines starting with v2.4. We try as much as possible to avoid breaking but sometimes it can help introducing a much better way to achieve something. This is the case for physics as now, the physics impostor and its associated mesh are better linked. To better understand why, extract from the doc: "The physics impostor synchronizes the physics engine's body and the connected object with each frame. That means that changing the object's position or rotation in Babylon code will also move the impostor. The impostor is also the one updating the object's position after the physics engine is finished calculating the next step". In previous implementation, we had a lot of users questions & feedback that didn't understand why moving the mesh wasn't doing anything once it was transformed into a "physic object". Please read our documentation to better understand how to use physics in Babylon.js: http://doc.babylonjs.com/overviews/using_the_physics_engine I've then updated my tutorial and the default sample of our main page: - Understanding collisions & physics by building a cool WebGL Babylon.js demo with Oimo.js: https://www.davrous.com/2014/11/18/understanding-collisions-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js/ - Main sample: http://www.babylonjs.com/Demos/Physics/ Thanks! David
  7. 4 likes
    There are a lot of combinations by the two input channels "generator-input" and "mixing-input". The following scene is showing some combinations with two pattern/noise-settings and one image, live system HERE.
  8. 4 likes
    Here's one with some 3D assets loaded: http://www.babylonjs-playground.com/#6PVF0Y#5
  9. 4 likes
    holla guys! i made a simple multiplayer game, but its's obviously still in progress. physics ball-pad
  10. 3 likes
    I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my github.io link as a base starting point for creating games with Phaser using TypeScript taking advantage of the Phaser npm module and Webpack for building (which I couldn't find a template for, so I made one). It includes the typical 3 states (boot, preloader, title) to show the flow of a Phaser game. It also includes a watch task that watches the project for any changes and recompiles, and another task to run a live server that refreshes automatically after a build. It only takes a few seconds and a couple commands to get going (after having node.js installed)! It's platform agnostic (I've tested on OSX, Ubuntu running on a Chromebook, and Windows 10 in a VM running on OSX and had zero difference in behaviour). Hopefully someone here will find it useful, or at least take a look and let me know how to improve it (I plan on using this template and it's evolutions for all my future Phaser projects)!
  11. 3 likes
  12. 3 likes
    Let me try to de-mystify this. Imagine you're driving in a car that only moves when you close your eyes. The only way to drive such a car would be in small steps - first you'd close your eyes and let the car move forward a bit, then you'd open them, pausing the car, to correct your steering, and then you'd close them a bit more, etc. The implications of driving a car like this would be: Opening your eyes more often makes it easier to ensure you stay on the road But the more often you open your eyes, the more the car is stopped, so it takes longer to get anywhere On a straight road you can get away with closing your eyes longer, but but on a curvy road you'll need smaller steps Stepping a physics engine works exactly the same way - first the engine blindly moves the simulation forward a bit, then it pauses, opens its eyes, and tries to correct anything that's gone off track. And as in the previous analogy: Smaller timesteps always make the simulation more accurate But smaller timesteps mean you must step the engine more often (assuming you want it to run at real-time speed) Simpler simulations can get away with longer timesteps; more complex scenes will need smaller ones Hope that helps take the magic out of things! (Note though - all that theory is just for explanation. As a practical matter, since Babylon steps the physics once per render, almost everyone should almost always use 1/60 as their timestep, or else they'll effectively be running their physics in slow-motion or fast-forward. So when advising beginners, I'd encourage you to just tell people to set the timestep to 1/60 (if it's not set that way by default) and never ever touch it.)
  13. 3 likes
    Hi again @Jack Morris, thanks for the kind words. It sounds like you understand these systems quite well. Good job. Force-moving a mesh that has a physicsImpostor... has been a problem for a long time. I say "force-moving" because... previously, there was only two ways to "position" a Physics-Activated Mesh (a P.A.M. ? heh) 1. .applyImpulse(directionAndMagnitudeVector3, contactPointUponMeshVector3) 2. impostor[.body].setLinearVelocity(directionAndMagnitudeVector3) But recently, BJS superhero @davrous made some changes and told us about it... here. Now, it appears that we CAN force-move the PAM shape/mesh, and the underlying physicsImpostor will obey. Keep in mind, though, that the PAM's impostor... could STILL have linearVelocity and angularVelocity AFTER the PAM-positioning. It might start moving again, after re-position... due to residual stored energy/inertia. In this forum topic, I do some minor repairs to a physics playground. Click on ground to tilt it, and start the ball rolling. User issue was... ball is "violent" (out of control) after it is returned to starting position... after falling-off ground. When the ball falls-off the ground, it has angularVelocity (rotational roll), and as it fell, the gravity caused it to highly-increase its downward linearVelocity, too. It had LOTS of energy remaining upon the impostor... when it was re-positioned. SO, look at the render loop... lines 43-56 in that playground. See lines 50 and 52 killing the impostor's energy? It works. When the ball returns to starting position, it falls straight down with no spin. Yay! Physics pro @fenomas had an interesting idea for force-moving PAM's... too. I've never tried it. He said... loose quote... "It might be best if you use a physicsJoint to attach the PAM's impostor... to another .visibility = 0 PAM (possibly positioned directly above the PAM you want to move). Then move the invisible PAM (not the visible one), and let the joint pull the visible PAM... to the new position." This could be considered a "soft move" as opposed to a "hard move", because.... joints have some flex (slop in their bearings). I thought his idea/info was interesting and worth consideration. It has ALWAYS been difficult to make a PAM... move a CERTAIN DISTANCE with setLinearVelocity or applyImpulse. When tried, they usually start with a fast velocity, and then the PAM's mass and friction slowly bring the PAM to a stop. - REAL slowly, depending upon mass (which can be adjusted as a PAM nears its move-destination). I repeat this... mass values can be changed WHILE the PAM is linearVelocity-moving. THIS might be easier for you... than creating "gravity wells" around the PAM at move-time. ALSO... consider this. A PAM with a continuous applyImpulse or linearVelocity from the bottom ... can LIFT the PAM a bit, and thus... reduce its friction against ground. *shrug* AS the PAM nears its move-destination, reduce the bottom-side thrust, and the friction will start increasing (but not for spheres... see below), bringing the "slightly-floating" PAM to a stop NEAR its intended destination. No promises, though. Davrous' new move-the-PAM modifications... MIGHT change all this. In OTHER situations... SOME users have placed invisible PAMs at the destination point, and the moved PAM collides with them, and stops (sometimes with a small amount of bounce/restitution/recoil, unfortunately). Stopper mesh. But sometimes, the users "register an onCollide function" on the impostor. THEN, when the moved PAM collides with the invisible "stopper PAM", they immediately kill energy (in their added onCollide func)... to minimize recoil from the impact (and to sometimes change mesh color upon impact). UNFORTUNATELY... we have seen indicators that these registered onCollide wedge-in functions... don't trigger on EVERY collide. SO, we have seen inconsistency in using the registered onCollide. A recent ping pong table/paddles project was undertaken by user @Abdullah, and you can find my posts about THAT onCollide inconsistency problem... by doing a forum search for 'onCollide'. (Just read the first 5+ returns that were posted by me.) In that project, we could easily see the inconsistency of the physics-registered onCollide... as the ball bounced across the tabletop. SO... I'm not sure if a physics-registered onCollide is a good way to determine if a visible PAM has collided with an invisible (movement-stopper-) PAM. (or for any other reason to monitor-for physics collisions) Perhaps, setting restitution to ZERO on the moving PAM and on the invisible stopper-PAM... would eliminate any "recoil" from the collision, with no need to register an onCollide on the impostor. No color-changes-upon-impact that way, though. There's one last thing you should know, which was also taught to me by Fenomas. Spheres do not have enough surface-area-contact with the ground or other flat surfaces... to have any significant friction. Then physics pro @RaananW taught us that we can do something like... rollingball.setLinearVelocity *= .99 ... INSIDE the renderLoop. There's more to it than that... but perhaps you understand. You want to slowly reduce all three Vector3 linearVelocity values... by a small amount in each renderLoop... until all three axes-forces are at 0. The ball has stopped... due to... "fake friction" or "wind resistance". Otherwise, them darned sphere impostors roll and roll and roll, no matter their mass, and no matter their friction. Okay, how's that for a pile of TOO MUCH INFO? Do you have a brain tumor, yet? I hope not. The good thing about all of this... the experimenting is usually pretty fun. But these "anomalies" can sure cause hell for a production team on a budget, eh? Sorry. We're still blazing webGL trails and discovering new horizons, and perhaps YOU could discover the "breakthrough" that changes it all. Please share your discoveries, when/where you can. Thanks! Make suggestions (and actual edits) for the physics docs, too. We can use all the documentation and test-case help we can get. And of course, write back, here, or in new forum threads... we're here to help. We don't ALWAYS have the answers, but we usually have some ideas. Be well, party on! @Jaskar - thx for the likes. It's good to see you again! I hope things are going good for you.
  14. 3 likes
    here is an example of how you can reset the same tween without adding a new one: The key parameter that determines where the tween continues is found in the timeline property of the tween : tween.timeline[0].dt . If you reset that to 0 it will start from the beginning. The example has a bit more features where it resets the tween when pressing the A button. However, its more tedious to work this way and the simplest way out is to add it again, but if you really require the same tween then this could be a solution.
  15. 3 likes
    And there is a light theme as well !
  16. 3 likes
  17. 3 likes
    Hi, we are happy to announce a new (preview) release of Phaser Editor! There are a lot this time: The so waited MacOS support! Visual prefabs (sprites and groups). Visual editor support for states and preloader states. Some TypeScript support. Assets refactorings (great for larger projects) New Project wizards with more options (like include demo assets or use TypeScript). Updated Phaser Editor demos with prefabs and multi-levels. Git UI integration. And lot of fixes and enhancements. Many of them requested by Phaser Editor users (that's great, so many thanks!) Read the release notes. Arian
  18. 3 likes
    A 3d reference grid using BABYLON.MeshBuilder.CreateLineSystem http://www.babylonjs-playground.com/#P6XHUB
  19. 3 likes
  20. 3 likes
    http://www.babylonjs-playground.com/#1ZEABJ#14 http://www.babylonjs-playground.com/#1ZEABJ#16 planet
  21. 3 likes
    I'm pleased to present the Matrix- and ObjectCloner, here are some playgrounds: ObjectCloner MatrixCloner RadialCloner combined with MatrixCloner if you want to play with the RandomEffector. you can do it here. Have fun
  22. 3 likes
    A Brunch skeleton for making games with Phaser. (Why Brunch?) Choose your own adventure with CoffeeScript, ES6, TypeScript, or plain JS. server live-compiles and live-reloads minifies (in production mode) makes texture atlases with glue fast builds NPM support easy! npm install -g brunch && brunch new <project> -s samme/brunch-phaser github.com/samme/brunch-phaser
  23. 3 likes
    sorry, I should be more didactic :-) Well, it's a good thing to remember that : Javascript is monothreaded and the variable scope is the function in what it is created. So if some variables are created each call to a function, they have to be cleared by the garbage collector once this function is over. And the garbage collector will use the same global javascript process than your code, so some precious CPU cycles that you would prefer to keep for yourself. Thus, in general, we try to avoid to create new objects (vector3, arrays, etc) in the render loop, what is in BJS a call to the function registred with registerBeforeRender() every 16 ms (60 fps) to keep the allocated memory as constant as possible, so to keep the GC far away our little business
  24. 3 likes
    Thanks josh, but that's not really true. I just have a great toolbox called babylon.js, which lets me look like a hot coder, even though I suck. But YOU are pretty amazing... that's for sure. Well gang, I guess it's time for another weird Wingnut demo, so here we go! I went looking for a way to translate an object with a setPhysicsState... without using applyImpulse. I didn't find it, but I found a strange workaround that can be done in an animate function... and I used it in this demo. Move the mesh, set its physicsState AGAIN, set its physics link to the top of the chain AGAIN, and go. Yes, setting a physics state and physics link inside an animation loop... seems strange, but we like strange. After that worked, things just got totally out of hand with the experimenting fun. Fun experimenting lines are... line 48 - set how many links in the chain line 51 - what kind of mesh for each link line 55 - adjust the restitution as high as 20 for large explosions when the chain collides with itself line 55 - change from SphereImposter to BoxImposter or PlaneImposter lines 121 and 126 - speed and sweep of the 'stead', the green box that the chain is trying to remain linked-to example: line 121 - stead.position.x += Math.cos(alpha)/4; line 126 - alpha += .03; A person could mess with scene.gravity, too! Physics linking is TOO MUCH FUN! Be careful! Remember to eat and sleep!!! Party on.
  25. 3 likes
    All Graphics objects by default have a 10 pixel padding. To fix this just do: this.completionSprite.boundsPadding = 0;
  26. 2 likes
    Hi, Thank you for your report ! These files are missing due to a server migration I releases a workaround that should be up in few minutes, but a clean fix will be set in few days.
  27. 2 likes
    I have just reverse engineered what happens to a Hair particle system when it is converted to a mesh. No matter how many "segments" you say to use when it is a particle system, you get a block of 65 vertices (for 64 segments) for each strand. In this picture of a system with 2 strands: The output looks like this (already converted to left handed): vert: 0 location: -.7644,1.2222,-.8473 vert: 1 location: -.7644,1.2549,-.8473 vert: 2 location: -.7644,1.2904,-.8473 vert: 3 location: -.7644,1.3285,-.8473 vert: 4 location: -.7644,1.3692,-.8473 vert: 5 location: -.7644,1.4122,-.8473 ... vert: 64 location: -.7644,4.7778,-.8473 ========================================= vert: 65 location: 1.2222,.1286,.33 vert: 66 location: 1.2549,.1286,.33 vert: 67 location: 1.2904,.1286,.33 vert: 68 location: 1.3285,.1286,.33 vert: 69 location: 1.3692,.1286,.33 vert: 70 location: 1.4122,.1286,.33 ... vert: 129 location: 4.7778,.1286,.33 Clearly 65 data points for a 25,000 hairs is not going to be practical for a line system. In this example, it only really needs 2 points per strand. Any ideas on a way to reduce the data points between the first and last, based on some kind of straightness between sets of 3 points tolerance? When the strands are not straight, pulling out data points are going to make them look jagged, but with enough hairs, might this not be obscured? Especially since you are probably not going to get this close. Like most of my topics, I'll probably be talking to myself once again.
  28. 2 likes
    Yeah. The key to understanding physics engines - the thing the tutorials don't mention - is that real physics engines are about 10% physics and 90% constraint solving. That is, it's really easy to move a thing around and and solve collisions between it and static objects - that's why "mesh.moveWithCollisions" can be done in a few lines of code. But once you have two things moving around, then solving one collision can create another - at which point the problem stops being physics and starts being constraint solving. And this is why moving things around is best done with joints. When you move something around with a joint you're giving the constraint solver a constraint, which of course it knows how to handle. When you manually change a body's position or velocity, in general you violate constraints that the solver thinks it already solved, which is something it's not well-equipped to handle.
  29. 2 likes
    Hi, i was wondering if anyone had got babylon-navigation-mesh working with some terrain thats dynamically generated? I have implemented @NasimiAsl infinity terrain but when ever i try and use the above library the browser just crashes. Any help would be great.
  30. 2 likes
    Do File->Open of a format you do have. PNG probably the best starting point. Do Edit->Encode menu item. It brings up Encode Texture in the Multi-doc area. Select as highlighted. Fast is fine for etc1. Slower settings can appear to stall. When encode is complete, a 2nd version of file appears. Do File->Save.. Make sure to pick *.ktx as the type.
  31. 2 likes
  32. 2 likes
  33. 2 likes
    Have you considered using scene.registerAfterRender (or scene.registerBeforeRender) to do the animation. This PG shows a very simple use http://www.babylonjs-playground.com/#92EYG#10 IMHO to do this you would need, in the registerAfterRender function call, to get the vertex data from the existing mesh, dispose the existing mesh and form new vertexdata by adjusting existing vertex data adding/subtracting new vertices and then create a new mesh with the new data. Everything I know currently about vertexdata for an existing mesh restricts you to updates only on the existing vertices. You probably know this already but just in case here is a tutorial about creating a custom mesh Good luck EDIT as an alternative use a sequence of animations on your 3 meshes http://babylonjsguide.github.io/basics/Starter http://babylonjsguide.github.io/basics/Combine.html http://babylonjsguide.github.io/gamelets/Sequence
  34. 2 likes
    We do not want to only ask Microsoft as it is a community Open Source project. Microsoft is already supporting the project by offering database free hosting for our playgrounds and for the search engine
  35. 2 likes
  36. 2 likes
    Sorry it is taken so long to get a reply. Hopefully, if I have understood what setFromUnitVectors does, the following does the equivalent where v1 and v2 are unit vectors var angle = Math.acos(BABYLON.Vector3.Dot(v1, v2)); var axis = BABYLON.Vector3.Cross(v1,v2); var quaternion = BABYLON.Quaternion.RotationAxis(axis, angle); var matrix = BABYLON.Matrix.Identity(); BABYLON.Matrix.FromQuaternionToRef(quaternion, matrix); As you have not given the context for use I have not tested the above.
  37. 2 likes
    Would you mind sending me the character model you are working with and ill try make it work in new system as well ? If you can't or won't send model that kool too, I just thought i would offer to help clean it up for babylon toolkit use
  38. 2 likes
    Why do you think of this : the last search is always displayed in the corresponding field, ONLY if the search results are 0... Instead of a button not easy to understand at first sight. Thoughts ?
  39. 2 likes
    @MackeyK24 http://www.babylonjs-playground.com/#Y0RQ2F#2 http://www.babylonjs-playground.com/#Y0RQ2F#7 short Code vec4 getTileFromAtlasMap(sampler2D txtRef_0,vec2 tile ,vec2 pos,vec2 size,vec2 SIZE,vec2 vuv){ vec4 result = vec4(0.); float uv_w = size.x / SIZE.x; float uv_h = size.y / SIZE.y; float uv_x = pos.x / SIZE.x ; float uv_y = 1.- pos.y / SIZE.y -uv_h; tile.x = tile.x*uv_w*0.5; tile.y = tile.y*uv_h *(size.x/size.y)*0.5 ; vec2 newUvAtlas = vec2( mod( vuv.x*tile.x , uv_w ) +uv_x , mod(vuv.y*tile.y ,uv_h)+uv_y ); vec2 edgeUvAtlas_x = vec2( mod( vuv.x*tile.x +0.5*uv_w , uv_w ) +uv_x , mod(vuv.y*tile.y -0.0*uv_h ,uv_h)+uv_y ); vec2 edgeUvAtlas_y = vec2( mod( vuv.x*tile.x -0.0*uv_w , uv_w ) +uv_x , mod(vuv.y*tile.y -0.5*uv_h ,uv_h)+uv_y ); vec2 edgeUvAtlas_xy = vec2( mod( vuv.x*tile.x -0.5*uv_w , uv_w ) +uv_x , mod(vuv.y*tile.y -0.5*uv_h ,uv_h)+uv_y ); vec4 color_2_ = texture2D(txtRef_0 ,edgeUvAtlas_x.xy*vec2(1.,1.)+vec2(0.,0.)); result = vec4(color_2_.rgb , 1.); vec4 resHelp_2_ = result; vec4 result_1 = vec4(0.); result_1 = result;result = resHelp_2_ ; vec4 color_3_ = texture2D(txtRef_0 ,edgeUvAtlas_y.xy*vec2(1.,1.)+vec2(0.,0.)); result = vec4(color_3_.rgb , 1.); vec4 resHelp_3_ = result; vec4 result_2 = vec4(0.); result_2 = result;result = resHelp_3_ ; vec4 color_4_ = texture2D(txtRef_0 ,edgeUvAtlas_xy.xy*vec2(1.,1.)+vec2(0.,0.)); result = vec4(color_4_.rgb , 1.); vec4 resHelp_4_ = result; vec4 result_3 = vec4(0.); result_3 = result;result = resHelp_4_ ; vec4 color_5_ = texture2D(txtRef_0 ,newUvAtlas.xy*vec2(1.,1.)+vec2(0.,0.)); result = vec4(color_5_.rgb , 1.); vec2 edge = vec2( pow( 2.*abs((newUvAtlas.x-uv_x)/uv_w -0.5), 3.), pow( 2.*abs((newUvAtlas.y-uv_y)/uv_h -0.5), 3.) ) ;vec4 resHelp_5_ = result; vec4 result_4 = vec4(0.); result = vec4( edge.x ,edge.y, max(edge.x,edge.y) ,1.); result_4 = result; result = resHelp_5_ ; if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48 && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) < 0.5 - -0.48 && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48 ) { vec4 oldrs_6_ = vec4(result);float al_6_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))))/1.0+(0.48))); float l_6_ = 1.0-al_6_; result = result_1 ; result = result*al_6_ + oldrs_6_ * l_6_; } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) < 0.5 - -0.48 && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48 && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48 ) { vec4 oldrs_7_ = vec4(result);float al_7_ = max(0.0,min(1.0,(((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))))/1.0+(0.48))); float l_7_ = 1.0-al_7_; result = result_2 ; result = result*al_7_ + oldrs_7_ * l_7_; } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48 && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48 && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48 ) { vec4 oldrs_8_ = vec4(result);float al_8_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/3.0+(0.48))); float l_8_ = 1.0-al_8_; result = result_3 ; result = result*al_8_ + oldrs_8_ * l_8_; } return result; } getTileFromAtlasMap( texture, [ tile x,y ], [ texture Position In AtlasMap ], [ inner texture Size In AtlasMap ] , [ AtlasMap size ] ,vUV)
  40. 2 likes
    Hey @scheffgames, quick answer is that most of the techniques you use are more applicable to larger applications, its one of the first things Dan Abramov (creator of Redux and a big speaker on bringing functional techniques to JS and web app development) often mentions when tackling that question. There is usually a little more initial overhead when employing functional techniques but the savings you get further down the line only become more significant as an application grows in maturity and complexity. The initial overhead is sometimes more boilerplate (this is solved by the glut of top-quality modules and libraries over the last year or so hitting the ecosytem) but usually in more thought going in to data structures and data flow throughout an application (which is hardly a bad thing). The key decisions here help to structure what your app will look like and decouple various parts of the system you are creating, if done right (and there are lots of good architecture examples out there when you dig in to it) then you'll find your app more resilient, more thoroughly tested and easier to adapt if (when) requirements change down the line. Employing pure functions (as an example) means you can change that function as you need and its super easy (often trivial) to test, plus, the real kicker, you know what is happening with those functions, you know what goes in and what comes out and so you can not get caught out by making changes and creating bugs in other areas of your code. Functions that touch other areas are your side-effect generating functions and you'll know about those and closely monitor them, preferably employing far more rigid and larger tests to deal with them. As a quick case study: my current day-to-day is not gaming, its creating a major ecommerce platform, its a client-side (well, isomorphic) application driven by restful apis and after pretty thorough due diligence we hit the functional bandwagon hard. After several hard months and some changes of requirement our app is nice and resilient to those changes, we can develop with agility as our app is highly decoupled. A huge portion of our application is now utility functions, small, composable, pure functions that we then use to create more complex data flows throughout our app. Performance is incredible. So far (we're close to shipping) we've hit no real awkward bugs such as data inconsistencies or race conditions because our architecture makes it hard to slip into those pits. See this great article on the pit of success, our React/Redux stack (with some complimentary stuff) and our architecture choices have meant that we continue to reap the rewards of falling into the pit of success (we toyed with full Elm but too risky for us). There is no reason a game application would not receive the exact same benefits. Some of the things I mention (such as data consistency and data flow) can be managed in a wholly OOP world too (of course they can, its the predominant programming style for many many years) but its just that functional techniques often end up this way with no additional effort, you fall into that pit of success simply by following the rules, it really feels like your systems are working for you, which is a wonderful situation to be in. It's rare I've thought 'this is a ballache to do with functional stuff', but, when that happens you make a decision on it and employ the right tool for the job (a key skill for developers, well, for anyone), JS supports both styles well (yes, we can bikeshed on truly supporting either but probs not helpful right now!). The flip side is some things are more difficult, delivering data on demand can be computationally expensive and wasteful, but, on that, I think we're all aware of the dangers of optimising too early, even for something very computationally expensive like your average game (particularly fast moving ones) you might be surprised at how far you can get before perf becomes a problem and you might find some things you're worried about initially never become a problem. Test for performance early and make your decisions based on those tests, two bonuses here, you can measure to find out where you can get the most bang for your buck regarding changes and you can monitor those changes to make sure they're doing what you think (again, these concerns/solutions aren't functional exclusive, you should be doing these no matter how you write code). Moving back to the case-study: we're initially targeting mobile web and I was extremely worried about perf given the metric ton of JS we're running to do anything, but, we monitored early and performance easily exceeds anything I've been involved in previously which is also coupled with development speed—both our app running perf and our development cycle performances are amazing and I wholly contribute this to our initial arch/tech choices. tl;dr Functional techniques can often seem overkill or long-winded initially but come into their own as an app grows in complexity, meaning that larger projects benefit more from this approach. As with all things, do your research, monitor early, and make your decisions based on that. There is no silver bullet, functional or OOP, the good news is, even if you go for an OOP arch you can slip in plenty of functional stuff that can help you and vice versa. Know your tools and employ wisely!
  41. 2 likes
    I'm fully on the functional bandwagon, its a wonderful way to program. If you've ever experienced a race condition or problems with synchronising data structures then you'll know how painful they are. Functional is hardly a silver bullet here but if you follow along and do things properly with functional techniques then you rarely run in to these sort of difficult and time-consuming errors. At its essence functional program aims to eliminate (or reduce) transitional state, as an example, if you have a data structure representing a unit in your rts game then its likely you'll want to use bits and pieces of the full unit data in difference instance i.e. you'll want some of it for displaying an update view, you'll want some different bits of it to display in a tooltip, you'll want very different bits of it for when it attacks another unit. Functional languages force you to create transformation functions to change that data into what you want, the key here is that they force you to do it when you want it and get rid of it afterwards (JS doesn't force you at the language level but you can still use the theory, JS does have language support for most functional techniques making it a good candidate for writing in a functional style, it was designed this way too, not just a coincidence). By enforcing transforms to underlying data structures it pushes you down a few key avenues: * Each view on to the data is independent, they request data when they want it so that it is fresh, there are no syncing issues here, data is represented once (single source of truth) and can be minimally represented as your transforms can add specifics for their use-cases. * Changes to data are carefully managed (many functional languages enforce this with immutable data structures) so that it can become hard (or even impossible, depending on the language) to have data inconsistencies. * Race conditions aren't necessarily eliminated but as you're managing changes and actions in a single place its easy to manage things so you never hit a problem caused by it. You can't really do the above with OOP because OOP involves writing and creating objects (and classes usually) and having all this state hanging around, see the banana-gorilla-jungle explanation. Some of the most useful functional techniques can be adopted even if you're in an OOP world though. Creating pure, or referentially transparent, functions is a boon for developers. Pure functions take an input and produce an output based only on their inputs, they effectively do not touch the outside world, they are idempotent, i.e. you know that you will always get the same output given the same input/s. This means you can reason about what that function does, you can understand it fully by taking it in isolation, you don't have to understand the system around it to understand what it does. They become easily testable so any bug or error states can be discovered by automated unit tests but if one does sneak through your tests and you find you need to make changes later then you can do so easily because you know you won't create issues elsewhere in the code. This is absolutely golden. The downside is of course performance. For certain use-cases you're potentially running the same transforms multiple times when you don't need to i.e. being inefficient. Functional programming likes to do things on demand but games often want to work with an update loop as things are often changing very frequently so sometimes some transients states hanging around reduces load (at the expense of far greater complexity). This is the biggest problem I've faced for fast paced games using these techniques but you might be surprised at how far you can get and there are lots of techniques for improving this stuff without creating more state. The 2nd biggest problem is that many libraries out there don't want to play nicely with functional techniques, this isn't so much of a problem for the general web app/website world as there are numerous libraries out there for those use cases now but it is a problem for many games-related modules/libraries.
  42. 2 likes
    Thanks so much everyone!! This is exactly what I needed.
  43. 2 likes
    Hi guys, welcome @rohapa. May I add... ...cameras can be parented to (invisible) mesh. Here is a fancy playground that uses this method. http://www.babylonjs-playground.com/#2FD2SC#0 MOVE mouse left-right (atop canvas), and see the camera z-rotate (banking), an unusual movement for any BJS camera. A blank AbstractMesh named node is being used as the camera 'gizmo' (see line 45). DRAG left - right... to change the direction of node and thus, also change the direction of the camera. In the renderLoop (lines 66-76), lots of manipulation happens to node, which automatically affects node's child... the camera. Point is, you can animate a box (or plane or blank mesh) in ANY way, and that mesh CAN be a parent of a camera. This method opens ALL avenues for camera animation. Ok byeeeeeee.
  44. 2 likes
    Basically, in real life, highlights can be seen on top of transparent surface preventing to see through like your computer screen reflected on your window shield by night or car shield reflecting sun... Trying to emulate that, we by default in the material force displaying highlighted part of transparent surfaces (automatically increasing opacity in front of the luminance of the highlights either radiance from environment or specular from scene lights). You can disable this by setting those both parameters in the material (they are true by default): useRadianceOverAlpha = false and useSpecularOverAlpha = false
  45. 2 likes
    Greetings! I see quite often around these parts and in further fields, that there are constantly people who are just starting out asking how to add networked multiplayer functionality to their HTML5 games. I was one of them, and I hated the near absence of practical explanations that were written in concise, plain-English, yet still detailed, of how to get started. So, I made a simple game example/template using Socket.io and Phaser, and documented the hell out of it. Almost everything gets a few lines of comments to explain what is doing what, and I haven't assumed any prior knowledge, aside from core JavaScript and being able to set up NodeJS and how to view the game in a browser. The main focal point is using Socket.io, as the game framework can be easily interchanged to one of your preference. Hopefully this will save a few hours and headaches for people who don't have a clue what they are doing. https://github.com/Arcanorum/basic-networked-multiplayer-game
  46. 2 likes
  47. 2 likes
    Good news @MrVR, I found that using video texture for panoramas it's possible!!!! Look at https://threejs.org/examples/webgl_video_panorama_equirectangular.html So, now we need to wait for BJS "big dogs" (as @Wingnut call them) to know how to do with BJS...
  48. 2 likes
    Looking through the daily routines of some of the most creative and productive people from history (e.g. in infographic form) there is one thing that they have in common that is having a bit of resurgence recently which is 'down-time'. From that infographic and ones like it, specifically that means exercise (blue) and social (yellow). Don't underestimate the importance of time away from your obsession.
  49. 2 likes
    @webGLmmk looks like everybody have the same requirements these days, good I'm glad to see that. In this particular case, I totally understand that it's mandatory for your guys. In order to answer this need I've developed the "designSize" feature, which lets you specify the "ideal" size of your ScreenSpaceCanvas, then position every primitives inside regarding this size. After I will scale the content to make sure it fit the "real htmlCanvas' size". You can find more info to the latest update of this post and I encourage you to monitor this thread as I try to post only when new features/bug fixes are release, for you to be aware of what's new. And I try to make people creating specific topics to prevent unnecessary notifications. Read about the feature and tell me if that's what you were looking for or if there's something I can do to make it better. I didn't write a documentation about it and I think I should because many people are willing to use this mode now.
  50. 2 likes
    Ok, this sample may be the most interesting for your case: http://babylonjs-playground.com/#1N9RJY#5 You only need to create one Canvas which will cover all the screen, no matter the device, if it's resized, etc. You don't have to care about that: if you don't set a size for the Canvas it will always fit the whole screen/viewport. What you need to do after is create Group2D objects, children of the Canvas, consider a Group2D as a "mini Canvas", in fact, that's what it is. Each group will contains all the display object for your players, etc. I highly recommend you to create a make that create the group and all its content for say a type of player (ogre), and do the same for other types.