Popular Content

Showing content with the highest reputation since 10/12/2018 in all areas

  1. 5 points

    Pixel perfection

    Hey ! Welcome to the forum Try this - http://jsfiddle.net/zmatocef/ and here's the PG- https://playground.babylonjs.com/#M9XT7F#3 as you can see, if you use diag, the FOV for 0px offset still leaves some area(coz of sq root) which is because of the fact (basic maths) let's say you render size was 500*500; diag = Math.sqrt(500*500 + 500*500) => 500 * Math.sqrt(2); because of this (sqr 2)1.41 there's some region left in the view area. (same case happen with Three.js; you can try yourself! ) This is how the formula is derived -> tan(x) = height/ base. Now for FOV ( we have to find 2tan(x)) In our case tan(x) = (renderHeight/2)/ (distance) ; //(distance btw camera and mesh; because camera is in middle) now x = tan-1(renderHeight/ 2* distance); and FOV = 2x; if you use diagonal; you can't get accurate result (x in this case)
  2. 5 points

    Dynamic Terrain

    Little uncomplete demo of a bat flight simulator in a cave : http://jerome.bousquie.fr/BJS/test/cave.html 2 dynamic terrains, one inverted
  3. 4 points

    loading screen with a video

    Here's one in HTML that just makes a black background container and a video element. https://playground.babylonjs.com/#GC1S7W#1 (You may need to click run before the video works, issue with video elements need interaction.) side-note: PG with timeout( for extra video time ) will bug when clicking run again before the timeout finishes (and video is hidden).
  4. 4 points

    Plane tangent to a sphere

    Hi there ! you can change the segment of the sphere to decided on number of planes. The solution uses facets normals- https://www.babylonjs-playground.com/#VDG184#7 Good day
  5. 3 points
    Your water does not need as much subdivision. your water is flat, a subdivision of 4 is sufficient.
  6. 3 points
    hi @Shahzaib 3d Customizer welcome to forum http://www.babylonjs-playground.com/#SVY749
  7. 3 points
    Hi Babylon.js community, It is my pleasure to announce BabylonCpp, a port of Babylon.js to C++, facilitating the creation of lightweight, cross-platform 3D games and applications with native performance. This port is a manual translation from the thousands and thousands of lines of Babylon.js TypeScript code into C/C++. Some history In 2015, I was looking for an interesting pet project. Due to my interest in 3D and modern C++, I stumbled upon Babylon 3D (C#/native port). I used this project as a starting point for mine and started updating the code with the latest code of Babylon.js. In beginning of 2017 - after a long time of porting, frustration and testing - I decided to publish the code on GitHub. Since then I kept updating the code and adding examples on daily basis. The Good TypeScript makes it really easy to port to C/C++ compared to JavaScript. For most parts, it is basically copying the code, updating to the proper syntax and updating the header. To get a good overview of the current state of the project I refer to the screenshots on the samples page. Not really a surprise, but if you look at the samples code you will see that the API looks very similar to the one of Babylon.js. Not all functionality is supported yet, but this a work in progress. I am really pleased with the performance of Babylon.js and the speedup of BabylonCpp. I am aware that I am comparing apples and oranges but I can give you some numbers. On my Intel NUC NUC7i5BNHX1 (Intel Iris Plus Graphics 640 GPU) I am getting the following numbers for the relatively simple Grid material example for a resolution 1680x1050 on Fedora 28: Babylon.js engine (v3.3.0-rc.3), Firefox 62.0: +/- 15% fluctuating CPU load, 270 MB RAM usage, fluctuating fps between 45-60 fps BabylonCpp (library size is 7.6 MB): constant 2% CPU load, 16 MB RAM usage, constant frame rate of 60 fps Some possible use cases of BabylonCpp include: Native apps development on iOS, Android Using the library as a WebAssembly module Using the library in existing desktop applications or integrating third-party libraries (i.e. Recast & Detour, Bullet Physics engine, etc.) Technical exploration (i.e. testing functionality that is in OpenGL and not yet in WebGL, supporting Vulkan API) The bad Most of the time goes into keeping up with all the Babylon.js code changes. Every month I take a snapshot of the latest code and port the changes into my version. As a result, the code is always very up-to-date but code on which people are still working or that might be thrown away in later versions is also integrated. An alternative I am going to follow for Babylon.js 3.3 is sticking with the stable version and focus mainly on features and stability. Porting will be done in a branches and less frequently. Not all code can be easily ported. For instance, C++ does not have reflection. There are third-party libraries available to support this, but this means introducing a new dependency. ...and the Ugly Linux is my main development platform. The code compiles on Windows (MSVC 2017) and OS X but is not really tested and buggy. On Linux I am also getting different behaviour between the debug and the release version. So the library is for moment only really usable on Linux in debug mode... Looking forward to hear what you think about the project or where you want to use it. If you have some suggestions for improvement or want to contribute or help resolving some of the issues described above feel free to contact me any time or let them know in this forum, it certainly would help a lot! Cheers, Sam
  8. 2 points

    Phaser 3 - Video tutorial series Free

    I'm doing a video tutorial series for Phaser 3 since the only alternatives are paid Zenva courses(which aren't bad but not many can afford). I'm aiming to do videos once a week and if you want to help out, I'll be on discord open to discuss the scripts and what to go over.
  9. 2 points
    I NEED HELP IN Clock time Function in babylon js 3d configurator th i want to make this model watch hands Movie like Real clock and real time any one can help me i have use this code for run that functions var hrHand = document.getElementById('hrHand'); var mnHand = document.getElementById('mnHand'); var mnHand = document.getElementById('secHand'); function initClock() { var date = new Date(); var hour = date.getHours() % 12; var minute = date.getMinutes() ; var second = date.getSeconds() ; var hrDeg = 0; var mnDeg = 0; var secDeg = second * 6; hrHand.transform = 'rotate(' + hrDeg + 'deg)'; mnHand.transform = 'rotate(' + mnDeg + 'deg)'; mnHand.transform = 'rotate(' + secDeg + 'deg)'; setTimeout(initClock, 1000); }; initClock(); and my object Id is this i try all js code of clock not working any one Please help me out any one can send me the demo of clock function ?
  10. 2 points
    Tutorial: Making Minesweeper (Preview of what we'll be making) Introduction to MineSweeper (Image 1. The classic Minesweeper. You can play a version of it online at http://minesweeperonline.com ) Minesweeper is a classic game, which just about everyone who’s ever had a computer has played before. It’s a sometimes frustrating puzzle game, that mixes a bit of luck with a head for numbers. It’s a simple design that can challenge the player again and again no matter how many times they play it. Basic Design Before we can get into writing any code, let’s take a look at the design of the classic Minesweeper. There will be three basic game objects: A square, the playing field that contains all the squares, and the ‘Smiley’ faced button. The basic gameplay is the player has to uncover the whole field, except for the mines. He can place a flag on top of mines by right-clicking to avoid clicking on them. If he accidentally clicks on a mine, it blows up, and he loses the game. If he manages to clear all the squares without clicking on a single mine, then he wins. Each object will have the following behaviors: Game Objects Table 1.1 Square Playing Field Smiley Face Could be a bomb Could be next to a bomb. If it is, then the square has a number. Flags can be placed on top of squares. Is a list of Square objects. These squares need to be created in the room, and the bomb needs to be randomly placed. If all the non-Bomb squares are cleared, then the player wins. Looks anxious when the player presses a square. Looks dead when the player presses a bomb square. Looks cool when the game is won. Tools Panda2 Link: https://www.panda2.io/ Panda2 is a visual way of writing HTML5 Javascript games. It allows you to immediately see the code changes you're doing onscreen. It's built on the Panda Engine, which is an opensource html5 engine. ImageEditor Any image editor for creating png’s to use for the game’s graphics. But don’t worry, the game resources are included with the source code so you can get coding without spending time trying to create game resources. Step 1: Setting up the Base So you’re ready to make the latest, and greatest MineSweeper game. Great! But how will we start? In Panda2, create a new project. (Image 2. A blank project). The first screen we’re presented with the base game setup: This is where the core ‘engine’ is loaded for the game. You can see first it’s loading the engine, then the config, before it starts main.js. We don’t need to worry about the engine, so first let’s add some graphics we can use in the game. Click on the asset tab, and then add graphics: (Figure x. Adding assets to the game). Go to where your game graphics are stored, and selecte the Square graphic to load. (Figure 1.x the assets for this game) Click on ‘Main’ in the sidebar. You’ll be presented with your ‘game logic’. (Figure 2. Main.js. This is going to be the starting point of your game). Click on line 12, to get your cursor there, then press the (+) button, which is indicated by the red arrow in Figure 2. It’ll create some code for new, a new Class. Go ahead and call it ‘Square’. After creating the Square, now we have to add the sprite for it. Click again on the asset tab, hold down Alt and click on the ‘square.png’ image. You should now see the following code added to your game: game.addAsset('square.png'); Make sure this code is just above your ‘Main’ definition. Now: Inside Square, change the init function to this: init: function(x, y) { this.mySprite = new game.Sprite('square.png'); this.mySprite.position.set(x,y); this.mySprite.addTo(game.scene.stage); } And inside of Main.init(), add the following line of code: var playingField= new game.Square(96,96); All together, it should look something like this: game.module( 'game.main' ) .body(function() { game.addAsset('square.png'); //press alt+click on square to add it to game. game.createScene('Main', { init: function() { var playingField= new game.Square(96,96); } }); game.createClass('Square', { init: function(x, y) { this.mySprite = new game.Sprite('square.png'); this.mySprite.position.set(x,y); this.mySprite.addTo(game.scene.stage); } }); }); Save and refresh. (the red arrow in Image below points to the Refresh game button) Congratulations! You’ve created the first step of the game. You’ve used Panda to add a new Asset to your game. You’ve created your first game object, and you’ve created your first sprite to draw into the game. What we’ve created so far can be found in the minesweeper_01 project in the source code. Now: While what we’ve achieved is not that impressive, we’re getting familiar with the workflow of adding game resources like images, and creating new gameobjects. Now that we’re familiar with this, we’ll now be able to quickly create new objects and display them however we please. Other resources, like music and sound are added in much the same way. Next up: We want to create a playing field. And we want to add some game function to the Squares (Like Bombs!). Step 2: Creating the Playing Field and adding interactivity. In this step, we’ll create the actual playing field of squares, we’ll turn some of the playing fields into bombs, and we’ll let the Player click/tap on the squares to reveal them. We need to add more assets to the game. This includes loading 2 font resources: Fonts have 2 files associated with 2 files: *.fnt file, and a *.png file. Load the extra assets into the game. Add a PlayingField game object. Add Bombs and code for checking for bomb. Our game now looks like this: It’s getting there! Squares now know if there’s a bomb next to it, or if it’s a bomb. Square are also randomly assigned a bomb. The full code for where we’ve gotten to so far can be found in the minesweeper_02 project files. Step 3: Implement basic game logic. In this step, we code the game to have win/lose logic. We add some of the classic Minesweeper features, such as marking squares with flags, and adding a ‘Smiley’ face to the GUI The game now looks like: Full source code can be found in minesweeper_03 project files. Step 4: Adding some final polish. Final code polish. Flagging mines on game complete. Exploded sprite. Adding Animation. Game now looks like: Full source code is in minesweeper_04 project files. Final Step: You! The next step is to take this game to the next level. Here’s some suggestions: Traditional Minesweeper is a fixed grid. Add some level design! Change the pattern. There’s no reason to even keep it to be squares. Use hexagons, or circles. Put it in space! Polish the game! Add Music and sound effects. Add a Title screen. Add some cool explosion animations if the player clicks on a bomb. Make stars fly out when the player wins. One thing that players of the traditional minesweeper do is play for the hi-score. Add a timer and track their scores. Let them share their scores on Social Media Release it! The Panda2 editor has some features to easily export and release your game across multiple platforms. Some of the platforms it currently supports are Android, iOS, Facebook Instant Games, AndroidTV, XBoxOne. Source Downloads: minesweeper_01.zip minesweeper_02.zip minesweeper_03.zip minesweeper_04.zip And Finally... Leave some feedback. Cheers!
  11. 2 points
    As far as clones, these are just meshes sharing geometry. Disabling one has no effect on others. Also, there is no such thing as a MASTER clone, which means the first mesh can also be deleted with no effect on others. In general, these "tricks" as you call them are due to people perceiving that they are operatiing on meshes. In the GPU / reality however, the primary thing be operated on is materials which translate into a vertex / fragment shader pair. This difference of what is really being done to how you THINK you are operating, is causing your disconnect of what should be the way "things should be". For instance, having vertices in the CPU does not mean anything to the GPU until a material is created for them to be used as data. This compiling of shaders / GPU programs is what causes the latency. As @JohnK says, adding a mesh & disabling gets the shader programs compiled, so everything is ready when you want that mesh (really material) to be seen. Not straight forward, unless you look at it from the GPU's point of view.
  12. 2 points
    Interesting question and from my point of view it is a bit like asking why does Picasso paint faces with both eyes on the same side of a head when they are clearly on opposite sides. Answer because he wanted to. Developing any system depends on the life experiences and views of the developer and since these are different for us all we all see things dfferently. When I first started with Babylon.js my expectations often led me down the wrong path until I learnt not why things were done in the way they were but how things were done. When you are learning it is too easy to look for the pieces you expect to find so you can put them together to build the system you want. However these pieces might not exist. You need to think about what it is that you want to build and what pieces are available that will allow you to build it. For example an alternative way to approach your number 2 could be to load your mesh and then use mesh.setEnabled(false) to keep it out of the way until you need it or even just mesh.isVisible = false. If you need lots of copies of the mesh then perhaps the SPS system might be a better way than cloning. Keep learning and there are many contributers here to help.
  13. 2 points

    Text styling

    Looks like there's no letter spacing for text in Phaser 3 So here's a little solution if someone will need it textline = 'qwerty'; letterSpacing = 10; letter = null; startPositionX = 400; for(var i = 0; i < textline.length; i++){ if(!letter){ letter = this.add.text(startPositionX, 1020, textline[i]).setStyle({ fontSize: '60px' }); } else { letter = this.add.text(nextLetterX, 1020, textline[i]).setStyle({ fontSize: '60px' }); } nextLetterX = letter.x + letter.width + letterSpacing; }
  14. 2 points

    Basic infinite scroller game

    for show you what happen you don't need terrain i just have one mesh and in any step prepare that again http://www.babylonjs-playground.com/#1QC9DP#175
  15. 2 points
    Hi Deltakosh should be around by tomorrow. As mentioned, this happens because of a loop in calls, Here's a temporary fix for until it's fixed; Accessing absolutePosition directly, instead of getAbsolutePosition() function which forces computeWorldMatrix. Include the snippet in your code, after the main babylonJs file. BABYLON.ArcRotateCamera.prototype._getTargetPosition = function() { if (this._targetHost && this._targetHost.absolutePosition) { var e = this._targetHost.absolutePosition; this._targetBoundingCenter ? e.addToRef(this._targetBoundingCenter, this._target) : this._target.copyFrom(e) } var t = this._getLockedTargetPosition(); return t || this._target } https://www.babylonjs-playground.com/#9XBPW4#4
  16. 2 points

    Basic infinite scroller game

    hi how are you http://www.babylonjs-playground.com/#1QC9DP#143
  17. 2 points
    Hi, you can set engine.isPointerLock = true;
  18. 2 points
    @blackhawx Okay I just kept typing and my post was getting a bit out of hand. So I decided to just write it out as a post on my dev blog here: How to Re-Use Phaser 3 Animations for Different Sprite Sheets I hope this was clear and useful! Feel free to "like" the post if it was good or leave feedback how I can improve it. Thanks again for helping me understand this process!
  19. 2 points


    A lot of very nice feedback since WAZANA.IO is featured on the BABYLONJS homepage. I suspect you guys to help me make this game even better! Huge thanks
  20. 2 points
    Well, although I didn't arrive at a finished level, the retro competition still helped me make lots of progress and add new features to my work-in-progress game. You can play the uncompleted model train retro level (created for this challenge) here: https://quintushegie.com/gardentrains/#retrotrains2 This level (and all others) will become more exciting as my programming progress continues. Yesterday for example I added the shadows and improved lighting, which look nice. So my benefit of the challenge was that it helped me get excited about trying out new things and getting things to work. Not so much that I was able to complete a whole new mini retro game... but that wasn't my goal anyways. 🙂
  21. 2 points

    loading screen with a video

    Hi @Buzul . Have you seen these docs on creating custom loading screens?: http://www.babylonjs-playground.com/#1WXS3J Here is a sample playground that uses a custom scene loader: http://www.babylonjs-playground.com/#1WXS3J You can implement a function in displayLoadingUI that implements a video texture.
  22. 2 points
    Back to the Lamps on Babylon / Open Contest! forum thread, I've commited myself to write a tutorial about my lightmap workflow. Here the demo: And here the first published version of the tutorial... but in french, for now 😄 https://www.nothing-is-3d.com/article25/de-blender-vers-babylonjs I will soon make available an english version, don't worry. [edit] english version is out: https://www.nothing-is-3d.com/article27/from-blender-to-babylonjs
  23. 2 points

    Is Babylon.js for me ?

    Actually, 3JS provides many renderers : canvas2d, webgl, CSS3render, SVGRenderer and tries to abstract the way to design a scene the same way for all these renderers. Moreover, the library is smaller (even with all these renderers), this means that a lot of features are external ones (cameras, for instance). It's not focused on game development initially either, this means for example, that there's no dedicated method to handle the render loop (you have to do it by your own) and no specific concerns about the memory allocation or the garbage collection or any other optimization about the CPU/GPU pipeline (ex : no use of indices, only flat vertex array, no memory reuse on normal computations, etc). There's no dedicated support forum either. You need to use StackOverFlow. The project is older than BJS, there are some books about the framework (not all are updated to the latest version actually) and some existing commercial projects. If you dig a little in the commercial project codes, you quickly notice that the framework provided functions are more or less used and a lot of genuine WebGL is deployed : shadders, GLSL, etc. Because the needs quickly overpass what 3JS initially provides. BJS focuses only on WebGL, so no other stuff. The library is twice bigger than 3JS one... for only one renderer. This means BJS intends to embbed the more features as possible for the final user, but keeping only on the WebGL + animations way. As it intends to be a game framework, it provides everything about animations and concentrates on keeping fast. This means a lot of process, memory, bandwith optimizations, especially in the render loop. If you have a look at existing demo codes done with BJS, you'll see that the lib provides almost everything to do simply what you need to code a complex game or any other WebGL rendered animated project. When features are provided as external ones, such as the material library, they remain supported by and in the official repo. This forum is the official place for community help and even core team support. Moreover some official tools like the playground, the CYOS, or the sandbox are provided to help you to share your issues or realizations. As the project is less old than 3JS, there are currently less available books (two for what I know so far), but you'll find the biggest online doc ever : tutorials, API doc (in improvement), videos, curses, tons of running and detailed examples from the forum/playground, etc. We have plenty of examples of people having started a project under 3JS, then tried and ported it to BJS and never switched back. Make a quick search on this forum, you'll understand why ;-)
  24. 1 point
  25. 1 point

    Screen fade/motion blur effect

    Received the book BabylonJs Essentials yesterday. Although some parts I already knew because I'm developing in BabylonJs already, no problem. There were still parts that I didn't know or didn't come about yet... so still useful. Plus the paperback book looks nice on my night cabinet. It's real 3D you know, real paper texture 🙂