Babylon Js Editor: Saving, Reloading and Workflow Lifecycle

[the-simian]

I feel like there are some interrelated issues that are currently blocking a really solid workflow. I can reproduce these pretty consistently, so I want to capture the process here on how to reproduce these. I would have posted sooner, but it takes some time to really type all this out with clear steps.

What seems to work

One thing that is puzzling offhand is related to the conventional way the editor would expect you to save a project. I can select Save Project As, and I can see the scene.editorproject one level higher than the conventionally-named ‘scene’

I close the editor, and I reopen the editor by double-clicking the scene.editorproject file. So far so good. I can make a change, such a load a new material in the scene

First by dragging the textures in

Now assigning the material

I can save this, and reopen. Make changes. Save, reopen and so on. And this actually works.

What seems to not work

Now for the puzzling part. Recall earlier the scene was saved a level higher? if I choose Scene > Export Final scene and assets, the structure changes

Now the project file is in the same folder. Should I attempt to reopen this, as I did before, now I get

Error while loading project
Cannot read property forEach of undefined

In this case, I saved and opened the project I had been working on, but any project will do this that has been saved in this way.

If I click reload I get these things in the console:

Error while loading plugin "material-viewer" TypeError: Cannot read property 'on' of undefined
    at MaterialsViewer.eval (viewer.ts:144)
    at step (viewer.js:45)
    at Object.eval [as next] (viewer.js:26)
    at eval (viewer.js:20)
    at new Promise (<anonymous>)
    at __awaiter (viewer.js:16)
    at MaterialsViewer.create (viewer.ts:103)
    at Editor.eval (editor.ts:412)
    at step (editor.js:32)
    at Object.eval [as next] (editor.js:13)

This is the trace:

(anonymous)	@	editor.ts:420
step	@	editor.js:32
(anonymous)	@	editor.js:13
rejected	@	editor.js:5
Promise.then (async)		
step	@	editor.js:6
fulfilled	@	editor.js:4
Promise.then (async)		
step	@	editor.js:6
(anonymous)	@	editor.js:7
__awaiter	@	editor.js:3
Editor.addEditPanelPlugin	@	editor.ts:368
(anonymous)	@	editor.ts:461
step	@	editor.js:32
(anonymous)	@	editor.js:13
fulfilled	@	editor.js:4
Promise.then (async)		
step	@	editor.js:6
(anonymous)	@	editor.js:7
__awaiter	@	editor.js:3
Editor.restartPlugins	@	editor.ts:454
(anonymous)	@	scene-loader.ts:257
step	@	scene-loader.js:32
(anonymous)	@	scene-loader.js:13
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
rejected	@	scene-loader.js:5
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
(anonymous)	@	scene-loader.js:7
__awaiter	@	scene-loader.js:3
SceneLoader._OnSceneLoaded	@	scene-loader.ts:159
(anonymous)	@	scene-loader.ts:128
successHandler	@	sceneLoader.ts:759
(anonymous)	@	sceneLoader.ts:777
dataCallback	@	sceneLoader.ts:388
reader.onload	@	tools.ts:1113
load (async)		
./Misc/tools.ts.Tools.ReadFile	@	tools.ts:1111
./Loading/sceneLoader.ts.SceneLoader._loadData	@	sceneLoader.ts:453
./Loading/sceneLoader.ts.SceneLoader.Append	@	sceneLoader.ts:769
./Loading/sceneLoader.ts.SceneLoader.Load	@	sceneLoader.ts:679
(anonymous)	@	scene-loader.ts:124
step	@	scene-loader.js:32
(anonymous)	@	scene-loader.js:13
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
(anonymous)	@	scene-loader.js:7
__awaiter	@	scene-loader.js:3
SceneLoader._Prepare	@	scene-loader.ts:80
SceneLoader.OnReloadingScene	@	scene-loader.ts:69
(anonymous)	@	editor.ts:819
./Misc/filesInput.ts.FilesInput._processReload	@	filesInput.ts:248
./Misc/filesInput.ts.FilesInput.loadFiles	@	filesInput.ts:229
(anonymous)	@	scene-importer.ts:121
step	@	scene-importer.js:32
(anonymous)	@	scene-importer.js:13
fulfilled	@	scene-importer.js:4
Promise.then (async)		
step	@	scene-importer.js:6
fulfilled	@	scene-importer.js:4
Promise.then (async)		
step	@	scene-importer.js:6
fulfilled	@	scene-importer.js:4
Promise.then (async)		
step	@	scene-importer.js:6
fulfilled	@	scene-importer.js:4
Promise.then (async)		
step	@	scene-importer.js:6
(anonymous)	@	scene-importer.js:7
__awaiter	@	scene-importer.js:3
SceneImporter.LoadProjectFromFile	@	scene-importer.ts:49
(anonymous)	@	scene-importer.ts:39
step	@	scene-importer.js:32
(anonymous)	@	scene-importer.js:13
fulfilled	@	scene-importer.js:4
Promise.then (async)		
step	@	scene-importer.js:6
fulfilled	@	scene-importer.js:4
Promise.then (async)		
step	@	scene-importer.js:6
(anonymous)	@	scene-importer.js:7
__awaiter	@	scene-importer.js:3
SceneImporter.CheckOpenedFile	@	scene-importer.ts:27
(anonymous)	@	editor.ts:485
step	@	editor.js:32
(anonymous)	@	editor.js:13
(anonymous)	@	editor.js:7
__awaiter	@	editor.js:3
Editor.checkOpenedFile	@	editor.ts:484
(anonymous)	@	toolbar.ts:179
(anonymous)	@	dialog.ts:28
(anonymous)	@	w2ui.js:8623
dispatch	@	jquery.js:5237
elemData.handle	@	jquery.js:5044

