Search the Community

Showing results for tags 'playground'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 33 results

  1. Hi, I'm testing code at: and want to try my own image for the ground. On line 35 I put “” instead of "textures/ground.jpg", I control+click on it and sure enough my image comes up in browser, but when I hit Run I just get the default checkered image. Why is this happening? Thanks, R.L. Hamm
  2. Writing playground based tutorials (PBTs) just got easier. Well a little bit easier than when it started in this thread. There are now methods available in the playground for anyone to highlight or hide lines in the editor and to build simple standard information and selection dialogue boxes. Documentation is available to describe the available functions with links to a couple of examples and how they were coded. Even if you do not want to write a full tutorial the functions can be used just to highlight some lines in your code or even to hide and unhide some lines as in this example A word of warning - I thought that this example was simple enough so I ignored my own advice from the documentation and just added the function to hide code straight into the playground and forgot to change a true to a false and ended up losing the code I needed to correct. So unless you are just using line decoration always write and edit the code in a text editor and copy and paste into a PG and Run to test, don't Save until you are sure everything is correct..
  3. Currently I am writing PBTs (Playground Based Tutorials) . Writing the code in the playground editor is OK but since the code alters itself it can get tricky and you can lose code you have just written. Writing the code in VSCode and then copying and pasting into the PG and running is one way. The best way I have found is to clone Babylon.js install npm and monaco into the playground directory add simple serve script into the playground directory run local server in browser localhost.../index.js Is this the best way to obtain and run the Playground locally? If not what is the better (best) way?
  4. Hi, I am behind a proxy and the following behaviour on different browsers occour. If I call a PG with appended Scene ID like the playground loads and allways shows me the basic scene. New URL is then Seems that there is a redirection or something else? What could be the reason for that?
  5. Hi, guys. I'm having some cursor-alignment issues with the latest Playground editor. I suspect is has something to do with the new navigator pane, but I can't be certain. I've attached an image showing where my mouse cursor is, vs. where the text cursor ends up when I click. If I were to type at this moment, characters would be inserted immediately after the 'V' (where the mouse is), with the text cursor lagging behind. The problem is more profound the closer you get to the right-side of the window. I'm using Chrome 61 on a MacBook Pro. This doesn't appear to be a problem in Firefox or Safari. Edit: Speaking of Firefox! I just noticed that using the arrow keys to manipulate a FreeCamera causes the entire window to scroll slightly. Don't forget that event.preventDefault()!
  6. Hi, I get following error on safari macOS (could be because it is webgl 1.0). this._gl.createQuery is not a function. (In 'this._gl.createQuery()', 'this._gl.createQuery' is undefined)
  7. From today I am getting a Blocked loading mixed active content message whenever the page uses an external url and var s = document.createElement("script"); s.src = url; document.head.appendChild(s); This affects a number of PGs including, among others, Jerome's dynamic terrain PGs. This seems to be because the playground is now delivering all pages using https. Is this a recent change? When this happens the PG can be unblocked using the lock icon next to the PG address. This is annoying. If security demands https then in future all demonstrations of new functions will require the direct placement of the new functions as code within the PG editor, Can this decision to deliver all PG pages by https be reversed or are security concerns such that delivery for all PGs must now use https?
  8. Hi gang. I'm going to ping @Temechon on this, as well. Repro: 1. Load simple playground with Window at full-screen (NOT canvas at full-screen. Keep normal 50% split with editor/canvas.) 2. Use settings menu and un-check editor choice (turn OFF editor in settings) 3. Restore the window (de-full-screen it) 4. Drag Window width until it is narrow. 5. Drag Window width until it is wide, again. Did editor re-appear? It does so in my firefox. Possible PG bugger/oddness.
  9. hello guy's I have a simple question really so simple why i cannot make playground work on local or on my serv ... this is playground scene from "" this is the basic scene its work properly thx in advance
  10. Hi, does anyone have problems with new playground on mac safari browsers? Every time I click run scene just disappears.
  11. Edit: NEVERMIND, I checked noscript and that was blocking urls! I havn't had troubles saving before so didnt think of that!. Here's the url if you want to see it in action! Hi, I'm guessing this probably isn't a bug and is a security feature but I was creating a playground where I was projecting a world position to screenspace and then using css to position a div to make sure it was correct. I couldn't find any information about unable to save a playground mentioning DOM manipulation. Heres the code that is unable to save with the error Unable to save your code. It may be too long. var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); var time = 0; var blob = document.getElementById("blobby"); var canvasZone = document.getElementById("canvasZone"); = "relative"; if ( !blob ) { blob = document.createElement("div"); = "absolute"; = "red"; = "0"; = "0"; = "5px"; = "5px"; = "blobby"; = 10000000; canvasZone.appendChild(blob); } scene.afterRender = function() { time += 1 / 120; sphere.position.x = 0 + 20 * Math.sin( time ); var scene = sphere.getScene(); var cameraViewport = camera.viewport; let projectedVector = BABYLON.Vector3.Project( sphere.position, BABYLON.Matrix.Identity(), //sphere.getWorldMatrix(), scene.getTransformMatrix(), cameraViewport ); const width = canvasZone.offsetWidth; const height = canvasZone.offsetHeight; = (width * projectedVector.x) + "px"; = (height * projectedVector.y) + "px"; } return scene; };
  12. New Playground features

    Hello community! As you know, the playground is a very valuable tool if you want to try, experiment and share your Babylon scenes. You can even search for a specific word in the whole snippet database from the documentation website, that make it easy to find and discover a new snippet. And because we know it's a very powerful tool, we worked hard last month with @Deltakosh on a better user experience when searching for playground. From now on, when saving a new playground, you'll have to fill several information: a title, a description and some tags. It will be asked only once at the playground creation, and all next iterations of this PG will share these metadata. You won't be able to redefine it afterwards. For all PG that don't have any metadata, you will be asked to fill it only once. The search has also been improved. You can search for a word in the PG code like usual, but you can also search for a word into a PG title/description, or a specific tag. The overall quality of search had also been improved (ou can now search with several words, that will return all PG that contain these words, and several bugs have been fixed). All this work couldn't have been done without @Jaskar and @DeathSoul who wrote all the code (back and front-end), and @Deltakosh of course So go try it : Please helps us by reporting all bugs you can have in this thread Thank you very much !!
  13. Hi all, what is the best way to load an external script in playground? I have a playground and every time I start the browser an error message is displayed "Compilation error Line 7:15 - BABYLONX is not defined". If I press then the run button, everything works fine. I tried to move the document.appendChild() outside the createScene() function but no change. Maybe there is a better aproach? here is the playground: Thanks PS: I've tried following, but also without success: $.holdReady(true); $.getScript("", function() { $.holdReady(false); });
  14. Hi It looks like playground stopped working in newest babylon 2.6. Firefox 51.0.1 x64 Xubuntu 16.04, Nvidia NVS 3100m, proprietary official nvidia driver v340.101 But works fine in chromium 55.0.2883.87 In every scene i opened, even very simple it shows in console something like this: (for example this one: ) BJS - [08:04:01]: Unable to compile effect: babylon.js:3:21936 BJS - [08:04:01]: Defines: #define SPECULARTERM #define NORMAL #define NUM_BONE_INFLUENCERS 0 #define BonesPerMesh 0 #define LIGHT0 #define HEMILIGHT0 babylon.js:3:21936 BJS - [08:04:01]: Error: 0(4) : error C0203: extension GL_ARB_gpu_shader5 not supported in profile gp4_1vp babylon.js:3:21936 BJS - [08:04:01]: Vertex shader:default babylon.js:3:21936 BJS - [08:04:01]: Fragment shader:default babylon.js:3:21936 BJS - [08:04:01]: Trying next fallback. babylon.js:3:21936 BJS - [08:04:01]: Unable to compile effect: babylon.js:3:21936 BJS - [08:04:01]: Defines: #define NORMAL #define NUM_BONE_INFLUENCERS 0 #define BonesPerMesh 0 #define LIGHT0 #define HEMILIGHT0 babylon.js:3:21936 BJS - [08:04:01]: Error: 0(4) : error C0203: extension GL_ARB_gpu_shader5 not supported in profile gp4_1vp babylon.js:3:21936 BJS - [08:04:01]: Vertex shader:default babylon.js:3:21936 BJS - [08:04:01]: Fragment shader:default babylon.js:3:21936 BJS - [08:04:01]: Unable to compile effect: babylon.js:3:21936 BJS - [08:04:01]: Defines: babylon.js:3:21936 BJS - [08:04:01]: Error: 0(4) : error C0203: extension GL_ARB_gpu_shader5 not supported in profile gp4_1vp babylon.js:3:21936 BJS - [08:04:01]: Vertex shader:color babylon.js:3:21936 BJS - [08:04:01]: Fragment shader:color babylon.js:3:21936
  15. Hi gang! I don't start topics very often, but I'm talkie today. 1. TypeError: snippet.code is undefined - (A console error seen with some empty playground loads). Does this error == "Can't connect to (Azure) DB"? 1a. Can PG internal code intercept this error, and display "Failed to connect to database" in lower left corner of PG? (same place as "Loading assets...Please wait") 2. Compile Error: 'n' is undefined (Could be 'n' or ANY other single-char) This is a compile error (not in console, but instead on popup panel). This is almost always caused by a problem with a parameter for a method call. A parameter is missing, or null, or whatever. But... we never know which code line is causing the problem. The error says "you have bad parameter" but ... WHERE? Possible to improve? * Also thinking about Jeff Palmer's "do playground search FROM playground" idea. Handy. Possibly... search PG DB for highlighted-in-editor word! Coooool. Thx for info/comments, crew! Party on!
  16. Fellow members we are now living in a virtual world (what's new). The earth as we know it no longer exists, dropped south and exits. Check out Playground Example 14 Height Map our earth has gone. Let us appeal to our gods for its return @Deltakosh we humble mortals pray for the return of earth.jpg
  17. I see something different if I go directly here: to if I, say, go here: then choose PBR from the drop-down box. When I do the latter the four meshes are semi-transparent. I've managed to reproduce this on both Firefox and iPad. I'm guessing that one or the other of the playground entries is setting some global state that it shouldn't? By the way, the "wrong" way is actually quite an interesting effect: the balls look a bit like very delicate glass, or soap bubbles. It might be worth adding a comment, or bool var, to say how the effect can be reproduced.
  18. Hello, From this website : I can't download the zip from : - 13 : Environment - 14 : Heightamp It writes "Creating archive... please wait" and when i change the scene : "compilation error this.textures[0].dispose is not a function". Thanks
  19. One proposal

    Could you add arcCamera to playgroround. sendbox. Or switch we can select freecamera or arcCamera. I think arcCamera could be more practical than freeCamera. greetings Ian
  20. With a little encouragement from Wingy, I have set up a simple playground that allows me to append a very simple file from my Dropbox. Playground Everything looks fine - right? Well no! The image below is the same file dropped (from my local end of Dropbox) into the Sandbox and you see the sphere is red. The material code in the babylon file is : "materials":[{"name":"","id":"","ambient":[1,0,0],"diffuse":[0.8,0,0],"specular":[0.5,0.5,0.5],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4}, {"name":"ball_plane.Material","id":"ball_plane.Material","ambient":[0.8,0.8,0.8],"diffuse":[0.8,0.8,0.8],"specular":[0,0,0],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4}], You will notice the material named "" has a diffuse value of [0.8,0,0]. The Playground prints out the diffuse value in the web console - Object { r: 1, g: 1, b: 1 } Any ideas about what I am doing wrong? cheers, gryff Edit : All the links to the PG I posted are now working properly since the update posted below by @Deltakosh - so the issue is resolved.
  21. I have not been a big user of the Playground - I usually test my Blender scene exports with the Sandbox. However, as SceneLoader.Load is considered deprecated, I thought I would test out SceneLoader.Append using the PG. I disabled both the standard BJS light and Camera as the scene I used contains a light and a camera - and here is my result: gryff's PG And I see the figure and the animation is working, but I get this big box that says : "Compilation error. You must at least create a camera" Now since I can see the figure and animation - where is the camera coming from? It seems to be using the light from the appended file, but both the ways I tried to use the babylon scene file camera throw this Compilation Error. (The other way I tried is to activate line 26 and deactivate lines 31-35) So is this a.) my clumsy coding or b.) my lack of understanding of the PG or c.) something else?? And in addition, it seems that the material for the figure is ignored. This is a link to the same animated figure showing what the material should be: Animation Test Any thoughts greatly appreciated - and hopefully a fix - before this pile hair beside my desk gets any bigger cheers, gryff Edi: If you check your console, you will see the position of the camera from the file I used.
  22. Hi guys! I have seen some errors: this._joints is undefined the playground, lately. Is anyone interested in being told about this? My latest error happened with a playground that had a mesh.setPhysicsState call, but there was no scene.enablePhysics. I disabled the user's setPhysicsState call, then tried to reRUN. Joints error. This error seems to require a playground reload... to clear the error. 6 times in 2 days. *shrug* I'll keep investigating and report news.
  23. hello ... when I go to the playground, I do not see anything, such as: However, if I look at a BJS site, it does work, such as: - any thoughts?
  24. INTRODUCING WUKONG! In order to increase productivity and give you more resources at your fingertips I am proud to present WUKONG! This plugin will extend your babylon.js playground and add useful features for creation of babylon.js common objects and methods. This is the first release so it is limited on what I have as far as objects available, but that list will be growing very rapidly as I make my way through the API. You have the option to include code hints for the inserted items Parameters, Members, and Methods. Many more Macros and Objects will be added soon. to include in your playground simply add the line: $.getScript(""); before your scene function and hit run and WUKONG does the rest! to keep up to date follow: This plugin is not supported or maintained by BABYLON.JS and is the sole rights of its author (me ^_^). for a working example go to: and just look for the WUKONG button. /h for Variable hints, /mb for member hints, /md for methods hints! Just check on which hints you want to Copy with your Prefab. When you click on a Highlighted Prefab it will be added to your clipboard simply go to the line you wish to add it to and paste (ctrl-v). Please let me know what features you want added, and what compatibility issues that arise in different browsers. Thank you and have a nice day! ***UPDATE*** Current Support List: Numbers : Vector3, Color3 (I need to add a lot more of these...) Basics: CreateBox, CreateSphere, CreatePlane, CreateDisc, CreateCylinder, CreateTorus, CreateTorusKnot, Lines (BasicLine, more to come), CreateRibbon, CreateTube, DisplaySettings(SideOrentation) Cameras: FreeStandard, ArcRotateStandard, TouchStandard, DeviceOStandard, FollowStandard, VirtualJoyStandard, GamepadStandard, FreeAnaglyph, ArcRotateAnaglyph Lights: PointLight, DirectionalLight, SpotLight, HemisphericLight lots more to come soon... like I said any requests please let me know.
  25. Hi, I'm experimenting with fragment shaders and would like to ask if there is a workaround for inputting statements like "#extension GL_OES_standard_derivatives : enable" in the playground, which results in a syntax error? In CYOS such statements are accepted, so it's not a big topic for primary shader tests. BTW, I'm a new user and I enjoy this forum, it helped me a lot for the first steps learning babylonjs, thanks to all of you for the great effort for this amazing project! My first shader results: have fun Johann