Leaderboard


Popular Content

Showing most liked content since 07/20/2017 in all areas

  1. 8 points
    renjianfeng

    A zombie FPS game demo

    Hi~ I'm from Hangzhou, China. I wrote a FPS game with babylonjs, but there are still many things to do. I uploaded some complete code to GitHub, and if you're interested, you can always download it, and I'll synchronize the latest code with GitHub in time github url:https://github.com/renjianfeng/BabylonFpsDemo (click Star) github.io url:https://renjianfeng.github.io/BabylonFpsDemo/example/index.html (Thinks satguru) Also, please remember to bring your headphones and enjoy the perfect sound effects. (at least I think so.) Some screenshots
  2. 7 points
    rich

    Phaser 3.0.0 Alpha Released

    Hi all, If you're interested you can now download and play with the Alpha release of Phaser 3. There are lots of places to get it, from GitHub to npm, which are detailed on this page. Once you've got it running I'd urge you to check out the Phaser 3 Examples. Click 'Edit' on any demo to see the code and learn from it! There are no docs at all in v3 alpha, we started work on those today, so expect to see the start of them in the Beta release at the end of August. Cheers, Rich
  3. 6 points
    JCPalmer

    Blow Me, Baby

    I recently made a demo scene for the SIGGRAPH 2017 WebGL conference put on by Khronos in L.A. last week. There were sections other than WebGL, like OpenCL, glTF, Vulkan as well. I understand from Ken Russell that it was shown at the start. A little of a departure from the many test / QA, & development Tool scenes for QI that I have been doing. I have 3 more of those close to done to close out 1.1 release. Always go to do a "real" scene here and there.
  4. 6 points
    NasimiAsl

    Wexha Planet

    new Planet Version ( walk on Jump in full sphere scene ) http://www.500blog.com/ start with "quike look " or "mobile look " shift = speed , a s d w = move , space = jump , m : look scene
  5. 6 points
    Luaacro

    Babylon.js Editor

    Hey, the editor v1.2.0 has been released and you can now attach custom scripts written in JavaScript to your objects directly into the editor! More informations: https://medium.com/babylon-js/babylon-js-editor-v1-2-0-6c760470098 A demo:
  6. 5 points
    I have just build 3D Text meshes in Babylonjs with the help of Vectorize-text. Please visit website http://grid.vn/3dtext to play and see the source code. ... but the 3D Text meshes still not correct at the holes, some one can help please???
  7. 5 points
    Update: we got the resize running. So we got a running prototype (object pose, projection matrix, window resize) are all handled. Now we need to clean the code. here is a video of the working resize -
  8. 5 points
    More and more progress. now the babylon sphere is on top of the marker
  9. 5 points
    Just launched this week! Play free here: http://striketactics.net/play
  10. 5 points
    Holle!~~ Translation of some keywords 【进入游戏】->【PLAY】 【瞄准方式】->【Target mode】 【重新开始】->【restart】 【重力感应】->【gravity sensor】 Sorry, My English is not so good Babylon is an excellent js game engine Play with it! thinks!!!! url:https://forreall.cn/3ds/app/zhanji/
  11. 5 points
    Property keys in JS are dynamic and can be calculated at runtime i.e. let obj = { foo: 'bar' } let i = 10 while (--i) { foo['prop' + i] = i * 2 } console.log(foo) // { // foo: 'bar', // prop10: 20, // prop9: 18 // ... // } So, in your case, you could eliminate awkward branching logic (which is always a good thing) and do something like: // Warning, anti-pattern ahead const handlers = { onClickArrow1: () => {...}, onClickArrow2: () => {...} } function init () { let i = 3 while (--i) { arrow[i].on('click', handlers['onClickArrow' + i]) } } But, this is kinda rubbish as (at least in your example) all your handlers are the same. In the name of creating code that can be reused, is reliable, single source of truth etc etc I'd suggest doing something like passing in the context your handler is working with: function checkScale (arrow) { return arrow.scale.x < 1 && arrow.scale.y < 1 } function prepClick (arrow) { return function onClick (event) { if (checkScale(arrow)) { return } ... } } let i = 10 while (--i) { arrows[i].on('click', prepClick(arrows[i])) } There are lots of good esnext syntax to do this sort of stuff, but thats a separate issue Notice the `prepClick` function, this returns a function, this is sometimes called a thunk, but it uses closure to make arguments available later, in this case we trap an `arrow` object in the closure so that the actual event handler (onClick) can reference the specific instance it wants to work with when it is invoked later. If you're on an OOP track then this stuff becomes easier to specify but JS handles context really weirdly so you'll have to deal with `this` issues. This way is more functional, but either way will get you where you want to be without writing the same stuff over and over. http://wiki.c2.com/?DontRepeatYourself
  12. 4 points
    Thanks JohnK! I added your magic line of code hole.reverse(); // ADD THIS HERE and it work like a charm. I also add the thickness option. Thanks again! Hi jerome! It seem hard work to use directly the data from the font design file because javascript not render the text it self but the host OS do this (not for sure). But I know the good source to dig is Cairo. The download button has added so please play the result with Babylonjs Sandbox. Thanks for your download feature suggestion!
  13. 4 points
    Hey guys, My name is Mike and I'm from Korea. Me and 14 other guys are making a HTML5 MMORPG called "Mad World". Here's its trailer. And here's rain animation The game has all the familiar features of MMORPGs but the combat is more face-paced. It has hand-drawn artstyle like you see here. I will be posting some updates here from now on, and maybe some development tips we learn along the way. We want to be a pioneer in the area HTML5 in Korea which is still very new in the country. We want to make it available worldwide by the end of 2018, so we still have a long way to go. Any feedback is welcome by the way. Thanks and let me know what you think of the game! For more information on the game, you can visit our website: www.jandisoft.com or follow us on Facebook Twitter Youtube Here's the latest update Aug.16, 2017 - Cross-platform test Here's a wip customization system,. Oh, and we recently opened a forum. Come by and say hello if you're interested. =)
  14. 4 points
    TomaszFurca

    Slavs - slavian rpg game

    Check new version of preview: - character select - New lights - character select - new sounds Live: babylon.furcatomasz.pl
  15. 4 points
    JCPalmer

    Stranded Hair Update

    Well, have published a test scene to experiment with hair color. I have a question about what is the color shade , used by LineMesh, supposed to be doing with alpha? Its use can actually give a good effect (try it with platinum blonde), but not knowing what it does makes me nervous. This process seems to be close to working, but have come to the realization that the width of the lines is always the same # of pixels. This means very far away, it can tend to look like shag carpet, due to the head being small. When really close the scalp is very visible. For the very close case, I suppose I could try using an emitted material in areas where you should not see the the skin. Any thoughts?
  16. 4 points
    I wrote an interactive neural network visualization web program where people can explore the inner workings of neural networks. Here is the description page (where I mention and link to BabylonJS in the FAQ): http://miabella-llc.com/ This is the browser-based application: http://www.miabella-llc.com/ANN/
  17. 4 points
    Here is a video of the current status. position/rotation/scale seems to work (using scene.useRightHandedSystem = true) I still need to push the custom projection matrix, and then to handle resize.
  18. 4 points
    davrous

    BabylonJS Mansion in WebVR

    I do confirm Babylon.js works great in WebVR in GearVR. To make it work, you absolutely need a button to click to enter VR. As my demos on my tutorial are using the click on the canvas, they don't work for now. I'll update them. I've also fix a small bug on the web audio side which now enables Sponza VR to work in Gear VR. Still, even on a S8, it's very choppy. The scene is too complex for the Gear to render in VR. Maybe if I'm lowering down the resolution it could work much better.
  19. 4 points
    I love your energy! so i just started working on it at 4am. sleeping in another life. Code will happen here until it goes math and object3d ... enougth to be pushed into ar.js itself https://github.com/jeromeetienne/AR.js/tree/dev/three.js/examples/object3d-glmatrix
  20. 4 points
    Hersir

    Compressed texture generator

    Hi all, We with my colegue decided to share texture generator node-js tool that we created. Its port of compresed texture generator script to node, so it can be used cross platform not just on win machines, also included in build scripts. NPM: https://www.npmjs.com/package/babylonjs-texture-generator GIT: https://github.com/evolution-gaming/babylonjs-texture-generator Feel free to post issues and suggestions on github. More information is located inside README.md file.
  21. 3 points
    javalang

    PBR Node based composer

    Hello, I'm happy to announce that the node based PBR Composer is on the road. What is PBR Composer ? In short, PBR Composer helps you design and visualize a PBR Material in an efficient way. Nodes, typically textures, colors and uv-coordinates can be arranged and connected to a graph with a PBR material as output. This PBR material and the corresponding js-sourcecode (tailored for BJS) is visualized in realtime, the graph (JSON format) can be downloaded for later use. Images can be inserted via preview fileselect dialog and/or Drag&Drop, in latter case the images will be transformed to embedded data-urls so the javascript functions can be reused without dependencies. Different meshes and environment-maps are available to see the material under different geometry and reflective light conditions. Motivation for PBR Composer: Due to the complexity of the PBR material (soo many combinations with soo much amazing effects) there is a need of having realtime feedback reflecting the changing parameters. Other than some editor already out using a bunch of parameters in confusing properties panels, nodes lets you to concentrate only on the parameters you need giving a nice overview in form of a graph. The originally idea for realizing the PBR Composer was coming from Shader Editor. Technical details: PBR Composer is a web application based on dat.gui, w2ui, litegraph.js and of course BABYLON.js TODO: At the moment, PBR Composer is customized for PBR-Glossy materials. The future plan is to switch between Glossy and Metallic paradigms. Any questions? Let me know... PS: PBR Composer is still in alpha stage but will be deployed in beta stage soon
  22. 3 points
    doing progress. Now the api starts to be usable by others
  23. 3 points
    Skeptron

    [OWN - Closed Alpha] Testers needed!

    Hi everyone! I've been working on my own in the past months on a game, OWN. It is a competitive, multiplayer, real-time, free-to-play and browser-based game developped with Phaser of course. To quickly sum it up, it is kind of a mix between Super smash bros and League of Legends. In 1v1, 2v2 or 3v3 you face opponents in a quick deathmatch on a small map. Games are super fast (3-4 min max) so that you can easily choose how much time you want to spend playing. Here is a short video footage of the game (sorry for the poor quality, it's just raw sequences to get an idea) : Even though the game is not quite finished yet, I'd like to increase the number of testers to have more feedback and to test the architecture. So I really do hope some of you will be curious enough to give it a try. If you're interested, please PM me so I will provide you with some registration keys for you and a couple of friends. Hope you guys have a nice day!
  24. 3 points
    renjianfeng

    A zombie FPS game demo

    Add VolumetricLight Optimized for shadows and Blizzard effects!
  25. 3 points
    end3r

    js13kGames 2017

    The competition has started! This year's theme is: lost. Good luck and have fun!
  26. 3 points
    UPDATE: stellar fire particles...
  27. 3 points
    JohnK

    How to get circumference of mesh?

    (The term should be perimeter not circumference but no nit picking among friends). At first I thought I had a solution but it does not seem to generalize. Using raycasting I obtained an acceptable result. Taking a box of side 4 I got 15.9 as the circumference which is pretty close to 16. The lower the increment the more accurate the result. Here is the PG, check console for circumference. https://www.babylonjs-playground.com/#KNE0O#48 However when I tried to do the same thing with the skull the individual picked point results and the circumference do not make sense. According to the boundingInfo the skull is about 46 across which gives a ball park figure of 90 for the circumference at the chosen Y point but I get 9.7. Perhaps I am on the right track and just do not know enough about raycasting to do it properly or maybe it is not the way to do it. Anyway here is PG with skull for what it is worth. (by the way with the skull an increment of 0.01 for the skull locks the browser for a long time). https://www.babylonjs-playground.com/#KNE0O#51 EDIT When I showed the rays I found the mistake, the rays were not in the direction I expected. I had modified another playground but found to get rays in right direction I should just use the forward vector not the calculated direction vector. So this might work https://www.babylonjs-playground.com/#KNE0O#52
  28. 3 points
    Wingnut

    Two sided materials

    Yep. And perhaps mesh.material.backFaceCulling = false; And then, if you are using a hemisphericLight... it might be wise to have: light.groundColor = new BABYLON.Color3(.5, .5, .5); (for lighting-up your bottoms)
  29. 3 points
    satguru

    Terrain Slope Problem?

    @Mythros See if this helps. This just uses moveWithCollisions and some simple physics. https://ssatguru.github.io/Vishva.ts/public_html/index.html?world=demo2 You will see three planks at different angles. The first plank is less than 30 degree, the other two more than 30 degree. Use WASD or arrow keys to walk the AV over each of those planks. The AV slides down the more than 30 degree planks if its stops while walking up those planks. The slide slope limit is set to 30 degree. The code https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts The slide slope limit is set here https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts#L18
  30. 3 points
    aFalcon

    BABYLON.Augmented Reality ... in AR.JS

    AR Deep Dive Day 3 -> success. "Hello World" - BabylonJS knotBox rendering in AR.js (with three.js knotbox): TransformMatrix placed into camera._computedViewMatrix. Code posted: http://www.3dwebscapes.com/demos/arbjs5/ Insert this second line: look at with Hiro marker. markerObject3D.matrix.getInverse( modelViewMatrix ) cameraB._computedViewMatrix = new BABYLON.Matrix.FromArray(markerObject3D.matrix.toArray()); //SPLICE-FINAL! There is still some offset bug. Perhaps default world rotation thing in artoolkit (I'll look). @Deltakosh & @davrous & @jeromeetienne I hope this helps. Key-Takeaways: The type float23Array(16) looks compatible at the Transformation Matrix. Building from Array, can re-render in a single line of code. : ) There was some difference in Matrix Math -> around multiply (so yeah, consideration) BABYLON.Math seem sufficient coverage with (https://doc.babylonjs.com/classes/2.5/matrix) so no need for gl-matrix.js? I'd think, at first. But then... Ah wait, dependancy-consideration... AR API, so ok, understand fully. That might get tricky. : ) Babylon.Matrix lives here (https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.ts) Thx,
  31. 3 points
    Pryme8

    Infinite Terrain Idea Bounce...

    http://www.babylonjs-playground.com/#f00M0U#28 Just fixed that thanks ^_^.
  32. 3 points
    Arte

    TrackBall confusion

  33. 3 points
    mattstyles

    PIXI.js & Typescript Getting Started

    Typescript isn't for splitting your code into separate files, its a type checker to try to add types to JS. ESNext (es6 became es2016, which is now es2017 and es2018, its awkward! es2015 was probably the first one used) is a specification for new syntax and language features. Module spec was defined as part of es2016 but has only very recently been implemented in some browsers, although still might not work as you expect. Other new syntax that is now in browsers and commonly used are stuff like arrow functions, classes, template strings, let, const etc etc Babel is a transpiler, which converts your code into something else, most commonly it gives you access to new language features and converts that code into something that browsers of today (and yesterday) can understand. Typescript is also a transpiler as the source code you write can not be understood by any browser so it converts it into something that browsers can understand, along the way it also type checks as best it can from your static code. Browserify, webpack, rollup etc are module bundlers, which sounds like they are the things you want. All of these projects have great documentation and lots of getting started help, plus they're all mature projects so there's loads of info out there. I'd suggest starting with a module bundler. This gets you in to the realm of creating a build pipeline (dont worry, its easier than maybe it sounds, and lots of help out there). Once you get a bundle going, i.e. turn multiple files in to one (yes, you could just concatenate buts sounds like you want to deep dive this so go straight to module bundling), you might want to look at adding a transpilation step, use Babel to start with. Once you've got babel transpiling your code and a module bundler (I'd recommend browserify to start as its easiest), you might want to think about tacking on Typescript if types are your thing (also check out Flow, which is an alternative type checker). Type checking is a bit hard in JS, but don't fall in to the trap that suddenly your code will be safer, it won't be, although it will be better documented. Good luck! Ivan beat me to the bullet but has reminded me to clarify: if your goal is to split your project up into different files then you don't need any of these tools, they certainly add a fairly hefty level of complexity, if you're not onboard with the advantages then don't use them.
  34. 3 points
    NasimiAsl

    Do Effect behind the Glass | Eash

    hi @javalang sorry i see this now i dont remember who change it by this http://www.melyon.ir/preview/index/30307 but you can see glass in here http://www.babylonjs-playground.com/#FT2RY#110 that optimized for all background color http://www.babylonjs-playground.com/#FT2RY#111 thanks for @Temechon for help make this and that material copyright belong to him
  35. 3 points
    NasimiAsl

    GirdMaterial - Shadow Support (bug?)

    maybe custom material can help https://www.babylonjs-playground.com/#Y5IZCF#3 @rdzar @Sebavan you can put grid material shader in custommaterial diffuse method for have gird material with shadow
  36. 3 points
    satguru

    Third Person Dogfight Camera

    See if this helps. https://ssatguru.github.io/Vishva.ts/public_html/ A third person camera keys "a" and "d" rotates the character left and right , in other words rotates the character around y axis and the camera seems to follow. I say seem because that is not quite true. It is not the camera which follows the character but the character which follows the camera Rotate the camera and then rotate the character based on the camera rotation Here's the code https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts Here are the lines for rotation https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts#L262
  37. 3 points
    Deltakosh

    Help wanted!

    Hey team! we were clearly heads down working on 3.0. Now that we successfully shipped it I would like to get the help of our wonderful community. I would like to improve the content of our documentation. If you go there: https://github.com/BabylonJS/Documentation/issues you will find a list of issues related to the doc. There are 2 kinds of issues: Missing documentation: These issues are used to flag a missing tutorial / documentation / overview Incomplete documentation: These issues flag articles / topics where we consider we should add more info If you want to help, you can: Create more issues to help identify what is missing / incomplete / unclear / using bad english / whatever could be wrong Take one issue and fix it: My favorite one Pick an issue, read this small tutorial and contribute to the best doc ever made for a 3d engine One of the goal of the 3.1 will be to add helpers everywhere to make common tasks even simpler. And I'm convinced that doc will be an important part of this simplification as well. Thanks a LOT
  38. 3 points
    Deltakosh

    Announcing Babylon.js v3.0

    We did it again Congrats to all our great community, we've just shipped Babylon.js v3.0: https://github.com/BabylonJS/Babylon.js/releases/tag/v3.0.0 I hope you'll like it! And the blog post: https://github.com/BabylonJS/Babylon.js/releases/tag/v3.0.7
  39. 2 points
    JCPalmer

    Stranded Hair Update

    actually, I figured out why the original scene hung (1/2 a billion console log messages). It looks weird from some angles due to going all white, but zoom looks great from this angle. Number of strands could greatly be reduced. Maybe could use default shader, but is all the white about?
  40. 2 points
    There're simple ways like class DContainer extends Container { addChildZ(container, zOrder) { container.zOrder = zOrder || 0; container.arrivalOrder = this.children.length; this.addChild(container); this.sortChildren(); } sortChildren() { const _children = this.children; let len = _children.length, i, j, tmp; for (i = 1; i < len; i++) { tmp = _children[i]; j = i - 1; while (j >= 0) { if (tmp.zOrder < _children[j].zOrder) { _children[j + 1] = _children[j]; } else if (tmp.zOrder === _children[j].zOrder && tmp.arrivalOrder < _children[j].arrivalOrder) { _children[j + 1] = _children[j]; } else { break; } j--; } _children[j + 1] = tmp; } }; } If you need sort inside the container, use it. If you need to move one element, just swap it with last element in container, there's swapChildren or something like that in docs. Or remove/add it again. If you need sort through the tree, use pixi-display, I recommend latest version: https://github.com/pixijs/pixi-display/tree/layers , its called "pixi-layers" instead. That's why I like gradual approach - choose the solution that corresponds to the scale of your problem. No one will call you stupid if you use just simple things for simple problems There are people who think "why dont you use complex solution like webpack, too stupid for it?" but seriously, just ignore them.
  41. 2 points
    jerome

    BABYLON.Augmented Reality ... in AR.JS

    AFAIK, everything is in the class Engine : https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.engine.ts#L1314 https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.engine.ts#L1329
  42. 2 points
    I've figured out my question. To scale the game and the assets you use: this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.scale.setUserScale(.7, .7, 0, 0); .7 is a percentage of the original games size. You would just need to calculate the percentage needed to get to 853 x 480.
  43. 2 points
    Woot woot woot!! I would love to make it an official extension. How do you plan to distribute the code? Rely on your github? We could leverage our doc for isntance to help people using your awesome work
  44. 2 points
    Hi there! I've been busy working on a modification to the Blender exporter and Babylon in an effort to support smooth interpolation natively, based on FCurve handles, as opposed to having to bake every frame of every animation prior to export, which can be rather time and space-consuming. So far, I have a system which works fairly well, feeding the "right handle" offset of each keyframe to Babylon which then packs that information into the inTangent and outTangent properties of each imported keyframe. This has smoothed out my animations considerably, but it's not a 1:1 reproduction, and I feel like I could do more. inTangent and outTangent data is currently fed to Babylon's Hermite interpolation equation, which is certainly better than the Linear default, but still not as sweet as it would be if it used Bezier just as Blender does. Unfortunately, my Bezier kung-fu is weak, and making the translation from X/Y handle coordinates to Bezier coordinates for each axis is confusing me. So, in summary, I'm now able to import the key and handle coordinates for each frame in Blender animations. I'm just having some trouble figuring out how to translate those into a contiguous Bezier curve at the time of animation. I'm familiar with the vector3InterpolateFunctionWithTangents() function, but inTangent and outTangent data doesn't seem to be enough for a full Bezier calculation. I could add more easily enough; I'm just a little fuzzy on how to go about it, and my experiments so far have resulted in some pretty crazy animations. Any thoughts? I would love to be able to wrap this up into a nice and tidy pull request.
  45. 2 points
    Hey Wing... This forum without you like "lake without any fish" onCollideObservable = best crap (I'm avoiding loop with this crap) Now I need just find witch face is collided, but I can calculate from last position which direction it's moving. Thank you for your help - AGAIN.
  46. 2 points
    aFalcon

    BABYLON.Augmented Reality ... in AR.JS

    AR-DEEP-DIVE-DAY-1: Learning comes from @jeromeetienne and @AndraConnect (follow twitter) +1. Hello && welcome. : ) For everyone who already knows, JE and AC are doing phenomenal work in AR. Of the 3D rendering options for AR, BabylonJS would be an exceptional renderer - I think the best. However, I am biased by great results. Turns out -> there are two phenomenal "Jeromes". Two phenomenal "Davids" we can handle! But now two phenomenal "Jeromes"!?! Does this happen? I only wish... Jk. : ) Straight to the point. Here-Is-What-I-Am-Learning about AR: AR.js - is here - https://github.com/jeromeetienne/AR.js thanks to @jerome_etienne Reading through master +1. Great components under THREEx = {}. the code is vanilla and beautiful.. The ReadMe (local) is the best starting point (https://github.com/jeromeetienne/AR.js/blob/master/README.md). Too many links!!! A good sign. : ) #1 KEY-INFO: From ReadMe: AR.js uses genius solution: - "**emscripten and asm.js**! ... compile artoolkit c into javascript" Thank you Brendan Eich. : ) Jerome is on it... - "Only thanks to all of them, i could do my part : Optimizing performance from 5fps on high-end phone, to 60fps on 2years old phone." - ARToolkit, is also impressive: https://artoolkit.org/ wow - crashes Chrome Dev Tools over "asm". Oh Text search. Watch out for that! mmm, look at those shaders!?!. - Innovations in; shadows, reflection, portals, multi-marker, table-top, & "Principles of AR" Look at that... with principles. even. Like+1. - In addition to ARToolkit, it looks like two other engines may be used: aruco, tango. 2. After a big BLOB of minified ASM awaits this helpful hint: Nicely done, and then... var ARController = {}; ... as a prototype : ) In a nutshell... a good place to put a breakpoint? : ) Yes... ARController talks to artoolkit... : ) Basically accesses AR-API. Awesome. As expected... obj.onSuccess = function() { } It calls back ... with a video? yep <video> saw that... new world. : ) PLAN: Look: <a-frame><a-marker>export AND Threex base object full of tools. (interesting hoisting pattern) -> AND (using .position [gotcha] camers.matrix) maybe slip in BABYLON.Mesh.CreateKnot() ... at the last moment? Rendered to a second <canvas> <video> at a higher z-index... would it work? Could it work? -> Idk. UPDATE -> It worked UPDATE -> more of a "cannonball" than a "belly-flop". UPDATE -> lucky is good. Looks like: PresentationMatrix.... Transform Matrix.... Camera.matrix. UPDATE -> It was BABYLON.Camera._computedViewMatrix and TransformMatrix calculation in an array to BABYLON.Matrix.FromArray(). Of course this is only a learning exercise in AR... Because 1) The "Davids" will surely do something more phenomenal, and if not -> the"Jeromes" will. : ) And 2) I am only pedaling furiously on a tricycle, far, far... behind. If you are NOT a "Jerome" or "David", like me, this thread sprinkles out a few breadcrumbs from a BABYLONJS + AR.js learning collision. Hope it helps.
  47. 2 points
    Like I mentioned, PixiJS has no mechanism to help you with it. But you can draw DOM to a canvas, if you search for methods/libraries. For example, MDN article about it: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas Because if you have DOM on top of the canvas (or a transparent canvas with DOM behind it) the browser has to composite the DOM it renders with your canvas. If there is no DOM above the canvas (and the canvas isn't transparent) it can just blit your output texture, which is much faster. The performance difference exists and is measurable, however many applications won't bump into this.
  48. 2 points
    Hi all, Babylon.js makeIncremental script port to node/gulp , so it can be used cross platform and integrated in build tasks. GIT: https://github.com/evolution-gaming/babylonjs-make-incremental NPM: https://www.npmjs.com/package/babylonjs-make-incremental Feel free to post issues and suggestions on github. More information is located inside README.md file.
  49. 2 points
    samme

    How to make time scale

    You need to match time.desiredFps to time.slowMotion. See
  50. 2 points
    yahiko

    How to use vertex shader with Pixi.js?

    After studying your examples, I've come to the conclusion that I don't really like plugins --- or I can't really see how to use them for my purposes, which is an equivalent assertion in my mind I was forced to have a look into the WebGL thingy and PIXI.glCore in particular. I think, for my needs, it is a good compromise between high level Pixi v4 powerful and optimized features, but lacking some abilities to deal with the vertex shader, and the very low level WebGL context quite burdensome after some hours of practice. So, I came up to this small program which is able to display a transformed white 3D photorealistic... triangle! Don't laugh, because it costed me hours of studying since I'm new in the world of WebGL and shaders ^_^' /* Initialize WebGL Renderer */ const width = 800; const height = 450; const renderer = new PIXI.WebGLRenderer(width, height, { antialias: true }); document.body.appendChild(renderer.view); renderer.backgroundColor = 0x000000; /* Shortcuts */ const gl = renderer.gl; // WebGL Context const glCore = PIXI.glCore; /* Load shaders */ let shaderVertSrc = document.getElementById("vertShader").text; let shaderFragSrc = document.getElementById("fragShader").text; /* Initialize shaders */ let shader = new glCore.GLShader(gl, shaderVertSrc, shaderFragSrc); shader.bind(); /* Vertex Buffer */ const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; const vertexBuffer = glCore.GLBuffer.createVertexBuffer( gl, new Float32Array(vertices), gl.STATIC_DRAW ); /* Vertex Array Object */ let vao = new glCore.VertexArrayObject(gl) .activate() .clear() .addAttribute( vertexBuffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 0, 0 ); renderer.bindVao(vao); /* Uniforms */ let mvMatrix = mat4.create(); let pMatrix = mat4.create(); mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]); mat4.perspective(pMatrix, Math.PI / 4.0, width / height, 0.1, 100.0); shader.uniforms.uMVMatrix = mvMatrix; shader.uniforms.uPMatrix = pMatrix; /* Draw */ vao.draw(gl.TRIANGLES, 3, 0); The live snippet can be found here: Now, my issue is to be able to turn my nice triangle into a PIXI sprite, in order to come back into a normal world. Any hint would be really appreciated!