I can see that the break is here

 // Add existing textures in list
this.createList();

// Events
this.layout.element.on({ execute: 'after', type: 'resize' }, () => this.preview.engine.resize()); //HERE

this._bindEvents();
// Selected object?
this.selectedObject(this.targetObject);

Also breaks Here in the toolbar.ts file
TypeError: Cannot read property 'disable' of undefined

    /**
     * Sets an item enabled or disabled
     * @param id the id of the item
     * @param enabled if the item is enabled or not
     */
    public enable (id: string, enabled: boolean): void {
        if (enabled)
            this.element.enable(id);
        else
            this.element.disable(id); //HERE
    }

Also:

[.WebGL-000001FA5009E770]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: bound to target 0x8893 : no buffer
2index-debug.html:1 [.WebGL-000001FA5137DAA0]RENDER WARNING: there is no texture bound to the unit 0
index-debug.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.

Also this hangs:

Interestingly I can still use the editor, but if I make further changes they will not always be persisted. Sometimes yes, sometimes no.

Now another workflow, here I’m trying to export the template. Like the Scene export, the editor file is inside a folder that was conventionally named scene. This is a little different though because with `Export Final Scene and assets it dumps the whole lot in the actual folder you selected.

So this is really a third way that the editor saves things. The fact there were so many options in these menus was confusing to me. Should it be nested? will it dump all in a folder? make a subfolder conventionally named ‘scene’? Apparently ‘it depends’ what you pick.

Ok so with this special kind of export, you can run this as a standalone web app…

I can use yarn install && yarn build && yarn run webserver

This works:

However, I can see that there is a build that is a little different than I would expect. There are no assets in here. This is a build, but it is not truly a production build, I assume. The typescript is compiled but I would have expected a build folder with scenes in it, so that I could deploy only the build folder to gh-pages. In order to make this a production build can I simply ‘copy’ the index and the scene folders over?

Regardless, the same problem here as before… if I close the project and reopen it, I get:

Also if I try to use 'export final scene and assets… sometimes it works, but sometimes I get something like:"

here the app is hung up…

I get two errors in the console:

Uncaught (in promise) TypeError: Cannot read property 'name' of null
    at preview.html:101

Also this:

Uncaught (in promise) TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at Function.SceneExporter.CreateFiles (build/src/editor/scene/scene-exporter.js:38)
    at Function.eval (build/src/editor/project/project-exporter.js:87)
    at step (build/src/editor/project/project-exporter.js:32)
    at Object.eval [as next] (build/src/editor/project/project-exporter.js:13)
    at eval (build/src/editor/project/project-exporter.js:7)
    at new Promise (<anonymous>)
    at __awaiter (build/src/editor/project/project-exporter.js:3)
    at Window.window.onButtonClick (build/src/editor/project/project-exporter.js:74)
    at HTMLButtonElement.eval (build/src/editor/gui/window.js:109)

This is on this line in the scene-exporter.ts file:

        this._ClearMetadatas(serializedScene.sounds);
        this._ClearMetadatas([serializedScene]);

        // Scene "File"
        if (format === 'babylon') {
           ///HERE
            editor.sceneFile = Tools.CreateFile(Tools.ConvertStringToUInt8Array(JSON.stringify(serializedScene)), 'scene' + this._LastRandomId + '.babylon');
            FilesInputStore.FilesToLoad[editor.sceneFile.name] = editor.sceneFile;
        }

        // Gui
        editor.guiFiles = [];
        editor.core.uiTextures.forEach(ut => {
            const serializedGui = ut.serialize();
           

if I try to avoid this approach, and like use the other thing that works in tandem with the templated export… I get different results:

I’ll start with a fresh templated project. Now I know in this situation, because its nested one level deep, my ONE scene must be called scene and the editor file sits one level higher.

so first I template:

And then I save project as, I select the root because I will override the scene folder.

I delete the previous editor project, because I’m relying on the one a level up now but I get:

Error while loading project
Cannot read property 'parentId' of null

Now if I try to save anything it does not keep my changes, it reverts back to the default project.

[the-simian]

If there’s any takeaway here there’s four big things

1. the iterative act of saving, reloading, saving again within the context of a web project isn’t really solid atm. I can’t find a stable, reliable way to do it, where I can commit my work to source control. I’ve gone through a lot of workflows above, and captured as many reproducible bugs as I can.

2. The way a ‘standard’ project should be laid out is different with every button. I think reasonably most users would get confused and have to do a lot of experimenting to be able to reliably predict what’s up

3. The workflow should, in my opinion be able to allow you to manage many scenes in a project, not unlike managing levels in a video game.

4. I still don’t really understand what the difference in project files and scenes are after meticulously using every option, and the editor doesn’t seem to do much different besides the nesting

So here’s a few suggestions I have:

1. standardize thescene.babylon / scene.editorproject layout. If you ask me, stashing these two files inside the scene folder parallel to the assets every time is a good approach.

2. ask the user to name the scene when they save, and name the folder that.

3. make the web-project have a folder called SCENES and put the user-named scene in there. They can add more scenes in here if they want. start-scene, game-over, level-1 and so on.

4. maybe change the language to ‘scaffold web project’ and since you are asking them to name this scene. If they do it again and you ask again if they pick the same scene stomp over the old scene if they give you a new scene make a new folder. If they pick the same name as last time prompt “This will overwrite the previous scene called foobar”, so it is clear when you overwrite work.

Some more of my thoughts:

Some pros to this approach:

• I think you can legit get rid of many of the save buttons. basically, there’s the only two… save and save as, and the behave like anything else in any other program.

• Spitting out the web project wouldn’t offend this. It would just dump more files at the root and you’re doing a scaffold now, so you even have more control based on user responses. I am thinking its not unlike using Yeoman or Slush in this regard but instead of inquirer.js you just use the ui here with sensible defaults

• the ‘scene’ and project’ menus can be combined into file as it is conventional in other programs, like say photoshop, and this will save space up in that toolbar.

The scaffold web project would also be here. and ‘open scene’ and new. (import is not always clear its ‘extending’ the scene, but that’s another discussion). Reload seems like it should be in the same place as play and play and debug. I am not sure about Import Meshes, but the rest of the scene menu is gone. This is much simpler.

Some cons:

• Shared assets between scenes at this point would be copied in each scene, I suppose, right? Still, I would rather this workflow be simplified. Maybe there could be an assets folder parallel to the scenes or something conventional that appears once things get repeated. I think it can be clever later, right now it needs to be in a working state, that someone could reasonably manage multiple scenes in some webapp. to be honest, I’d rather this be in a buld step if anything. this means maybe its not this editors job at all, but the job of the scaffolded project. I don’t care how big it all is sitting on a disk during dev, only when deployed and the user must download it.

• if you had plans for projects Vs. Scenes, this kind of ignores that, but currently I’m not seeing the benefit.

I might be way off base here and I want to hear your thoughts @julien-moreau . I started using this project heavily but I only started about a week ago, and the way to work iteratively hasn’t felt very good yet. This is a bummer because the project is so impressive in most respects. Its amazing the first time you open it. Its when you need to manage your work after that I see these sorts of problems.

[the-simian]

Just to follow up. I tried to take the one working workflow and modify the template-project to work with that. I was able to get the scene to not throw errors, but for some reason, the meshes never load.

I ended up with a loader like this:

SceneLoader.Load(
      "./scene/",
      "scene.babylon",
      this.engine,
      (scene: Scene) => {
        this.scene = scene;
        // No camera?
        if (!this.scene.activeCamera) {
          this.scene.createDefaultCamera(false, true, true);
        }

        // Attach camera
        this.scene.activeCamera.attachControl(this.canvas, true);
        // Load extensions
        Tools.LoadFile("./scene.editorproject", (data: string) => {
          // Apply extensions (such as custom code, custom materials etc.)
          Extensions.RoolUrl = "./scene/";
          Extensions.ApplyExtensions(this.scene, JSON.parse(data));

          // Run render loop
          this.engine.runRenderLoop(() => {
            this.scene.render();
          });
        });
      }
    );

so I changed the path to the .editorproject. file to match what the project: save: as does, and I tried some different RootUrl like ./scene and ./ I’m not sure what this needs or wants.
Its laid out like this:

Will his nested structure just not work at all? I am assuming the .ApplyExtensions method is extending the scene with the stuff it was able to load from the .editorproject, and it is going through the JSON and decorating that.

I wish there was some sort of like… debug flag or something for that method where it can tell me it tried to look for things.

I know this entire thread is LONG, but the one way I’ve discovered I can work in the editor, check it out in a web project, work some more, look in the web, I can’t get going.

[sebavan]

Ping @julien-moreau and thanks for the extensive feedback

[julien-moreau]

@the-simian first, thanks a lot for this feedback!
My answers:

• I don’t reproduce the bug in the toolbar (my tools are loaded correctly here and I get 0 error, I have to dig more )
• I think the current workflow has been badly explained in the doc. The goal is:
  • You have your project with “scene.editorproject” file and “scene” folder. This is the editor project
  • When you export the final assets or a project template, the “scene.editorproject” file in the “scene” folder is just containing the editor’s metadatas (the behavior scripts, graphs, custom post-processes etc.) so it is not intended to be opened by the editor.

Taking as an example a game with multiple levels (so multiple scene folders). I think the root directory of your project should be (at the moment but some work can be done in future to change that) :

• editor (contains all the editor projets for developers and artists)
  • level 1
  • leve 2
  • …
• project (contains the developers project)
  • src
  • scenes
    • level 1
      • scene.babylon
      • …
    • leve 2
      • scene.babylon
      • …
    • …
  • tsconfig.json
  • package.json
  • …

Do you agree with that?

To fix the actual bug and with the the source “.editorproject” in the root directory of the project, I should change the .editorproject extension to another (.metadata or whatever) to differentiate the source .editorproject and the metadatas file.

Do you think my example above fits an usable workflow? Thanks for your answer!

I’m reading the next posts right now

[julien-moreau]

@the-simian I would say that the goal in my example is to re-“Export Final Scene And Assets…” in the “project/scenes/levelx/” folder manually each time it has been modified. That’s the current way and I understand it can be heavy compared to just clicking a button that does everything. Managing multiple projects will take me some time and can’t be available in the 3.1.2 or a month or more. It requires so much refacto but I can start working on

[the-simian]

Hmm… I want to see if I can make an example project that describes this worflow, and write it up. Right now theres a lot of things that can go wrong, and the .editorproject files are somewhat unclear which ones hold which information.

right now I was trying to save > open in web > hit a button > see changes in my web project.

However, that was wrong. I think you are imagining a differnt folder structure:

Look at this, two folders at the root. See my questions on certain files.

---

/root

1. /the-editor-projects //I open from here, and save in the subfolders.
   • /scene-1
     • some-asset-like-texture
     • scene.babylon
     • scene.editorproject //is this herre???
   • /scene-2
     …
   • scene1.editorproject // <----double click opens in editor.
   • scene2.editorproject
2. /my-web-project
   • /src
     *game.ts
   • /build // Does assets ever go here? Only the built JS? (Do I deploy this + output-scenes?)
     • /src
       • game.js //The webpack/bundler output of Js only.
   • /node_modules //HERE or at the /root?
   • /output-scenes // I never open from here, only write to here.
     • scene-1
       • some-asset-like-texture
       • scene.babylon
       • scene.editorproject //double clicking does NOT open, just metada, right? ignore this.
     • scene-2
       …
3. README.MD
4. LICENSE.MD, etc.
   …

---

Is that right?

I will try this today:

1. You open a project in ‘editor projects’ folder
2. you open source code in your code editor
3. Make a change in the opened Babylon Js editor
4. First, save over the editor Project (save project).
5. Next, output just the scene into the source-code somewhere. (so you click 2 buttons)
6. You see changes in the web project now

is this the loop?

I want to try and make a boilerplate project with like a 'scene selector` that opens 2 differnt scenes. And write up how to work this way. can you review this project if I do this?

