Panda3D WebGL Port!

Panda Features in Development
1

Someone asked me about this possibility yesterday. So I tried it while I had some time left waiting for the 1.9 builds to finish. It surprisingly only took me a few hours to compile Panda3D to JavaScript using emscripten and create a WebGL back-end (based on our existing GLES2 back-end).

So, here’s pview for you to try out:
rdb.name/panda3d-webgl/pview.html (triangle)
rdb.name/panda3d-webgl/pview-panda.html (animated panda)
rdb.name/panda3d-webgl/simple_fps.html (FPS demo, with fancy cn04+tobspr loader)
Drag the middle mouse around to rotate as you are used to doing in pview. Preferably use Chrome - although I think certain versions of FireFox should work as well.

Live Python editor with other demos included:
rdb.name/panda3d-webgl/editor.html

Exciting, isn’t it? :slight_smile:

If you would like to build this for yourself, I’ve put together some instructions here:
https://rdb.name/panda3d-webgl.md.html

3 Likes
2

Nice! It even worked on my iPad! where can I download it?

3

rdb -> You need to post a Roaming Ralph WebGL demo or confess that was an april’s fool easter egg… because I’m not sure anymore :blush:

4

Well done!!

5

@wezu: It’s real! I’m afraid I don’t have Roaming Ralph ported (yet). I will have to compile the CPython interpreter to JavaScript for that. (There’s a sentence I never thought I’d say!)

If this is more convincing, here is the animated Panda model in pview:
rdb.name/panda3d-webgl/pview-panda.html

Drag middle mouse to rotate. Also try W, to toggle between wireframe modes, or Alt+Enter to switch to full screen mode.

@stereoscopic: oh, you’re right! I didn’t even consider that. It appears to run on my Android phone as well, although touch events are not yet supported.

6

This is amazing! One question is what is the .data file you are using?

7

It’s an image of a virtual file system containing the models and textures to load. It was automatically generated by emscripten using the --preload-file option to emcc.

8

Here’s the C++ Hello World sample ported:
rdb.name/panda3d-webgl/hello_world.html
I’ve made some performance improvements already, but there are still plenty of ways it can be optimized.

9

This is astonishing news. And the js.file is still small compared to js generated by other game engines. I guess thesee 7 mb is the whole Panda engine? Is there any chance of having this feature in some of the upcoming releases?

10

Sort of - it’s the core engine plus the new WebGL rendering back-end compiled together. Support for a lot of auxiliary features has not been compiled in, such as loading PNG or JPG files, freetype fonts, or Python bindings. Adding those is bound to increase the size, but I’m sure there are ways we can optimize (compressing the js file should help a lot already).

It’s just a little pet project for now. I’m about to commit it to a Git branch so that others can contribute. It could be added to a future version if it’s improved to the point where it’s generally useful and stable.

11

Pushed to webgl-port branch.

This is the build script I use to build Panda: (requires Emscripten SDK, of course)

source /home/rdb/local/src/emsdk_portable/emsdk_env.sh
export CXXFLAGS="-std=c++11"
python makepanda/makepanda.py --nothing --use-direct --use-gles2 --optimize 4 --outputdir embuilt --target emscripten $@

Add --profiling to CXXFLAGS when you want to keep the names of C++ methods in the JavaScript call stack, besides allowing you to use the Chrome profiler or something like that.

Right now it builds the C++ hello world sample and pview. Care must be taken that main_loop() is used (instead of manually stepping through do_frame) since it needs some special logic to hand control of the main loop to the browser.

This is the makefile I use to build the sample programs:

BUILT=../embuilt

PRELOAD_FILES=panda-model.bam panda-walk4.bam maps/panda-model.txo
PANDA_LIBS=libp3framework.bc libpanda.bc libpandaexpress.bc libp3dtool.bc libp3dtoolconfig.bc libp3pystub.a libp3webgldisplay.bc

CFLAGS=-O3 --profiling -s ASSERTIONS=1 -s NO_EXIT_RUNTIME=1 -s TOTAL_MEMORY=32000000

all: pview-panda.html

pview-panda.html: pview-panda.cxx $(PRELOAD_FILES)
	em++ -o pview-panda.html -L$(BUILT)/lib -L$(BUILT)/tmp pview-panda.cxx $(addprefix $(BUILT)/lib/,$(PANDA_LIBS)) -I$(BUILT)/include/ $(CFLAGS) $(addprefix --preload-file ,$(PRELOAD_FILES))

clean:
	rm -f pview-panda.html pview-panda.js pview-panda.data pview-panda.html.mem

.PHONY: all clean

EDIT: I forgot to mention that it won’t run from file:/// URLs for security reasons. You have to use “python -m SimpleHTTPServer” and then go to localhost:8000 in your browser in order to run the resulting html.

12

trying to compile webgl but getting the error Could not find source file: p3webgldisplay_composite1.cxx

13

My bad, forgot to check in the webgldisplay directory. Fixed now.

14

error
dtool/src/prc/p3prc_composite2.cxx:5:10: fatal error: ‘emscriptenLogStream.cxx’
file not found

15

Oops, that’s another thing I forgot to commit. Pushed. Sorry about that.

16

I just got Python to work in the browser! Here’s the Python version of the Hello World sample running in the browser:
rdb.name/python_hello_world.png

There’s still a lot of work to do, particularly in patching Python, though, so I haven’t checked anything in yet.

17

Nice! I wonder if it would be possible to add bullet physics support to panda web gl?

18

Thanks to help of ThomasEgi, I’ve made significant progress with porting Python. Here’s the Asteroids sample program working in the browser:
rdb.name/asteroids/main.html

The .js file is 24 MB uncompressed, so it may be a bit slow to download, since I don’t have gzip on the server. It’s only 4.5 MB when compressed.

Sure, I don’t see why not.

19

Congratulations! Thank you!

20

Amazing work you guys :smiley:

I would so looooove to use Panda3D and export to HTML5 :smiley:

I don’t know C++ otherwise I would try to help :cry:

If I may ask , how much work remains to be done ?

Finally can you please , please provide a write-up of how we might be able to do the very same :smiley:

I apologize if I come across as impatient , its really a very exciting thing :smiley:

Thank-you again rdb and ThomasEgi and everyone else :smiley: :smiley: