Popular Content

Showing content with the highest reputation since 07/15/2018 in all areas

  1. 10 points
    Here's a video I made that shows the process of using mocap data in a 3D web-page. Basically I did this: Used Perception Neuron suit to mocap dance move 3D scanned in my mate Used Blender to create avatar from scan and apply mocap dance Used CLO3D to add clothing Published on web using Babylon.js The live demo is at https://punkoffice.com/hype
  2. 7 points
    The Babylon Toolkit Getting Started Video
  3. 6 points

    Video Capture of your BabylonJS app

    Hello, It has been a while since I pushed a new cool feature so here it is: http://doc.babylonjs.com/how_to/render_scene_on_a_video In the same way you could easily create screenshot of the canvas, you can now record a video of video in a couple of lines. If you even feel that it is too much, you can directly record from the inspector. WARNING: This only works in compatible browsers and can only generate webm as it is the only supported format so far. So please, have fun with it and we ll look at increasing the support on demand.
  4. 5 points
    I've created a Phaser3 game template example, it's available on GitHub here: GitHub: https://github.com/BdR76/Phaser3-example-game Play demo: Phaser3 example game This is a Phaser v3 example game template, it's intended to show the structure of a typical Phaser3 game and using some of the key features of Phaser. It shows how to use separate scenes, a simple but effective loading bar, sprite atlas loading, sprite animation, buttons similar to Phaser v2 and more. It's a bare minimum game, a starting point of sorts. I hope it's useful for someone just starting out with Phaser development. Have fun with it let me know if you have any improvements. (Btw the only thing still missing is scaling or a scale manager, I'll add that at a later time)
  5. 4 points
    easy http://www.babylonjs-playground.com/#H5TZ2P
  6. 3 points

    geometry Builder product design

  7. 3 points

    Sprite hitTest a point?

    @pstrejczek The reason why your code worked was because this line bckg.hitarea = new game.Rectangle(0, 0, game.width, game.height); You are actually doing nothing. And if there is no custom hitArea defined, it will automatically use the container's dimensions for the hit area, when interactive is set to true. And this part var bckg = new game.Graphics(); bckg.fillAlpha = 0; bckg.drawRect(0, 0, game.width, game.height); bckg.hitarea = new game.Rectangle(0, 0, game.width, game.height); bckg.interactive = true; Would work exactly same as empty Container with custom hitArea: var bckg = new game.Container(); bckg.hitArea = new game.Rectangle(game.width, game.height); bckg.interactive = true;
  8. 3 points

    Panda 2 Tips & tricks

    By default, all audio is stopped when you change scene. Want to disable that? Add this to your config: audio: { stopOnSceneChange: false }
  9. 3 points

    BabylonJS render slower thanThreeJS?

    Well, you don't really use the same features in both examples. In the ThreeJS one, you use the BufferGeometry. In 3JS, the BufferGeometry is under the hood a flat typed array to be passed directly to the GPU, what is faster than converting some JS objects in a first pass, and this geometry is shared among all the meshes. Actually, in the BJS example that you provided, you are trying to port line by line the 3JS code to BJS. But, this doesn't work that way because the frameworks don't have the same way or philosophy to implement same features... Doing this will always lead to misunderstandings and wrong results. As brianzinn suggested, you could investigate how BJS does to achieve the same result in other ways. In BJS, you can use, for example, instances of a single mesh. In this case, the geometry, and other properties like materials, are shared among instances : http://doc.babylonjs.com/how_to/how_to_use_instances You could either use a Solid Particle System (SPS) : http://doc.babylonjs.com/how_to/solid_particle_system https://jsfiddle.net/6ng7usmj/32/ => 60 fps If you want to tune things at buffer level, there's a way I just can remember now to to force to turn the buffers to be passed as flat ones (ie not related to indices ones) EDIT : this http://doc.babylonjs.com/how_to/optimizing_your_scene#using-unindexed-meshes
  10. 3 points
    So:) You cannot reuse the same fragment for a material and a postprocess: https://www.babylonjs-playground.com/#NAG06Y#83 The postprocess assumes that you only provide the fragment shader (the associated vertex shader is provided by babylon.js: https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/postprocess.vertex.fx) So as you do not provide the vertex shader, you cannot add varyings in your fragment.
  11. 3 points
    @Sebavan is working on a video capture solution. And we will soon merge this PR which will allow GIF capture: https://github.com/BabylonJS/Extensions/pull/140
  12. 3 points

    Animation oncomplete callback

    sprite.on('animationcomplete', function (anim, frame) { this.emit('animationcomplete_' + anim.key, anim, frame); }, sprite); sprite.on('animationcomplete_attack', function () {/*…*/}); sprite.on('animationcomplete_jump', function () {/*…*/}); sprite.on('animationcomplete_walk', function () {/*…*/});
  13. 3 points

    Performance Optimization tips.

    Hi @aFalcon visibility = 0 will just not render mesh, but will do matrix calculations (position, rotation e.c), but if you set enabled false, it will not perform these calculations, so enabled false should be more performant.
  14. 2 points

    Blender > .babylon Vertex Groups

    Hello, For anyone that may be interested, I have been messing with mesh.py to get it to export Vertex Groups along with their associated indices and have attached it. I think @adam and @ozRocker have both asked about this and I'd definitely make good use of it. I'd be grateful if you could let me know if this works for you or not, please. It currently adds them under the 'meshes' as 'vertexGroups' Massive disclaimer: I am not good with Python! Thank you Problem: it duplicates indices. mesh.py
  15. 2 points

    Drawing huge objects

    Hey, Ivan made me aware of the question. he pushed me in the right direction and ill share the code. Masks are slow, its better to convert a graphic shape to a mesh and draw the shape using its vertices. // In the case of my editor, somewhere i set the body.mySprite.data.tileTexture to the lookup name of the tileTexture, e.g. 'grass.jpg' this.updateBodyTileSprite = function (body) { const tileTexture = body.mySprite.data.tileTexture; if (tileTexture && tileTexture != "") { let tex = PIXI.Texture.fromImage(tileTexture); tex.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; if (!body.myTileSprite) { //body.originalGraphic is the shape we want to get the mesh from game.app.renderer.plugins.graphics.updateGraphics(body.originalGraphic); const verticesColor = body.originalGraphic._webGL[game.app.renderer.CONTEXT_UID].data[0].glPoints; let vertices = new Float32Array(verticesColor.length / 3); let i; let j = 0; for (i = 0; i < verticesColor.length; i += 6) { vertices[j] = verticesColor[i]; vertices[j + 1] = verticesColor[i + 1]; j += 2; } const indices = body.originalGraphic._webGL[game.app.renderer.CONTEXT_UID].data[0].glIndices; let uvs = new Float32Array(vertices.length); for (i = 0; i < vertices.length; i++) uvs[i] = vertices[i] * 2.0 / tex.width; const mesh = new PIXI.mesh.Mesh(tex, vertices, uvs, indices); body.mySprite.addChild(mesh); body.myTileSprite = mesh; } body.myTileSprite.texture = tex; } else if (body.myTileSprite) { body.myTileSprite.mask = null; body.myTileSprite.parent.removeChild(body.myTileSprite); body.myTileSprite = undefined; } }
  16. 2 points

    Loading animations from separate files

    I look your files and I think there is a problem of conceptions. Watch how I did it here for animation loading on the fly : http://www.babylonjs-playground.com/#GA8XI#12 You must also make sure that the bones of your first character are the same number as those in the file containing the animations. Use : createAnimationRange and copyAnimationRange
  17. 2 points

    Too many errors [solved]

    "Too many errors" issue in Syntax validation is fixed in the next 1.6.0 version of editor. Panda 2 supports both ES5 and ES6. When you export your project, the code is minified and compiled into ES5-compatible code.
  18. 2 points

    Performance Optimization tips.

    rudimentary stats... TEST DESCRIPTION: rotating parent with gradual increasing number of children(30,60,90) for each rotation, step-interpolation = 0.02, on a closed-circuit track. BASELINE NO-PERF-OPS 3 CONTROL-TESTS: TIMESTART: START-ANIMATION TIMESTOP: END-ORBIT = 1867 TIMESTART: START-ANIMATION TIMESTOP: END-ORBIT = 4294 TIMESTART: START-ANIMATION TIMESTOP: END-ORBIT = 6724 OP-TEST-1 visibility = 0 3 COMPARISON-TESTS: TIMESTART: START-ANIMATION TIMESTOP: END-ORBIT = 1937 TIMESTOP: END-ORBIT = 4237 TIMESTOP: END-ORBIT = 4679 OP-TEST-1 RESULTS: Within variance, visibility = 0 for hidden mesh, reduces orbit time ~2 seconds on third rotation (HOO-RAY). QUESTION: which is better visibility or setEnabled(false)? Bird should read source code, or... TEST: replace vis =0 to setEnable(false) in the same loops... TIMESTART: START-ANIMATION TIMESTOP: END-ORBIT = 1917 TIMESTOP: END-ORBIT = 4227 TIMESTOP: END-ORBIT = 4778 RESULTS: Interesting - visibility is slightly faster (within variance). Didn't expect that. Bird should read source code. NOTE: couldn't use setElement(false) at parent level because in context need parent to remain visible, and only children hidden. NEXT-STEPS: Not going to do LOD test, sticking with simple visibility op for the moment. Instances not applicable. This is solved. Maybe more PERFOPS later. Hope this helps someone.
  19. 2 points
    the error comes from the postprocess; https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/postprocess.vertex.fx https://doc.babylonjs.com/api/classes/babylon.postprocess#useownoutput don't ask me any further i don't use postprocess, have no idea how you can make it fully functional
  20. 2 points
    Great Idea. I made rays from bounding box corners to camera's position. Something like this: var boundingInfo = activeObject.getBoundingInfo().boundingBox.vectorsWorld; for (var i = 0; i < boundingInfo.length; i++) { var ray = pickingRays[i];//pre defined rays for reuse ray.origin = boundingInfo[i]; scene.activeCamera.position.subtractToRef(ray.origin, ray.direction); ray.direction.normalize(); ray.length = BABYLON.Vector3.Distance(scene.activeCamera.position, ray.origin); for (var j = 0; j < scene.activeCamera._activeMeshes.length; j++) { var mesh = scene.activeCamera._activeMeshes.data[j]; if (ray.intersectsMesh(mesh, true).hit) { mesh.visibility = 0.5; } } } I never knew there was a multiPick, its there as scene.multiPick and scene.multiPickWithRay. This helped in other areas. So double thanks for the bonus 😉 The above solution works just right, but I would love to see if there were a better/efficient solution.
  21. 2 points
  22. 2 points
    The Leftover

    Web Assembly

    Gentlemen, thank you for the links. Let me some opinions base on three days of work. I started writing in straight WAT. Because I have a genetic defect that causes me to do things the hard way. However, it has caused me to learn a lot of things. WebAssembly is at the "MVP" stage as they call it. One can only create a module with functions below that - two levels. One can create a list of which functions may be exported. The MVP status shows: I couldn't figure out how to make a module-global variable that was mutable; so I did a work-around. One can share a typed array between JS and WA. In WA, it is called "memory" but there may only be one of them. I redesigned things a bit so all processing was applied against one array. This could put a crimp in my style. Is it possible the "C" converter bypasses these functionality bottlenecks? It seems a little unlikely; I think wat is the textual representation of wasm and they go hand-in-hand. They do appear to be beavering away at this much as we are here. The integration makes it *NOT* an all or nothing kind of thing. When the module is built, it can receive JS functions, notably console.log. So I can log things to the console. I could make other JS calls if I wanted. Exported functions are just a function. You can call it from JS. (If you print them it says "native code", which gave me a kick.) In light of this, I am pushing forward with creating limited functions for the three or four places where Illuminated City sits for more than a second. It requires some re-organization but I have the substantial advantage of being the only author. I can also write these functions in JS. That part is really neat; the array is one array and looks the same whether the manipulation was done by JS or WA. This will be helpful for testing.
  23. 2 points

    Babylonjs consumes too much memory

    A bounding info should contains 20 vector3 (approximately) So 20x3x4 bytes 120 bytes So for 100000 meshes it will be 12mb. Nothing compared to the memory sized used by mesh or texture data. If you want to save large chunk of memory I encourage you reading this: http://doc.babylonjs.com/how_to/reduce_memory_footprint
  24. 2 points

    L3ft 4 Bread

    This is a game that I made for a jam, over 9 days. As such, it's not polished, nor is it finished. It still suffers from texture bleeding, sound issues and has no end state. Still, it's what I made, so here's a link: https://conedstodinggames.itch.io/l3ft-4-bread
  25. 2 points

    TYPESCRIPT in Playground

    I have been coding nearly 3 years almost entirely in TypeScript, so am biased. Once a project reaches a certain size, I feel that JS slows me down a lot. I do agree that there is perhaps not a lot gained in TS playgrounds as they are essentially snippets and I feel that TS doesn't really shine until a project is medium sized. At the same time I feel this is a REALLY great addition, so thank-you @NasimiAsl - I would really like at some point to post my BabylonJS TypeScript code that does not compile without some trickery (ie: try converting http://www.babylonjs-playground.com/#1K0NSN#1) - and now we finally have a way to share!! This was not possible before in a PG, so there is something tangible gained by TS playgrounds. Why not let people choose making playgrounds where they are comfortable and happy --- providing the opportunity for both seems like the right thing. I have a feeling anybody hanging out in the forum will learn TypeScript by osmosis, so that's a good thing too!! Also, the TypeScript playground is missing examples, so maybe that's a good teaching tool as well to see the same examples side-by-side. I hope not a disaster! You will find that it's really trivial to convert from TS to JS - just remove some syntactic sugar from variable/function/argument declarations. TS is just a superset of JS with optional typings