Firstly verify that I am understanding this. My initial impression is that this was a confusing workflow mainly because of the roles of the differnt .editorprojects, and that some open the editor and others don’t. I think fixing the docs and making example project can clear that up. Also changing the file names.

I also think, maybe if we could template or scaffold from the editor, we can also template/scaffold the directories that help communicate the overall workflow. At the very least we can link to an already-templated project (maybe even the one I am about to build) that shows all the pieces put together.

My whole goal has been to make some simple changes and test an iterative process before I lean too heavily on that workflow, so an example project explaining the workflow seems very useful to everyone, and I am happy to make that.

[julien-moreau]

My answers in bold formatted:

@the-simian

• /the-editor-projects
• /scene-1
  • asset1
  • scene.babylon
  • scene.editorproject //is this herre??? Not, the source editor project doesn't export the metadatas as they are available in the source ../scene1.editorproject.
• /scene-2
  …
• scene1.editorproject //<----double click opens in editor.
• scene2.editorproject
• my-web-project
• output-scenes
  • scene-1
    • asset1
    • scene.babylon
    • scene.editorproject //double clicking does NOT open, just metada, right? Right, I should change the extension to ".metadata" for less confusion. Or ".editormetadatas" or whatever
  • scene-2
    …

Unfortunately, today (but will change that if requested for sure), the editor file will always be named “scene.editorproject” and will ALWAYS take scene’s assets from the folder named “scene”. So “scene1” will not work. That means the project file and the folder should take the provided scene name (which is not the case today )

