BZ-Next WebGL2 Map Viewer & Editor (Desktop version available)

[bz_next]

I adapted my new BZFlag renderer into a basic map viewer and editor that uses WebGL2 and ImGUI to allow you to load, preview, and edit maps, all in the browser.

The prototype is online at https://bz-next.github.io/mapviewer3/mapviewer.html

The editor supports most advanced map features, like meshes, materials, animated materials (texture matrix, dynamic color, etc), drawInfo meshes (with the exception of angvel).

EG3yw9k.png

(1.74 MiB) Not downloaded yet

3VH1OrQ.png

(1.55 MiB) Not downloaded yet

It will automatically fetch textures from images.bzflag.org. (Thank you blast for enabling this on the images.bzflag.org server-side.)

If your map uses textures from another site, they will not load in the online editor. I am making a desktop version of the editor that will not have this limitation, to be released soon. Also, please make sure your map doesn't use includes, as you can only upload a single file at a time. If your map uses includes, you can just copy/paste the includes directly into the .bzw file to use it with this tool.

To do:
- Error messages in a messages window in the app, rather than just in the JS console
- Fix an issue where certain maps don't generate the default teleporter material
- Finish porting the latest updates to the desktop version
- Add copy/paste to/from the browser (currently the clipboard is confined to the WebGL window, so you can copy/paste within the app, but it doesn't grab stuff currently in your main clipboard.)
- Some textures on images.bzflag.org have weird formats. The formats that are currently supported are PNGs with pixel formats RGB8Unorm, RGBA8Unorm, RGB16Unorm, RG8Unorm (second channel as alpha), R8Unorm (monochrome, no alpha). If a texture doesn't match one of these formats, it will currently fail to load. If there are any other weird formats on images.bzflag.org, I'll write a converter for them.
- Add a built-in list of openly licensed, popular maps. That way it could function as a kind of map archive too.
- Explore using the docking version of imgui, which could allow a more integrated blender-like UI with panels that snap to window edges and stuff.
- Search and find/replace in the editor.

It also serves as a tech demo of the bz-next project (https://bz-next.github.io) which is focused on providing a new, modern renderer for BZFlag, hacking on the codebase to enable the new renderer, enhancing cross-platform support, and just generally trying to modernize the game. The focus of the project is to provide essential infrastructure and tools to allow developers to build new features, and to get a version of the game based on the new renderer into a playable state.

[bz_next]

Based on playing with the editor for a couple days, my thoughts are as follows:

I am probably too lazy to make a really slick UI for this in the immediate future, so I need to prioritize what makes it useful (I will probably resume focusing on the bz-next client).

What I think would be most useful would be being able to right click on an object, and get a context menu that's like "Group, Mesh, Material" etc. Then, when you click on the menu item, it'll jump to the line of code in the BZW editor that corresponds with that group, mesh, material, etc. That way you could quickly edit stuff, and it'd be way less work for me.

It'd have to be a bit hack-y to associate lines of code to objects, since the map reader ripped from BZFS doesn't care much about the actual text of the map beyond reading it in, but it should be doable. Then, adding an option for ObjectID in the shader / map mesh data should take care of the actual click handling and object lookup. Probably do something quick and dirty to handle all that, but it'd make the tool a lot more usable.

Additionally, the lack of being able to nest groups inside of defines in BZW files is a bit limiting. For an editor, you could get around this by adding editor-specific directives in comment form. For example, add a comment like #BZNEXTEDIT: METAGROUP mygroup to signal to the editor that certain objects are grouped, so that you could translate them and rotate them together in the editor.

Next is auto-reload. If you're using vscode / atom / sublime text / vim / anything else as an editor, it'd be nice to have the tool auto-reload the map when you save your file in the editor. I think it's annoying to have to reload the map yourself by clicking "Load" and clicking on the map file to see changes. BZFlag already has a way to cross-platform read file change times in the code, I think (used for management of cached textures and stuff) so hopefully that's just plug & play.

If anyone wants to hack on this, some other ideas:

- Integrate ImGuizmo https://github.com/CedricGuillemet/ImGuizmo/tree/master for object editing, translation, rotation, etc. Aside from ObjectID, this would entail some sort of handling of whether the user wants to select a mesh, group instance, etc. Personally, I'd imagine double clicking on a world object, and if it's a group, just rendering only the group definition centered at 0,0,0 and letting the user edit that. Otherwise, manipulate the group instance itself.

For this sort of editor feature, I think efficiency isn't that important. Personally, the way I'd do it is generate a new "world mesh" for just the object to be manipulated, as well as the world minus that object. Now that they're separate, let the user drag it around. When they're done, just compile the whole world mesh again. Voila. Slow, but maps compile in a fraction of a second usually, anyway, so I don't think it'd be a big deal for now.

You'd probably want to introduce a new class to handle the 3D editor's state separate from the main app, so you could keep track of these sorts of things more cleanly.

- Live material editor. This one would not be so hard, since materials can already be modified in real time. The only tricky thing would be updating the BZW file in the editor to match any changes you make.

- Editor windows for texture matrix, dynamic color, etc

- Trying out ImGUI docking branch (should just be plug and play) to make the UI generally nicer.

If you're interested in trying any of these things out, please let me know! That way we don't accidentally end up working on it at the same time, and waste effort

[bz_next]

There is now a Windows release of the map editor / viewer. Copy and paste into / out of the app works on the desktop build.

https://github.com/bz-next/bz-next/rele ... erelease_2

The tool is in sync with the version published at https://bz-next.github.io/mapviewer3/mapviewer.html

Screenshot_2024-02-18_07-03-22.jpg

(141.35 KiB) Not downloaded yet

[bz_next]

Just a cool screenshot of starting a map from scratch in the editor:

edit example.jpg

(261.66 KiB) Not downloaded yet

[bz_next]

New version up at https://bz-next.github.io/mapviewer4/mapviewer.html

Adds some new ImGUI widgets and some built-in maps that you can load.

[Zehra]

It's amazing. I threw a prototype building from one of my scripts and it handled it perfectly. It is much easier and more efficient compare to starting a server and client to preview a map.

It is an extensive improvement over my previous workflow and provides an excellent productivity boost.

I plan to update my mesh generator scripts to fully take advantage of the new possibilities this offers.

-Zehra

[bz_next]

Thanks

I think the biggest thing to improve right now is navigation (support panning around and stuff, rather than just rotation and zoom).

GEP linked me to some example code that should improve navigation quite a bit, so I'll add that in once I get a chance (currently digging around in some lower-level stuff to get fancy shaders working...)

[bz_next]

New release here: https://bz-next.github.io/mapviewer6/mapviewer.html

Standalone windows build: https://github.com/bz-next/bz-next/rele ... erelease_3

In addition to shader and shadow-mapping support, this release adds improved mouse navigation.
When you click and drag, the scene rotates around the selected point. Holding shift pans the view.
Pressing numpad 0 resets the view to default.