Leaderboard


Popular Content

Showing content with the highest reputation since 10/19/18 in all areas

  1. 11 points
    trevordev

    AmmoJS support

    Hey, AmmoJS physics plugin has been added to Babylon preview. It should work well with composite meshes which we've had trouble with in the past with other engines. Let me know if you find any issues or have any feedback. Note: Support for motors, soft bodies, other ammo specific features are not yet supported so yell if you need anything specific for your project. vid.mp4 Examples: Basic impostors: https://playground.babylonjs.com/#7149G4#31 Loading mesh and colliders from file: https://playground.babylonjs.com/#66PS52 Loading and adding colliders manually in Babylon: https://playground.babylonjs.com/#FD65RR Loading and adding collider with joints and pointer interactions: https://playground.babylonjs.com/#DGEP8N WebVR grabbing and throwing: https://playground.babylonjs.com/#ZNX043#1 Docs: https://doc.babylonjs.com/how_to/using_the_physics_engine
  2. 11 points
    Deltakosh

    Inspector v2.0

    Hey team!!! I'm so happy to start sharing what I was working on for some times: https://medium.com/@babylonjs/dev-log-creating-the-new-inspector-b15c50900205 I hope you like it as much as I like working on it This is the repo issue associated with it: https://github.com/BabylonJS/Babylon.js/issues/5415 I plan to merge it to master probably this Monday
  3. 9 points
    Deltakosh

    Deltakosh out for 2 weeks

    Hey team! I'll be out for two weeks going to some needed vacations Do not expect any answers from me during this timeframe See you all in 2 weeks!!
  4. 8 points
    coolroar

    Star

    I keep changing my avatar. A character defect? 🤒 Anyway I created it using BJS: https://www.babylonjs-playground.com/#SVZL1I#3 https://www.babylonjs-playground.com/#SVZL1I#4 I needed to take a break from long-term projects, so I did this instant gratification stuff. 😁 Take a look, they're short, fun, & tinkerable!
  5. 7 points
    Deltakosh

    Inspector v2.0 is ready for testing

    He is here and already deployed to sandbox and Playground Feel free to report any issue!
  6. 7 points
    I made a progress bar using two rectangles, a container and a text block, here I thought I would share because I am very proud of myself ! You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  7. 6 points
    AndreasLoew

    PixiJS: SpriteSheet Tutorial

    I've just created a short tutorial for PixiJS that explains How to create & use sprite sheets with a few mouse clicks Use animations from sprite sheets (much easier than enumerating all sprites manually....) Optimize sprite sheets for smaller size and faster loading (up to 50%) Visually edit pivot points The full tutorial including source code is available from here: How to create sprite sheets and animations for PixiJS
  8. 6 points
    Hi @Kevin Trepanier, From a FGL-Flash-era comparison the big changes are HTML5's shift towards revenue-split, syndication, multi-platform, multi-player. A good Publishing Partner (who can bring high volume traffic and share revenues fairly) is good to have but might take time (and a small catalog of games) to find? Sponsors. The "Auction" exclusive-upfront-fee licenses are rare (or rather the level of risk for a small team to build a game of sufficient scope to gain exclusive interest is hard to justify upfront). The "Gameshop" style non-exclusive upfront-fee licenses do exist, however the number of active sponsors in the market are few so overall revenue is limited (in comparison to slower but longer revenue-split). There are links on this forum to such sponsor portals, although it's a changing list with high churn so your own research will be necessary. Virality. As always, it's possible but improbable! But more contagious these days is the speed and quantity of rip-offs and clones. Any big-idea must be protected with (or leverage) a server-side strategy. Of course everybody's mileage will vary, most will quietly stall whereas a few successes are very real and highly deserved (and often humble!). I hope that's a fair and helpful overview.
  9. 6 points
    JohnK

    Wikipedia

    https://en.m.wikipedia.org/wiki/BabylonJS EDIT 17 Nov 2018 On hold again as it was put on by a banned user. EDIt 1 Dec 2018 Back on line again - hope it holds this time
  10. 6 points
    NasimiAsl

    draw font inside of shader

    https://www.babylonjs-playground.com/frame#HJSZ84#19
  11. 5 points
    mentuat

    Y8 Destroys Your Games (and websites)

    Complaining about a bunch of IP infringing 'Mario' games being removed from a distribution network? Ballsy move bringing attention to that!
  12. 5 points
    Play "Offerlings" in your browser" For the game jam Ludum Dare 43 we decided to try out BabylonJS. We knew we wanted to create 3D game and for it to run on the web and on mobile browsers. We'd previously created our own JS engines with THREE.js as the renderer, but the time constraints of the game jam (3 days) meant we wanted to an existing game engine. We looked at other game engines that had HTML5 exports (Unity, Godot, Unreal), but none of them really worked on mobile. We're really happy with using BabylonJS, the examples were great for learning how to add various features into our game. Looking forward to the AmmoJS plugin in version 4.0! Let us know what you think of the game, and if you spot any problems.
  13. 5 points
    JohnK

    GUI ScrollViewer

    ScrollViewer now available and enhanced by DK
  14. 5 points
    NasimiAsl

    Shared transparency

    hi https://www.babylonjs-playground.com/#1TYWYB#188 you can use 2 renderTarget for make that 1. for render transparent area inside of black Area https://www.babylonjs-playground.com/#1TYWYB#186 2. render nan transparent meshes https://www.babylonjs-playground.com/#1TYWYB#187 then mix that with postprocess
  15. 5 points
    JohnK

    Build a House from a Floorplan

    In this image the blue walls are the inner walls and the red ones the outer walls, the position vectors ai, bi, ci are known and hence so will line L = bi - ai and next line N = ci - bi. We need to find the position vector of bo. Knowing the distance between the inner and outer wall we can use the right angled triangles (as shown) to determine bo. Using the vector dot product angle = Math.acos(BABYLON.Vector3.Dot(line, nextLine)/(line.length() * nextLine.length())); we can determine the angle between L and N. However that angle can be acute (left hand image), obtuse or reflex (right hand image) whereas the Math.acos returns an angle between 0 and PI. Using the cross product direction = BABYLON.Vector3.Cross(nextLine, line).normalize().y; will give a vector perpendicular to L and N ie of the form (0, y, 0) and normalizing will give (0, 1, 0) or (0, -1, 0) depending whether the angle is reflex or not. We need to find out the unit vector perpendicular to L (forms the right angle in the images). Since taking the dot product of (x1, y1, z1) with (x2, y2, z2) gives x1x2 + y1y2 + z1z2 which will be zero when the two vectors are perpendicular then for L = (x, 0, z) the perpendicular (or normal line) to L in the plane LN will have the form (-z, 0, x) as these give a dot product of zero. Hence lineNormal = new BABYLON.Vector3(line.z, 0, -1 * line.x).normalize(); The we need the unit vector in the direction of L line.normalize(); Current ai tells us we are at wall w and bo is for wall w + 1. Since the walls are closed at the end wall w + 1 = 0. Hence the need to work modulo the number of walls (w + 1) % nbWalls Now we can use the right angled triangle to determine the position vector of bo. Starting from bi (corner of wall w + 1 mod nbWalls) travel along base and along height to get to bo (vector addition is commutative so can add in opposite order) as below Walls] = walls[(w + 1) % nbWalls].corner.add(lineNormal.scale(ply)).add(line.scale(direction * ply/Math.tan(angle/2))); remember ply is distance between inner and outer wall so vector along height is scaled by ply. Knowing ply and the angle we can use tan to get the base length. Multiplying by direction deals with when angle is reflex or not. we can then move on to the next line along line = nextLine.clone(); and find the next line. Note we are using subtractToRef V.subtractToRef(W, R) which takes W from V and puts the result into R walls[(w + 3) % nbWalls].corner.subtractToRef(walls[(w + 2) % nbWalls].corner, nextLine); note that as ai is wall w, bi is wall w + 1 and ci is wall w + 2 Hope that helps
  16. 5 points
    vinhpt

    2D, 3D Wave simulator

    Please visit my website Wave simulator http://grid.vn/song/app/EnSong3D.html WAVE INTERFERENCE http://grid.vn/song/app/EnGiaoThoaSong3D.html
  17. 4 points
    -AAG-

    AAG batch of games #4

    Another year another batch of games. This was a slow year and the year of the sequel too. Joe Lost 2 Joe is lost again! Please help him. ABCya exclusive. Playable only on desktop unless you have a mobile account. PLAY Light On 2 The exclusive sequel to Light On only on ABCya.com! Playable only on desktop unless you have a mobile account. PLAY Bridge Hopper Hop from bridge to bridge to eat all the carrots or Bunny will cry ABCya exclusive. Playable only on desktop unless you have a mobile account. PLAY Money Land 2 Back to Money Land! In this strange new area your gravity will flip every time you stump a critter. ABCya exclusive. Playable only on desktop unless you have a mobile account. PLAY Jon Lightning Jon can move too fast for his own good. Help him. A port/adaptation of one of my old windows games under the Alexitron banner. PLAY Boxed 2 More Boxed fun. Now with metal boxes, moving walls, and holes! PLAY Lost Joe The none-exclusive edition of the Joe Lost games by popular demand. PLAY That was 2018 for me. Hope you guys had a good year as well. You can check out the rest of my catalog at www.gamesaag.com. I am thinking of removing the freebies section altogether. A question for fellow developers: I was thinking about making a mobile app with a compilation of some of my games and then continue to add to it as I make more. Anyone tried something similar? Simple puzzle games seems to be what I do best but I don't mind to experiment. I was thinking about 1080p resolution and hi-res graphics though I really like the style that I have been developing, maybe I'll try to reproduce it with 3d pixels instead. Thoughts? For GameMaker: Studio users: Tried to get into Studio 2 and just couldn't. That new user interface is an abomination and the node based events, I just don't get it. I hope they make a classic shell in the future for old farts who have been using GM for over 10 years. Hard to adapt now.
  18. 4 points
    JohnK

    New forum

    A vote to leave or remain causes a flashback to the Brexit referendum here in the UK. As I trust Deltakosh and Jerome more than any government leaders I am persuaded by their reasoning so I will 🍃.
  19. 4 points
    Deltakosh

    Scissor Rects

    Here we are: https://playground.babylonjs.com/#JJYFI8#1
  20. 4 points
    kcoley

    Babylon.js Team Blog

    The Babylon.js dev team recently has been blogging about new features for Babylon.js on Medium. Here is the link to the medium page. We would love to get your feedback on the blog posts, any suggestions for new content, and are open to having guest blog posts from the community!
  21. 4 points
    FunFetched

    Shell Shockers

    Update: I'm using the full-on Babylon Null Engine on the server-side now to handle collision detection. The maps are divided into 3D grids, and every occupied cell contains a reference to an arrangement of one or more AABB or OBB bounding boxes for quick collision calculations, all loaded from a .babylon file exported from Blender. The game supports all sorts of map elements of all shapes now. Also, kudos to everyone who worked on Babylon v3.3. I'm making the transition now, and I'm seeing huge improvements in some key areas. A number of animation problems have disappeared. SPS mesh building is orders of magnitude faster than it was, which is great, because that's how I build the maps at run time. A number of other smaller items that I had clumsily patched up myself no longer need to be. Good stuff!
  22. 4 points
    Newland

    A battle chess or card game framework.

    https://ljzc002.github.io/CardSimulate2/HTML/TEST4optimize.html I'm trying to make a battle chess game framework.By now,I have completed the following functions: Use wasd,Shift,space to fly around the scene. Press alt to display hand cards. Click to chose one card or use Shift/Ctrl to select multiple cards and use 1-5 to team them up. When close to a hand card,you can click the button '落子'(Drop the pawn),then the sight change to orange,click the chessboard with the orange sight,the hand card will became a chess pieces. Select a unit on chessboard will display the range of movement by blue masks and the skill table by a DOM node,then you can move the unit by click the mask or click the DOM node to select a skill(up to now,only 'nattack' and 'test5' can work),click other grid or the unit itself will deselect the unit. Use skills to an target will trigger a series of animations,if the unit's hp falls below zero it will turn gray and go up to hand cards. After a round of action,you can click '下一回合'(Next round) button in the hand cards view,the unit on the chessboard will be waiting for move again. I don't have much experience in making battle chess games.I am eager to get to get some suggestions on how to optimize the ui and the operation mode. Next,I plan to use some 3D model to represent units on the chessboard,add some sound effects into the scene,and try to make a websocket interconnection.
  23. 4 points
    thrice

    Introducing Dark Matter CCG

    Hey all, So I'm finally starting to promote my babylon based project a bit now, that I have an actual site together at www.darkmatter.game - The game itself isn't hosted there or anything (it will be a PC+Mac release), but I have been putting out a ton of playtest / demo sessions I've recorded on YT and posting on site (and will be throughout the next week). So anyways, if you're into digital CCGs or CCGs in general, you should def check it out as it's quite unique. I would also love any feedback, and am happy to answer any questions you might have! Also, should say thank you to anyone on these forums who has helped me in any way up to this point! I mean, these forums are seriously great, and filled with helpful people. (Should my project make it into the big leagues you can be sure I'll do a forum search and you can expect your name in the credits )
  24. 4 points
    dbawel

    Error on loading .OBJ files

    @Madclaws - Firstly, your file names don't match, so unless you have edited the OBJ and MTL files yourself, the loader is looking for the same name MTL file. Start by opening your OBJ file in any text editor, and verify the name of the .mtl file the .obj file is looking for. This will be in one of the first few lines of the OBJ file. As it appears the OBJ file is looking for a different MTL file name, this is not normal. It;s always best to keep your OBJ, MTL, and JPG (texture file) the same name as every exporter I've ever used writes these as the same name; and looks for the same name files on import - definitely the Babylon OBJ file importer. And your OBJ manifest file and MTL file are of different names. So I might assume your other files are not matching the names precisely. Upper case and lower case must match also. You don't need a manifest file... however, if you want to get rid of the 404 error for the manifest file, simply create an empty file with the same name as your OBJ file, and give it the extension .manifest. Example 'obj_name.babylon.manifest'. However, this is not important as others have already stated. If you're loading multiple OBJ files, then I recommend editing your OBJ file and remove the reference to the .manifest file. Then it won't look for the file. As for the .mtl file, this must also have the same name as the obj file. Example 'obj_name.mtl'. This is your material file with all your material attributes (settings.) This will work the same way if your mesh has a texture which will also have the same name as your obj file with an extension for the texture such as 'obj_name,jpg'. I work with OBJ files every day, and almost always edit the OBJ and MTL files as they are self explanatory once you open in a text editor. If you don't want a MTL file on your mesh, then simply remove the reference to the MTL file in your OBJ file. Then it will simply use a default material or none at all depending on your OBJ file edit. However, I find that different applications such as Blender often write odd values to the MTL file which is completely dependent on the user who has set up the material and texture. So I almost always edit my OBJ and MTL files as I can get the desired material editing the ambient, diffuse, specular values, etc. directly in the ascii files themselves. It's so very easy to read and edit. 2 minutes experimenting with no prior knowledge is more time than anyone needs to learn everything there is to know about the OBJ format - including editing normals, vertices, etc. It's simple for a single OBJ file, but if you work with real time scans producing hundreds of unique OBJ files to load in real time, then I write simple scripts to edit each OBJ file as needed. The .babylon format has many attributes which is far more advanced if you want to export scenes. However, if you are only importing meshes, the the OBJ format is by far the most reliable format and provides a level of flexibility in being able to edit the ascii files directly. Once you open the OBJ and MTL files and spend a couple minutes editing these and learning what values represent the different attributes, this will become your format of choice for meshes. I can't imagine otherwise, as there is little to nothing which will cause you problems once you understand the format. Remember that you can always apply Babylon materials and textures (and other attributes such as shaders) after import - which I do often. I hope this info helps, as you're definitely on the right path to the ease of importing OBJ files. If you read this and follow the advice to test a few edits to the files, I can't imagine you won't have a firm grasp of the OBJ format. However, if you still have issues, then post an OBJ, MTL, and JPG file all with the same name before the extension, and I'll be happy to walk you through the key lines to edit to gain full control over the resulting mesh(s) import. FYI - I introduced the other software engineers at Sony Electronics to the OBJ format, and it is now the format of choice for practically all mesh content due to it's simplicity and flexibility. This is after they spent several months working will every other format and exporter. No need to over complicate simple tasks - which often happens due to the OBJ format being decades old now; so people assume newer formats are better. But there's a reason why the OBJ format continues to be the most widely used in export/import between most applications. Cheers, DB
  25. 4 points
    Deltakosh

    Debugging physics with the inspector

    I'm on fire ;D New video_Medium (2).mp4
  26. 4 points
    http://www.babylonjs-playground.com/#8E7IHP#20
  27. 4 points
    Bikas

    Postmortem: Adventure Drivers

    Hello! Adventure Drivers is my second HTML5 game after Medieval Defense Z. My main work went into engine, tools, code and levels and the art was done by Gudo1. I can share some of the details of what went into making this game. I also wrote a postmortem about my previous game Medieval Defense Z which you can check it here: http://www.html5gamedevs.com/topic/28332-postmortem-medieval-defense-z/ About Adventure Drivers - 60fps 2D racing game. - Written in Haxe. - Used Pixi v4, Howler and Nape Physics Engine. - Over 50k lines of code. Visual Assets All the visual assets were in flash SWF files and i needed to get sprites into spritesheets. Exporting hundreds of assets to PNG's by hand was too time consuming, so i wrote a command line tool in Adobe Air which takes assets from SWF files, applies transformations such as scale or rotation and exports all movie clips as images to a single graphics folder. The tool also creates XML file which has the animation data and anchor values for every image. Then i used TexturePacker command line tool to pack everything into a single spritesheet. For bitmap fonts i used Littera and packed font PNG's into the main spritesheet. After loading .fnt file i had loop over all chars and add x and y offsets based on the location of the font texture in the main spritesheet. Audio Assets Audacity and ffmpeg worked really well. Audacity for quick sound editing and ffmpeg for converting between various formats. Like in Medieval Defense Z i chose M4A for iOS and OGG for android and PC. Batch script to convert all WAV files to OGG (64 bit rate): for %%i in (*.wav) do ( ffmpeg -y -i "%%i" -codec:a libvorbis -qscale:a 4 -ac 1 "%%~ni.ogg" ) Batch script to convert all WAV files to M4a (64 bit rate): for %%i in (*.wav) do ( fdkaac -b 64k -o "%%~ni.m4a" "%%i" ) Editing in Audacity: Fade In/Out, Amplify, Normalize, Change Speed and Equalization were the most useful tools/functions. Level Editor Used my own editor written in Action Script 3 which is basically a general purpose non-tile based 2D object placer with prefabs, grouping, undo/redo, etc. In order to create levels faster i also used Perlin Noise algorithm for terrain generation and procedurally placed decorations. After generating the level i still had to cleanup decorations, adjust terrain, add caves, place obstacles and items. For saving to files i wrote a simple NodeJS server in Haxe and used POST to send and receive data which then is saved to disk. Physics Nape Physics Engine was great until i needed to run my game on mobile... Dynamic polygons became a real drag on CPU and i needed to simplify geometry in order to have any gains in terms of performance. Weirdly enough the terrain size was not that influential as much as adding 1 more car. Also there was this weird issue with inlined code. Inlined code ran SLOWER in chrome than non-inlined... It was especially noticeable then physics engine caused large lag spikes. I noticed the same problem in Medieval Defense Z and large functions. I could not find anything online, so i disabled inline and split some of the large functions into smaller ones. Frameworks and Rendering At first i used Phaser framework but the performance issues were never ending. The transform updates were a major bottleneck so i had to pretty much hack around and disable portions of the framework until i was just using basic Pixi sprites and groups. Thankfully i didn't use much of any other stuff from Phaser (no camera, no physics, etc.) which made it easier to transition to Pixi v4. One of the biggest issues was the terrain drawing. Phaser does not have any equivalent for large mesh rendering with exception of using tiles and masks which are very slow. So i needed to write a complicated set of functions to cut the terrain into thousands of rectangles and add them to the stage during gameplay. After converting to Pixi v4 i simply used pixi Mesh object and EarCut library for cutting polygon into a triangles. This was about 10x simpler to implement and it improved the performance. For Canvas i still needed to hack around and use pattern fill in Phaser and in Pixi. Sounds Different js sound libraries had a major difference in performance. Phaser sound library was quite good, however it did not have .rate property which i needed for the car engine sound, so i used 2 different engine sound loops with different rates and changed volume based on driving speed. I tried Pixi sound library but it had incredibly poor performance on mobile and was basically unusable even though this library had really nice features. Ended up with Howler which has the ability to set .rate and the performance was really good. Also Pixi v4 + Howler did not crash my old android device which was nice. Bots The AI code can be broken down in 3 steps: data gathering, decisions and actions. In data gathering step the bot collects and processes information. For example: how long back and front wheels are on the ground or in air, how the rotation changed in the past second, average speed, etc. Decisions are made in timed intervals and they depend on the "personality" of the car which i describe in 4 values: "ability", "aggression", "craziness" and "panic". The bot "decides" only if all conditions are satisfied. The decisions include: air rotation, ground rotation, random_rotation, random_jump, flip, wheelie, nitro, jump_over, jump_pickup and use_ability. For some of the decisions the bot also has to check nearby items and other cars. The last step is "action" which simply means that the bot performs a function for a limited time unless some unexpected thing occurs. So the bot will stop the air flip action if any of the wheels interact with the ground. Backgrounds I wanted to do something interesting with the backgrounds so i decided to try pseudo 2.5D background scrolling stuff to see how it goes. The waves looked really nice so we went with it. If you want to do something similar, the function you are looking for is this: public static applyProjectionWithCamera(to_projection:Point, eye:Point3, camera:Point3, point:Point3):Point{ to_projection.x = (eye.z * (point.x + camera.x - eye.x)) / (eye.z + (point.z + camera.z)) + eye.x; to_projection.y = (eye.z * (point.y + camera.y - eye.y)) / (eye.z + (point.z + camera.z)) + eye.y; return to_projection; } Eye has fixed x = 0, y = 0 and z = 800 values. Camera x, y, z values are tied to the game camera which is tied to the player position. Each sprite has 3 3D points (triangle) associated with it and these points are placed somewhere in the background with high z value (distance), varying x value (horizontal) and high y value (vertical) for the clouds. Then i calculate 2D points (projections) for every 3D point. And set x, y, width and height for the sprite based on the 3 projected points. The Game For now we are doing a limited release on few websites and the game should playable very soon. If you found this post useful let me know.
  28. 4 points
    Hello. I'm working on a fighter game, and while it's not finished yet, you can enjoy it ahead of time via video, which is open source, and I'll post its github address when I finish the first phase. //On October 8, github address:https://github.com/renjianfeng/flightSimulator github.io:https://renjianfeng.github.io/flightSimulator/released/index.html update:On October 21, new video:
  29. 4 points
    jerome

    Dynamic Terrain

    Please have a look at this better demo : http://jerome.bousquie.fr/BJS/test/terrainSP2.html - map : 1000 x 1000 points map - 66511 random particles fixed in the SPMap (well more than 66K) - terrain : 100 x 100 - sps : 2000 boxes, 2000 spheres, 2000 tetra (it can works with 500 of each if we don't get in altitude to see in the distance), so 6K real particles maximum So we can manage 66K objects from the map with only 6K (or less, if no LOD) real objects automatically recycled. not sure the LOD is really accurate with the particles ... (edit : I'm sure it's wrong actually)
  30. 3 points
    Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  31. 3 points
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well. Let's all be adults about this, acknowledge we did something wrong, and move on. @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it. When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  32. 3 points
    enpu

    Bezier curve support added

    Panda Engine 2.12.0 now supports bezier curves with new Curve class. Here is interactive example, where you can see bezier curve in action: https://www.panda2.io/examples#curve-handles You can modify the curve by moving the start and end points as well as the two control points. Here is also example on how to use Curve together with Tween: https://www.panda2.io/examples#curve-tween Documentation of Curve class: https://www.panda2.io/docs/api/Curve
  33. 3 points
    bob_on

    [WIP] Warlock's Quest

    Hello! I've been working on my pseudo-3D ray-casting engine and I think it's time for some feedback. This is a 3rd person dungeon crawler game. You play as a Warlock on a quest to save your princess Evil Lord from those no-good humans. You must defeat 5 dungeon bosses to win the game. Each defeated boss grants you an additional minion to summon in battle (5 total). Each summoned minion costs health. The Warlock slowly regenerates health over time, but player/minion damage to enemies heals the Warlock. The dungeons are spread across a hub map, The Forest. The game is made entirely from vanilla JavaScript (no libraries or frameworks or engines), HTML5, and CSS3. Game Link: Click Here To Play I've currently only completed 3 of the 5 dungeons. In ascending order of difficulty: Goblins, Elves, Nature. Not sure what Dungeon 4 enemies will be, but Dungeon 5 will be the humans who defeated your Evil Lord and defeating this dungeon will win the game. Each dungeon has 2 unique standard enemies and 1 unique boss. The Big Things To-Do List: Dungeon 4 & boss Dungeon 5 & boss Music Balancing I would like feedback in these specific areas, but all feedback is welcome: Performance Mobile/Touch Controls Game Difficulty Is it fun to play? Programmer art aside, is it visually appealing/interesting? Thank you for your time and I look forward to your feedback. Thanks! Bob
  34. 3 points
    Deltakosh

    New forum

    I'm in full control with no dependency at all this time. I wanted to use the oss offer of discourse but ultimately I picked a paid subscription because I wanted things like custom domain, etc.. Technically the forum is a docker app that I can run where I want so this should be futureproof
  35. 3 points
    timetocode

    Degrading sound

    Now that I have this reproduced, I think I'm realizing that this idea was never going to work due to the number of sounds. I did a little bit more testing with a 500 KB wav file vs a 15 KB mp3, and the degradation seems more related to the number of sounds than their size. In my game each weapon has like 5-20 sounds, and a player can hold a few weapons. The walk/run cycle has like 16 sounds per material (concrete, wood, grass, etc). It can add up to about ~100 possible sounds per player, though 99% of them aren't playing at any given point. BJS seems totally fine with that many sounds, but it looks like attachToMesh is not designed for this. I read the source code, and it looks like it *might* be viable if it would check if the sound is playing before rebuilding the matrices. Currently it does some fairly expensive work, even for non-playing sounds (setPosition and computeWorldMatrix fill the profiler when stress tested with cloned sounds on moving meshes). I'm going to test positioning the sounds manually at the time that they are played, and not having them move along with the mesh. If that doesn't work I guess I'll pool them in addition. Edit: definitely need a pool Edit#2 at 21 players firing the same automatic rifle, the pool brought the active number of sound instances from 210 down to 59 Here's an ultra simple auto-expanding pool if anyone wants. Usage is just to use 'get' for short-lived sounds and it will handle allocation and releasing on its own. It never deallocs. class SoundPool { constructor() { this.scene = null this.sounds = {} } init(scene) { this.scene = scene } allocate(name) { const sound = BABYLON.Sound.FromAtlas(name, name, this.scene) sound.onEndedObservable.add(() => { this.release(sound) }) this.sounds[name].push(sound) } get(name) { if (!this.sounds[name]) { this.sounds[name] = [] } if (this.sounds[name].length === 0) { this.allocate(name) } return this.sounds[name].pop() } release(obj) { this.sounds[obj.name].push(obj) } } const singleton = new SoundPool() module.exports = singleton BABYLON.Sound.FromAtlas is a little wrapper that clones sounds without making additional xhrs (e.g. 'sounds/foo.mp3', clones it and applies new options)
  36. 3 points
    JohnK

    Wikipedia

    Back up and running again. Hope everything legit this time!
  37. 3 points
    coolroar

    Catacombs -- 3D

    To INFINITY and b e y o n d ! Now the lattice develops as you approach, adding chambers ahead of you using chambers that you've left behind. Your processors only have to manage 16 total chambers instead of XxYxZ chambers for an XxYxZ sized lattice. So better frame rate and an infinity of chambers! PG:-------------- 👉 https://www.babylonjs-playground.com/#USDWIJ#5 👈 For challenge, try to make your way to an exit -- exits are at grid coordinates that are divisible by four: [4, 4, 4], [40,-12,8], etc. Another challenge: try exit a chamber and return through a different tunnel. The Code: My goal was to make a regular labyrinth: uniform sized and spaced chambers with tunnels connected to each nearest neighbor. To avoid sight-lines that extend beyond neighboring chambers, I based the chambers on the tetrahedron. The tetrahedron has four faces, none of which are parallel. Actually, I used the truncated tetrahedron which has hexagon instead of triangle faces. I extended the hexagons to form the tunnels. [Some of the code is kinda complicated and the commenting is rather sparse: I need to develop vocabulary.] The following may help. Some interesting characteristics of this tetrahedral lattice: Adjacent chambers are mirror images. The absolute values of the components of a vector between neighboring chambers are equal (opposite corners of a cube). So with a grid increment gi, a chamber located at [a,b,c], its four neighbors would be at: [a-gi, b+gi, c+gi], [a+gi, b+gi, c-gi], [a-gi, b-gi, c-gi], and [a+gi, b-gi, c+gi]. Since neighboring chambers are mirrored, the signs of gi must be reversed for alternate chambers. (PG lines 166 - 178) If the grid increment gi = 1, as it is in the PG, the chamber grid coordinates will all be even or all be odd: [even, even, even] or [odd, odd, odd]. See nearestLatticePoint() (PG lines 200- 230) __________________________________________________________________________ Please come back with your questions and suggestions! 💡 👉
  38. 3 points
    ozRocker

    Dynamic bodyshape demo

    I've been experimenting with a tool for shoppers so they can create their bodyshape in realtime and see which clothes fit them (whether that's a viable platform or not depends on the what the shoppers think) Here is the LIVE demo: https://punkoffice.com/bodyshape There was a bit of stuffing around to make this work. I had to separate the body-parts into polygroups. To do this I needed to add code to the Blender exporter so it would export vertex groups. Then I added code to the Babylon.js library to be able to parse the vertex groups from the exported JSON file. I've got a base model and an overweight model and I'm basically morphing polygroups from base to overweight. The girl was a housemate that I scanned but her bodyshape is a female from MakeHuman http://www.makehumancommunity.org/. The overweight morph target was also made in MakeHuman. I use Wrap from these guys https://www.russian3dscanner.com/ so I can change the topology of my scans to another topology (in this case, the MakeHuman avatar). This is all done via the CPU. Maybe a better coder than me can get it working on the GPU.
  39. 3 points
    @V!nc3r I totally agree with you that the spin on the Babylon.js logo as it stand could be better. In that vein, we are in the middle of a complete rebranding effort for Babylon.js as a whole and the loading animation is obviously part of that work. We expect to launch it with the 4.0 release. That said, I did want to take a chance to lay out what we are using as guidelines for motion and the UX design principles behind them. We need to have an indeterminate spinner for loading assets as we won't be able to know how long the assets will take to load. The challenge with indeterminate spinners is that whenever you have a noticeable loop in the animation (as in the animation has a pause before starting over or the logo builds up to completion and then disappears to build again) the user will subconsciously notice the loop and count it. If they notice the number of loops taking longer than normal, they will start building anxiety and likely click away. For an indeterminate spinner, you want pleasing motion that is almost hypnotic so that the user gets lost in appreciation of the motion and does not notice the time passed as easily. This may seem strange and manipulative, but most of UX design is about easing tensions and anxiety for the user to keep them engaged. We would like to use the spinner as a branding moment, but I am not convinced that means it needs to be the logo being manipulated. If you've noticed what Google has been doing with their branding moments in their various properties, their spinners are all about the google branded colors as dots. You get the tie back to the brand because of the colors, but they aren't in the position to need to manipulate their logo to do it. Most brands do not allow additional elements being added to their logo. There are clear guidelines for standoff of additional elements and for the most part changing the treatment of the logo is regulated by the standards guidelines. This is to maintain recognition of the identity with consumers and build trust. It has been shown in many cases where simply changing the packaging of a product can cause a drop in sales as the consumer distrusts that this is the same product they've always purchased. In some ways, brands have been beaten back into submission by consumers when they change their brand too much. A good example of this is when Coca-Cola tried to use New Coke as it's new brand to compete with Pepsi in the 1980s. Now what you see is a unification of branding, even within subsets of offerings. Even with Diet Coke having a different name, the logo is styled to feel like Coca-Cola to reinforce the overall brand. We have to design our motion around the limitations of CSS so that will be a forcing function for what the loading screen looks like. We want to reinforce the brand, but at the same time adhere to good design principles and be easily recognizable. This is most important when people who may not be familiar with Babylon.js run across a site that uses us as a viewer. We want them to become aware of the engine even if they aren't going to be building with it. It's the same idea as the launch of a video game where you see all the logos of the middleware or engines on screen or the start of a movie where you see all of the logos of the production houses that worked on it. Hopefully this gives you some insight into what we are planning. We agree with you that the current motion isn't a representation that we want to stick with and violates several of the points above. Let me know if you have more questions or want to discuss the design principles more.
  40. 3 points
    jerome

    How add ring in disc?

    want a tent ? https://www.babylonjs-playground.com/#B0I6G3#13 [EDITED] nicer here https://www.babylonjs-playground.com/#B0I6G3#14
  41. 3 points
    aaryte

    Classic Space Adventure

    I love the very true-to-Lego theme. I had some of those space sets! The sit-to-duck thing is so true to form. It was solid and responsive throughout. Nice! My biggest problem was getting off of ladders and other climbables, across a short gap, onto a ledge. It seemed like I had to climb really high to clear even tiny gaps. But I didn't get far into the robot city - just a bit past the first raygun.
  42. 3 points
    jerome

    How add ring in disc?

    maybe our good old ribbon then ? https://www.babylonjs-playground.com/#B0I6G3#6
  43. 3 points
    This answer worked for me (answer I got from Stack Overflow) height = velocity^2 / (2 * gravity)
  44. 3 points
    samme

    Create a moving platform

    https://codepen.io/samme/pen/wYLQOY
  45. 3 points
    JohnK

    depth map only has 1 bit color depth

    Hi @jhadenfeldt and welcome to the forum. Publishing the PG that you have that works with a description of how its use differs in your project would be helpful.
  46. 3 points
    samme

    Chaining multiple animations together

    Animation queue
  47. 3 points
    JohnK

    Create dynamic surface elevation

    Smooth and dynamic ? http://www.babylonjs-playground.com/#88AZQ#51
  48. 3 points
    V!nc3r

    sceneLoader, glTF and instances

    Here my tests... bad news, it seems we have a perf' issue 😱 3600 instanced meshes, materials with lighting disabled and no hdrTexture for PBR scene (to not add drawcalls compared to Standard .babylon one). .babylon file: https://www.babylonjs-playground.com/#8LFTCH#12 almost 60 fps 3600 meshes 1 draw calls meshes selection duration 7.8 .glb file: https://www.babylonjs-playground.com/#8LFTCH#11 only 23 fps 3601 meshes (+1 = __root__ I suppose?) 3600 draw calls meshes selection duration 14.8 blend file if needed
  49. 3 points
    Log: 1. Press "E" to release the interference bullet. 2. Add sound 3. Added impact detection and voice alarm 4. Optimized the halo effect 5. Long press the space bar to switch to a free perspective.
  50. 3 points
    fariazz

    How to load a JSON file?

    Thanks that worked! If it helps anyone, this is how you can then retrieve the loaded object: // in preload() this.load.json('levelData', 'assets/level.json'); // in create() let data = this.cache.json.get('levelData');