Today you can, for the editor projects:

• /the-editor-projects
  • /scene-1
    • scene.editorproject
    • /scene
  • /scene-2
    • scene.editorproject
    • /scene
  • etc.

For the boilerplate, sure I would like help you! Would be interesting to also test if we can work with YOUR example (having all .editorprojects in the root folder and scenes assets separated to distinct folders)

I’m trying to find a way to keep backward compatibility the already created projects with the editor. Renaming .editorproject to .metadata in the final export will break the existing projects that load the “./scene/scene.editorproject” file. Do you think explaining that is in the doc can be enough?

[the-simian]

@julien-moreau
Really helpful answers, and I think we are zeroing on some of the issues. let me try to stand up something in github that actually works based on your feedback. I am imagining something like, there is a select box, or 2 buttons and one loads one scene, the other loads the other. There’s a writeup to explain how to modify the scene and see the result.

Then close everything. Reopen everything. Make a change. See result. No crashes or confusion.

That’s the loop.

I think the ball is in my court to work on some prototype of this project based on responses here. When we have that working I will happily explain the workflow in the README (or wiki, whatever) with pictures and everything.

I think the error I had was from double clicking the metadata file, and I was confused because it had the exact same name. It looked like the editor was shuffling critical files around.

Before I start can you review the SceneLoader code I posted? Think of it in the context of the soon-to-be-project. I understand that you first load up the scene.babylon to begin with. After that do you load the metadata file? or the project file? Also what is the role of the RoolURL what should that be?

