Leaderboard


Popular Content

Showing most liked content since 03/30/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. 17 likes
    Hello team! Since the very first version of Babylon.js materials are working in a pull mode. This means that every time a mesh needs to be rendered, its material has to ask the engine about a lot of information in order to compile the best shader possible for the given mesh. For instance, here is an incomplete list of states required to compile a shader: - Lights affecting the mesh (taking in account inclusion and exclusion lists and masks) - Textures and channels (including associated parameters like parallax for bump or reflection mode for reflections) - Fog, clip planes, point rendering or wireframe - Mesh attributes (does the mesh contains UV? tangent? colors?) This leads to a pretty expensive function named Material.isReady. Due to the previous reasons, the function is really CPU intensive. Here is for instance the profile of the "materials" playground: The highlighted functions are part of the IsReady root function. The scene is extremely simple and you can see that the isReady is taking almost 13% of the CPU time While it was ok because of the complexity of the task assigned to this function, I decided recently to change it to a clever model: The push mode. When a material is in this mode, instead of asking on every frame for every state, the states will push updates to the material when they change. Obviously the performance boost is immense. Look at the same profile with the new mode: We are now at 2.51%. On bigger scene like Sponza, this function could take up to 30%: And now with the new mechanism: ONLY 3%!!!!!!!!!! But obviously with such a big change, there will be some bugs.. So please use this thread to report any issue with StandardMaterial. If everything is fine, I'll update the PBR to push mode in one or two weeks. Associated PR: https://github.com/BabylonJS/Babylon.js/pull/1959/
  3. 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
  4. 11 likes
    After more than 2400 hours of work, I am delighted to present the first version. I hope I have nothing to forget. So there is an available site. From the website you can access the store which will allow you to download the software. Registration is required to download and to allow me to have statistics on the number of people who have downloaded. A forum is also available with tutorials on the use of the software. And a bug reporting page is also available on my deposit. This first version is to be used as a version discovery, tested and taken in hand and to have your opinions, suggestions. She is not ready for production. Certain things in the game are not complete. For example, the animations are not set correctly via the editor and therefore involved, the walking animation is not working as it should in game. But once properly set in the editor, it works. This is not a bug, but just a bad setting key animation that I will settle soon. After downloading, you will have to install the software with an interface provided for this. You will need to use a local server to operate (EasyPHP is perfect for this) There is a procedure to follow the tutorials forum. Do not hesitate if you have any questions on the forum (in English or French). The site, the shop, the forum and the publisher have a French and English translation Site Link: http://www.heroonengine.actifgames.com/ I welcome you and good discovery.
  5. 8 likes
    Hey guys, I've made a furniture designing app using babylon js. Go here to start customizing -> http://portfolio.meble.design/app/ Go here to view a premade model: http://portfolio.meble.design/app/?conf=10041720 or http://portfolio.meble.design/app/?conf=19031726 or http://portfolio.meble.design/app/?conf=19031728 I've also designed a furniture model in the app and then produced it myself to fit into my apartment, it looks like this -> http://i.imgur.com/E06iE5B.jpg
  6. 7 likes
    Hi! I just released a Vscode extension for Babylon.js, that can be used to display the content of a babylon file in a preview panel. Basically, it's a local sandbox You can check it out here: https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer I plan to add more features: quickly check meshes names, materials, cameras, lights... In order to have a quick links glance at the content, and being able to use it in my game. Feel free to give me feedback, it's always appreciated You can also let me a review on Vscode marketplace Thanks!!
  7. 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:
  8. 6 likes
    It's a pleasure to present my first mini-use-case of the ClonerSystem: http://www.babylonjs-playground.com/#1WRUHY Play with the controls, have fun
  9. 6 likes
    Hi folks, Maybe some of you followed this topic for while : Well, now I'm proud to announce the fully documented first release of the Dynamic Terrain Extension : https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain Its documentation is one the same repo : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainDocumentation.md Have fun Some more demos and features to come
  10. 5 likes
    http://www.babylonjs-playground.com/#1QC9DP#143
  11. 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:
  12. 5 likes
    I'm happy to present to you Phaser Quest, a top-down real-time multiplayer adventure made with Phaser and Socket.io. Explore the map, find better equipment, fight monsters and defeat the final boss, alone or with friends! It was for me a practice project, and is a reproduction of Mozilla's Browserquest. Hopefully the source code will interest you, as the project integrates of a lot of Phaser features together (such as tiled maps, text input, tweens, animations, sound, click handling, camera management, etc.), as well as pathfinding using Easystar.js. It is also an example of how a Phaser client can be made to interact with a Node.js server using Socket.io. On my website, I have written a few articles about some aspects of the game. They are mostly concerned with networking for the moment. If you'd like me to write an article explaining how I accomplished this or that in the development of this game, feel free to ask, I'm always happy to help. In addition, I'm interested in any feedback you might have, it's always valuable, especially with future multiplayer projects in mind.
  13. 4 likes
    Hi Everyone, GunFight.io - original HTML5 multiplayer game. Select your team Counter-terrorists or Terrorists and have fun! Play Made with: Phaser + NodeJS server framework - custom version of Colyseus scheduled to add: 1) Multi-language support 2) May be bots? 3) Mobile device support. 4) More emotions. Any suggestion and feedback are welcome.
  14. 4 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
  15. 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.
  16. 4 likes
    Here's one with some 3D assets loaded: http://www.babylonjs-playground.com/#6PVF0Y#5
  17. 4 likes
    holla guys! i made a simple multiplayer game, but its's obviously still in progress. physics ball-pad
  18. 4 likes
    Hello everybody ! New features part 2: - You can now search any word or part of word (inside/outside of quotes) - You can ALSO search for shaders available in CYOS ! In this case, results will be displayed in red, and a link will forward to CYOS. - A version dropdown is available. By default, the link will forward to the last available iteration, but you can change that by selecting another version. - All bugs for some research (no results, impossible to read the code...) should be fixed now. Please report it if you still have some. @Wingnut, the PG was under migration on Friday, so it may be possible some PG didn't made it to the new database. If so, please send me the PG ID/iteration in PM and I'll try to recover it.>
  19. 4 likes
    Showcase of playing Perplexus Shadow Open 3D maze game on android phone Nexus 5x (it works also on tablet) Game works smooth! BabylonJS is great game engine for phone games! Here is Video (recorded with android app "AZ Screen Recorder") https://gaming.youtube.com/watch?v=vB7hd_SAzOA
  20. 4 likes
    I just started a documentation about use case examples : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainExamples.md
  21. 3 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.
  22. 3 likes
    Mr. @Wingnut you helped me to know what to do. Thanks for introduction, direction, tips. Catching up is best that way. Multiply knowledge === hero... in my book... Moar_L8r(this).thx();
  23. 3 likes
    Hi hit... that is not a noob question... no need to apologize. Direction vectors are sometimes difficult to understand. But .position vectors for lights... is easy, though. It works the same as mesh .positions. With Z-facing camera (common)... X is left/right, Y is up/down, and Z is forward/backward. I will soon write a helper section in our Lights Tutorial... about directions. Perhaps I will give a copy to @JohnK for HIS Lights Tutorial, too. For now, know that there is a method: light.setDirectionToTarget(something.position) ...that will help you. Hemi lights almost always aim straight up... direction 0, 1, 0 and their .position is usually 0,0,0 (scene center) and rarely changed. SpotLights and DirectionalLights are the lights that MOST USE .setDirectionToTarget(). THEIR .position is VERY important... because their .position is used for shadows creation. PointLights also have important .position for same shadow reason, but a pointLight is ALL-direction. I am hurried now, but you can put camera and spotlight inside doubleside box... and experiment aiming spotlight with setDirectionToTarget()... and then checking console.log(spotLight.direction). You will learn direction vectors fast... when doing that. Good luck... I'll be back later. Hope this helps.
  24. 3 likes
    I first started by writing a Phaser boilerplate using ES6 and Webpack. However, the thing missing was simple asset loading through Webpack, so I wrote a new plugin to facilitate that along with some more advanced features like compressed textures and retina graphics. Just define your asset manifest file, add the plugin and you are done. Github/Docs | NPM Load all game assets in parallel. Load images, spritesheets, atlases, audio, bitmap fonts and web fonts. Integrated with Webpack for automatic cache-busting. Supports all filetypes. Supports asset postfix for retina support ('@2x', '@3x', etc). Supports automatic loading of compressed textures (PVRTC, S3TC, ETC1).
  25. 3 likes
    Hi again @enwolveren, 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.
  26. 3 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
  27. 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.
  28. 3 likes
    And there is a light theme as well !
  29. 3 likes
  30. 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
  31. 3 likes
    Hello, Here is a small sample I've created: http://www.babylonjs-playground.com/#6PVF0Y#2 that shows how to: - Use WebVRCamera with a fallback to DeviceOrientation camera for Cardboard/mobile support - Use Canvas2D in World Space mode to integrate some 2D UI in VR Should be a good starting point. David
  32. 3 likes
    A 3d reference grid using BABYLON.MeshBuilder.CreateLineSystem http://www.babylonjs-playground.com/#P6XHUB
  33. 3 likes
    These are my favorites for long coding sessions... Artists: Bonobo Emancipator Ott Soundtracks: Mr Robot Hotline Miami The Neon Demon Ex Machina
  34. 3 likes
    Hey team..during the next couple of days, I'll update the playground to provide really stuff (more too come ;)) So expect it to be offline or unusable until everything is setup. Sorry for the inconvenience...
  35. 3 likes
  36. 3 likes
    Thanks T! I had a problem with BJS 2.5 saves yesterday, still, but I tested one this morning... with mDATA, and it seemed to work PERFECT. Also, "no metadata" notification is gone, so that is good. MetaData button works fine, and previously-entered metadata was found within. PERFECT! NICE!!! Thanks again... we're fartin' thru silk, now! And thanks for the standing-offer for PG recovery-attempts... that's very kind/cool of you. I'm pretty excited about these new features! They ROCK! I've already noticed a 50% efficiency increase... in Q&A custodian ops. It feels like I have new wizard powers... and I do.
  37. 3 likes
    http://www.babylonjs-playground.com/#1ZEABJ#14 http://www.babylonjs-playground.com/#1ZEABJ#16 planet
  38. 3 likes
    Hello team! as part of 3.0 version, I'm proud to announce the availability of ESM shadows (Exponential Shadow Maps). I updated the great doc done by @Wingnut to take this in account: http://doc.babylonjs.com/tutorials/shadows VSM (variance shadow maps) were removed (to keep backward compatibility the properties are still here but they will trigger a warning in the console). ESM are great because they can be blurred. Here is an example of all kind of shadows we have now: http://www.babylonjs-playground.com/#20FROK#2 ESM are great because they allow you to deal with selfshadowing: http://www.babylonjs-playground.com/#1CXNXC#3 Hope you like it!
  39. 3 likes
    Sorry for the slow response - I've been confined to bed fighting a major health issue for over a week I took a look at both the .babylon file that @Wingnut used and the one that @Nesh108 posted above - both seem to have been produced with an old version of the Blender Babylon Exporter The current up-to-date exporter will produce something like this as a first line: {"producer":{"name":"Blender","version":"2.76 (sub 0)","exporter_version":"5.2.0","file":"filename.babylon"}, The "Goku" files that I looked at do not have this line. However, they do have "light" and "camera" arrays right at the top of the file - which with the latest version of the BBE are now found at the end of the file. The files also have a large "vertex" array - so I have no idea why @Wingnut's test produces 0 for total verts. First suggestion - update the Exporter and try re-exporting the mesh. If that fails, please can you post your .blend file @Nesh108 , so I can look for other file issues @Deltakosh and @Wingnut: the words of Erasmus about the "one-eyed man" spring to mind. cheers, gryff
  40. 3 likes
    Awesome! Updated one of my old playgrounds right away to try things out and found it right away with the new search (search performance is really good, too!)
  41. 3 likes
    Oh shit. Showing the relevant code of your search query, before having to open the PG is a very welcomed feature. I didn't request it. Heck, I didn't even even know I needed it. But it makes searching the Playground a hell of a lot easier and quicker, too. Awesome
  42. 3 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
  43. 3 likes
    Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Jeu de bille Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: http://codepen.io/Gthibaud/full/zNwgmZ/ 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: http://codepen.io/Gthibaud/full/MJqgzv/ 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: https://codepen.io/Gthibaud/full/ryQRYP/
  44. 3 likes
    I used this http://www.typescriptlang.org/play/index.html to convert your code so that it would work in the PG. I made a couple of changes that might be helpful. http://www.babylonjs-playground.com/#236AN2#5
  45. This post cannot be displayed because it is in a forum which requires at least 5 posts to view.
  46. 3 likes
    Looks very good ! I can help you to translate into English if you need Nice work, keep going !
  47. 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
  48. 3 likes
    Congrats, D! Very cool. Why named "Heroon"? (if ok to ask) I hope folks don't playfully-say "Heroin Engine". The drug enforcement police might visit. heh Wiktionary: Heroon - A temple dedicated to a hero, often over his supposed tomb. A sepulchral monument in the form of a small temple. Is CastorEngine buried beneath this temple, D? (Wingnut places flowers and lights a candle, just in case.)
  49. 3 likes
    Got the shirt Thanks again to everyone and especially RaananW.
  50. 3 likes
    V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range. I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5. Filter Area Thanks to @bQvle and @radixzz First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box. Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box. Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below) If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically. uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix: filter.apply = function(filterManager, input, output) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output); } Lets combine it in shader! uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: https://jsfiddle.net/parsab1h/ . You can see that shader uses "map" and "unmap" to get to that pixel Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw: uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy + filterArea.zw); I dont have an example for that, but may be you need that value for something? Fitting problem Thanks to @adam13531 at github. One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: http://jsfiddle.net/xbmhh207/1/ Please use this line to fix it: filter.autoFit = false; Bleeding problem Thanks to @bQvle The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of http://pixijs.github.io/examples/#/filters/displacement-map.js. You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates: uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy, filterClamp.zw); vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L297 OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely? displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! No extra transparent space, and if you put it into http://pixijs.github.io/examples/#/filters/displacement-map.js , and you move mouse to bottom edge, you'll see the grass. Mapped matrix When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use https://github.com/pixijs/pixi.js/blob/dev/src/filters/displacement/DisplacementFilter.js and http://pixijs.github.io/examples/#/filters/displacement-map.js as an example. Look for a mapped matrix: this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly. You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time! texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"