Search the Community

Hi everyone, I'm quite new to babylon JS and need a small bump into the right direction ? Hoping not to fall for the XY Problem here's what I want to do: Going from a model created for Unity, that use special shaders, I want to export these to a WebGL solution. That way I can display these models on any supported browser (even mobile since Unity WebGL is not supported by most) My Approach: Create model in Unity3D with custom Shaders - done Export model to glTF, adding a custom extension to the material that holds all relevant information (specular maps, UV mappings, custom material properties that exceed the standard shaders) - done, made a special extension for the Unity exporter that handles my materials Import glTF to babylon and read out the custom material properties stored in the material extension - this is where I'm stuck Adapt the special Unity shader to work with the WebGL environment of babylon JS Display the model with custom shader and settings stored in glTF file Can someone tell me how to read custom extensions from GLTF within babylon JS? From the documentation I know that for now only the standard extensions are supported (KHR_Materials, draco compression, MSFT_lod, ...). Where do I have to start if I want to add a custom plugin or behavior for the glTF importer that understands my custom material extension? Thanks for your help :)

Demo | Github | NPM It lets a sprite or particle emitter automatically track (follow) a Pointer or Display Object. Try the demo! obj.track(target, { // Default options: offsetX : 0, offsetY : 0, trackRotation : false, rotateOffset : false, disableBodyMoves : true }); // … obj.untrack();

Hi All! We have developed a complex monetization solution for browser extensions (chrome extensions, browser addons, toolbars, etc) and I would like to invite extension developers to try it and make money.

Hello, How can I use Babylon's extensions with NPM imports (es6 style)? To resume my problem: 1. I use NPM and Webpack for my project. To use Babylon I've install the node module babylonjs and I import the lib with the line: import BABYLON from 'babylonjs' 2. I would like use too the Sky extension https://doc.babylonjs.com/extensions/sky To do that I try to import it with the line: import {skyMaterial} from 'babylonjs/dist/preview release/materialsLibrary/babylon.skyMaterial.min.js' 3. The compilation is done but in my Browser I've an error : Uncaught ReferenceError: __extends is not defined at eval (webpack-internal:///36:1) at BABYLON (webpack-internal:///36:1) at eval (webpack-internal:///36:1) at Object.<anonymous> (app.js:951) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///29:7) at Object.<anonymous> (app.js:904) at __webpack_require__ (app.js:660) at fn (app.js:86) I've forgot something or it's the wrong way?

I made a generic Sprite + Arcade Physics controller so you don't have to. Demo / Code // Create var sprite = game.add.sprite(); // … var gui = new SpriteGUI(sprite); // Shutdown gui.destroy();

GitHub / NPM / Demo // camera.follow(target, style, lerpX, lerpY, offsetX, offsetY) camera.follow(player, FOLLOW_STYLE, 0.5, 0.5, 64, 64); // or camera.targetOffset.set(64); camera.targetOffset.set(0);

Hi there, Can anyone here point me in the direction of a Live2D tutorial or library that would work with Phaser? This seems like an interesting concept and I have not seen anyone try this yet to my knowledge. http://www.live2d.com/en/ https://avgjs.github.io/pixi-live2d-example/ Thanks in advance!

Debug methods for timers and timer events. GitHub / NPM / Demo // Show duration since timer started: game.debug.timerElapsed(timer = this.game.time.events, x, y, label = timer.name) // Show a timer event's pending interval (uncommon): game.debug.timerEvent(event, x, y, width = 100, height = 20, label = event.name) // Show all pending timer events for a timer: // {width}px === 1000ms // Use, e.g., height = 10 for smaller bars game.debug.timerEvents(timer = this.game.time.events, x, y, width = 100, height = 20, label = timer.name) // Show the next pending timer event: game.debug.timerNextEvent(timer = this.game.time.events, x, y, width = 100, height = 20, label = timer.name)

For when you can't figure out what your emitter is doing. GitHub / NPM / Demo // Show center and area game.debug.emitter(emitter, color = null, filled = true) // List properties game.debug.emitterInfo(emitter, x, y, color = null) // Count existing particles game.debug.emitterTotal(emitter, x, y, width = 100, height = 10, color = null, label = emitter.name)

Please see the fun examples | source

GitHub / NPM group.onChildAdded.add(function (child, parent){ /* `child` was added to `parent` */ }); group.onChildRemoved.add(function (child, prevParent){ /* `child` was removed from `prevParent` */ }); group.onChildKilled.add(function (child, parent){ /* `child` was killed */ }); group.onChildRevived.add(function (child, parent){ /* `child` was revived */ });

GitHub / NPM You could use it to animate, start emitters, update health bars, … var sprite = game.add.sprite(); sprite.onDamaged.add(function (amount, health, maxHealth){ // sprite was damaged by {amount} // now has {health}/{maxHealth} }, sprite);

Hello ! I just finished a first version of bGUI (for babylon GUI), which is an extension to Babylon to create a GUI directly in your game scene. Useful for someone who wants to create a GUI for a mobile game on Cocoon platform (I'm looking at you canvas+), or for someone who wants to control the game and its GUI in javascript without manipulating DOM element. - Source code : https://github.com/Temechon/bGUI - Demo : http://temechon.github.io/bGUI/ - Documentation : http://doc.babylonjs.com/page.php?p=25102 I'm working on the v1.1 this weekend, all your feedbacks are of course welcome ! Cheers,

Some background followed by several related questions. I have written a Javascript file myExtensionFile.js to submit for consideration as an extension. The current format of the file consists of a public function that calls several private functions and looks like this var private1 = function(a, b) { //code here } var private2 = function(a, b) { var myx = private1(c, d); //more code here } var myExtension = function(a, b, c) { //some code var myx = private1(m, n); //more code var myy = private2(p, q); //even more code } Once loaded you call it using myExtension(a, b, c). Now I have noticed that some files in the Babylon Extensions use BABYLONX Question 1 Should myExtensionFile.js be re-written so that it is called using BABYLONX.myExtension(a, b, c)? Question 2. If I changed to using BABYLONX is this the correct way to re-write myExtensionFile.js? var private1 = function(a, b) { //code here } var private2 = function(a, b) { var myx = private1(c, d); //more code here } var BABYLONX; (function (BABYLONX) { var myExtension = function(a, b, c) { //some code var myx = private1(m, n); //more code var myy = private2(p, q); //even more code } }()); Something to do with closures (I think) but haven't got to grips with them as yet. Question 3. Would using BABYLONX in this way clash with other extensions? Question 4. I can see that using BABYLONX rather than BABYLON shows in code that an extension is needed and should be loaded but would using just BABYLON be better for continuity? Is it possible to do that? Question 5. How would you format the myExtensionFile as typescript. I know I could just change the js file extension to ts but to be 'proper' typescript should I be using modules and classes? Question 6. For someone with a limited skill set (like me) would it be useful to have an 'How To Format A Babylon Extension for Javascript and Typescript' document? When I am clear whether there could be a standard format for writing extension code, what the format looks like and how to do it I wouldn't mind having a go at the documentation. Whether I will ever have sufficient clarity is another issue.

Does BabylonJS has a method for generating such array: [_px.jpg, _py.jpg, _pz.jpg, _nx.jpg, _ny.jpg, _nz.jpg]?