the code I posted did not break, but it did not load any lights/meshes. It was a black screen with no errors. Same if I changed the RootURL to ‘./’.

[julien-moreau]

I think too, I just reproduced!! Only by opening the wrong .editorproject file so I think these issues should not appear when using the editor in the good way.

Would be really happy to see the github repo! Once done and working with the required changes etc. it must be included in the documentation on doc.babylonjs.com. I tested on my side and it works using the right buttons at the right moments (that must be explained better in the documentation then).

I’m polishing the release 3.1.2 and then will focus on improving the workflow according to this discussion

For the SceneLoader, after loading the .babylon file, the example loads in fact the metadatas file (and not the editor’s project file). This file contains only the added value of the editor (custom post-processes, scripts, graphs, etc.). Then, the example calls .ApplyExtensions according to the loaded metadatas to create the custom post-processes etc. The RootUrl property is set to provide the extensions (while being applied) the information that the scene’s assets are located in this folder (here ./scene/) because the extensions can request files themself (like textures, sounds etc.).

I think the RootUrl property can be passed to the .ApplyExtensions function like this to save a line:

// Apply extensions (such as custom code, custom materials etc.)
Extensions.ApplyExtensions(this.scene, JSON.parse(data), ‘./scene/’);

[julien-moreau]

@the-simian you can find the latest build here to continue testing the editor : http://editor.babylonjs.com/electron/preview/BabylonJS%20Editor%20Setup%203.1.2-alpha.0.exe

