Search the Community

I saw the playground on Pixi at https://github.com/ivanpopelyshev/playground. I have learned that he is using typescript language and running on nodejs. Since I am not familiar with ts and nodejs, I can only access it through http://localhost:8080 after npm dev startup. Now I want to put him. Deployed to the web server on my window so that he can access it on the public network. May I do this?

Hi, The Playground tool has some limit? In number of lines? Because I see some instability, since yesterday, in a code which has 680 lines. Thanks

I know I mentioned this before, a really long time ago. When you switch to full screen, movement of the mouse directly affects the camera as if you had a button pressed. It happens in the playground. I cannot remember if it happens in user scenes. It just popped into my head to check if still a problem. It is.

In Playground, info links open new tab back to Playground, instead of to the actual link. Hover over Method, @see link, click, no bueno.

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 https://www.babylonjs-playground.com/#NLMGJ2 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..

Hello, On one of PC I use I can't access any existing PG. For example, if I open a PG from the latest questions - https://playground.babylonjs.com/#199KHL%2317 - I'm forwarded to the https://playground.babylonjs.com/ so no chance to see the PG. I have an AdBlock and ScriptSafe, but I allow everything PG needs, cookies are also allowed. Could you tell me what else can prevent accessing the playgrounds? I try Chromium and Firefox.

You may have notice in the Q&A part of the forum, but I've made a kind of cornell box scene, you just have to do whatever you want with it. [EDIT] last version: https://www.babylonjs-playground.com/#J5E230#40 Here an already-made scene in the playground: I think this can be useful sometimes, to easily have a bit more complex scene in the playground so as to do tests and little demos (for example, to play with probes). As I'm not a pro-coder, you will probably see some craps in my actual playground scene code, do not hesitate to enhance and correct it PS: I will later make a doc in github about the workflow for using this scene, especially in the Blender part.

Hi, I'm testing code at: https://www.babylonjs-playground.com/?shadows and want to try my own image for the ground. On line 35 I put “http://www.rhgrafix.com/images/ground.jpg” 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

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()!

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?

Hi, I am behind a proxy and the following behaviour on different browsers occour. If I call a PG with appended Scene ID like http://www.babylonjs-playground.com/#H82GNB#1 the playground loads and allways shows me the basic scene. New URL is then http://www.babylonjs-playground.com Seems that there is a redirection or something else? What could be the reason for that?

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)

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 : http://doc.babylonjs.com/playground Please helps us by reporting all bugs you can have in this thread Thank you very much !!

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?

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.

hello guy's I have a simple question really so simple why i cannot make playground work on local or on my serv ... http://s682936852.onlinehome.fr/ba/Playground/index.html this is playground scene from "Babylon.js-master.zip" http://s682936852.onlinehome.fr/index.html this is the basic scene its work properly thx in advance

Hi, does anyone have problems with new playground on mac safari browsers? Every time I click run scene just disappears.

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! http://playground.babylonjs.com/#NJ8S1D 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"); canvasZone.style.position = "relative"; if ( !blob ) { blob = document.createElement("div"); blob.style.position = "absolute"; blob.style.backgroundColor = "red"; blob.style.left = "0"; blob.style.top = "0"; blob.style.width = "5px"; blob.style.height = "5px"; blob.id = "blobby"; blob.style.zIndex = 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; blob.style.left = (width * projectedVector.x) + "px"; blob.style.top = (height * projectedVector.y) + "px"; } return scene; };

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: http://www.babylonjs-playground.com/#1MYQ3T#2 Thanks PS: I've tried following, but also without success: $.holdReady(true); $.getScript("https://rawgit.com/androdlang/Extensions/master/ClonerSystem/src/babylonx.cloner.js", function() { $.holdReady(false); });

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: http://playground.babylonjs.com/?2# ) 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

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!

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

I see something different if I go directly here: http://playground.babylonjs.com/?28 to if I, say, go here: http://playground.babylonjs.com/?12 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.

Hello, From this website : http://www.babylonjs-playground.com/ 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

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