[the-simian]

thank you, i’ve reserved time this evening to get this ‘good workflow’ repo going. Then I’ll post it here, let you review, and then I’ll do the writeup that everyone can follow about proper workflow!

I’ll use the latest build! I am excited!!

Update: I’m working in this alpha build right now. So far so good. These new gray icons just look so dapper in the dark theme. Nice.

[the-simian]

@julien-moreau

I have gotten this workflow to happen! Thanks to your support and your answers I have a repo going. There are some quirks, but I can go over those later. The GitHub repository is here:

GitHub - simiancraft/BabylonJs-Editor-Workflow-Boilerplate: A repository to...

If you see this message early, you will not yet see anything in the ReadMe.md. I plan to write that up in the morning. I plan to take my time and make this very clear and use images, so that it can be used (after you review) for the babylon documentation.

In the process of working on this, I have noticed a couple of smaller issues. One of them is worth mentioning here:

There is some potential for mistakes as you’re saving to the two different locations because the file system remembers the last location.

If you …

1. select ‘Save project as’, and you select the project folder in ‘editor-projects’, you’re doing what you need to.
2. Then let us say you work for a while, and then you Export Final Scene and Assets. Ok now you select the scenes folder in the webapp, which is also intentional.
3. The problem is that doing CTRL+S is now pointing at the webapp. You need to do the ‘save as’ option each time and navigate to and fro. Because the person using the editor likely has the same folder name in both places, it could be easy to stomp over the wrong thing, such as saving the editor-project into the web-app’s scenes/ folder with CTRL+S after doing an Export Final Scene and Assets operation.

This is a minor annoyance, but something I had to be very aware of while working, because I did overwrite over the wrong folder once.

The other I’ve made another forum issue:

BabylonJs Editor: Selecting a Water Texture causes the templated web-application to break

Steps to reproduce Add Water Effect [image] Export this to the web app [image] You will get a problem loading the scene: Run and build the webapp yarn install && yarn build && yarn run webserver Here is the error: BABYLON.WaterMaterial not found you may have missed an import.

Another minor question: how do I get rid of those editor-only labels you have in the init project? What are those?

[julien-moreau]

@the-simian excellent work, it is has we said! It looks ok for me now but haven’t tested yet as I have only my phone but will test tomorrow for sure.

So sorry for the location bug, I’m fixing tomorrow ASAP! I haven’t noticed that while testing =O

Understood the water bug, will certainly appear on all render targets textures. Fixing tomorrow as well.

The GUI labels are just here to say « welcome to the editor » I would be very happy if you have ideas (doable without being an artist ahah) how to say « welcome to the editor »

Also testing the repo ASAP
Thanks again !!

[the-simian]

@julien-moreau

Update: I am still in the process working on what I think can become a canonical starting tutorial that is centered around the workflow we have been discussing. I have taken the time to make the creation of the example projects also be a very light tour around the editor in the process. I am gearing this tutorial for beginners.

You can see my progress here:

simiancraft/BabylonJs-Editor-Workflow-Boilerplate

the tutorial is just sitting in the ReadMe.md of the project right now as markdown.

I am roughly 30-40% done (at about 1700 words). It is taking longer than expected because I am trying to very carefully take images, gifs and capture the file tree of the project as I proceed.

I anticipate that an earnest first draft will be done by tomorrow for total review. Please let me know your feelings about the general direction of this tutorial so far. My goal is that it can be of high enough quality that you and the Babylon team would allow me to make a pull request and submit this to your documentation.

Thank you so much for all your help so far, and I hope that this is as helpful to you and your team as you have been to me so far.

[the-simian]

@julien-moreau

I worked on this all weekend, and I think it is ok for you to review now.

simiancraft/BabylonJs-Editor-Workflow-Boilerplate

If you feel like this is good, I can mark this as an answer, but if you like it I’d like to figure out how to get this work into documentation.

I plan to write more about changing scenes in the game, and also manipulating things via code that were assemble din this editor in the future. I think this is far enough along though that its worth some review since it is about 6000 words and has a lot of work in it.

[julien-moreau]

@the-simian I’m back and read ALL the readme. This is just awesome! Really clear, really well represented with the screenshots and videos. Also it is really easy to integrate to the official babylonjs documentation!

For me everything is clear. I can integrate in the documentation for you (migrating the assets to be sure it’ll be served by the babylonjs server).

Just only one feedback, in the last line of the readme you wrote “.tx” instead of “.ts”.
Would like also to credit yourself on the .md file? It’s an awesome job and don’t want readers to think I wrote myself but that it was YOUR awesome contribution.

This is an excellent job. You can mark this as an answer and I’m now focusing on the other feedbacks you sent me

Again thanks a lot!!

[the-simian]

Ok I’ll make those final tweaks to the feedback. Also in our discussion about water texture, the game.ts might be updated some and I will incorporate that.

(discussion here)

BabylonJs Editor: Selecting a Water Texture causes the templated web-application to break

@the-simian Yes I think it’s a good idea. My other idea is to import all in the game.ts file with some comments to precise that it can be removed to optimization. Like: import { Engine, Scene, SceneLoader, Tools, } from "babylonjs"; // In case you are using materials from the materials library. Import the library. import 'babylonjs-materials'; // In case you are using procedural textures. Import the library. import 'babylonjs-procedural-textures'; // In case you have exported your scene in …

[the-simian]

@julien-moreau, I updated the repo’s readme and also with the latest deps in the webproject (similar to today’s PR).

It fixes the spelling and also adds a byline.

I will update this further in the future to include more information, like I have mentioned at the end. When I do this, I will signal to you and we can update these docs.

Thank you for including this in the docs.I am happy to contribute, & I will continue to help in the ways I can.

[julien-moreau]

@the-simian thanks a lot!
I’ll integrate this evening in the documentation. Are you ready now? =D