Panda3D WebGL Port!

Return to Panda Features in Development

Panda3D WebGL Port!

Postby rdb » Wed Apr 01, 2015 2:14 pm

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:
http://rdb.name/panda3d-webgl/pview.html (triangle)
http://rdb.name/panda3d-webgl/pview-panda.html (animated panda)
http://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.

Exciting, isn't it? :)
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby stereoscopic » Wed Apr 01, 2015 6:51 pm

Nice! It even worked on my iPad! where can I download it?
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes, the ones who see things differently.
stereoscopic
 
Posts: 71
Joined: Tue Jan 13, 2015 3:44 pm

Re: Panda3D WebGL Port!

Postby wezu » Thu Apr 02, 2015 3:09 am

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 :oops:
I may be totally wrong, cause I'm a dancin' fool.

NameError: global name 'elf' is not defined
User avatar
wezu
 
Posts: 1002
Joined: Tue May 19, 2009 1:03 pm

Re: Panda3D WebGL Port!

Postby mese79 » Thu Apr 02, 2015 4:01 am

Well done!!
mese79
 
Posts: 69
Joined: Thu Sep 22, 2011 5:13 am

Re: Panda3D WebGL Port!

Postby rdb » Thu Apr 02, 2015 10:55 am

@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:
http://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.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby stereoscopic » Thu Apr 02, 2015 8:04 pm

This is amazing! One question is what is the .data file you are using?
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes, the ones who see things differently.
stereoscopic
 
Posts: 71
Joined: Tue Jan 13, 2015 3:44 pm

Re: Panda3D WebGL Port!

Postby rdb » Thu Apr 02, 2015 8:19 pm

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.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby rdb » Fri Apr 03, 2015 8:31 pm

Here's the C++ Hello World sample ported:
http://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.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby maxxim » Mon Apr 06, 2015 6:59 am

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?
maxxim
 
Posts: 17
Joined: Thu Apr 03, 2014 2:35 pm

Re: Panda3D WebGL Port!

Postby rdb » Mon Apr 06, 2015 7:05 am

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.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby rdb » Mon Apr 06, 2015 8:32 am

Pushed to webgl-port branch.

This is the build script I use to build Panda: (requires Emscripten SDK, of course)
Code: Select all
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:
Code: Select all
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.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby stereoscopic » Mon Apr 06, 2015 11:38 am

trying to compile webgl but getting the error Could not find source file: p3webgldisplay_composite1.cxx
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes, the ones who see things differently.
stereoscopic
 
Posts: 71
Joined: Tue Jan 13, 2015 3:44 pm

Re: Panda3D WebGL Port!

Postby rdb » Mon Apr 06, 2015 12:00 pm

My bad, forgot to check in the webgldisplay directory. Fixed now.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby stereoscopic » Sun Apr 12, 2015 12:47 pm

error
dtool/src/prc/p3prc_composite2.cxx:5:10: fatal error: 'emscriptenLogStream.cxx'
file not found
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes, the ones who see things differently.
stereoscopic
 
Posts: 71
Joined: Tue Jan 13, 2015 3:44 pm

Re: Panda3D WebGL Port!

Postby rdb » Sun Apr 12, 2015 3:25 pm

Oops, that's another thing I forgot to commit. Pushed. Sorry about that.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby rdb » Tue Jun 09, 2015 5:07 pm

I just got Python to work in the browser! Here's the Python version of the Hello World sample running in the browser:
http://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.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby stereoscopic » Fri Jun 19, 2015 12:04 pm

Nice! I wonder if it would be possible to add bullet physics support to panda web gl?
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes, the ones who see things differently.
stereoscopic
 
Posts: 71
Joined: Tue Jan 13, 2015 3:44 pm

Re: Panda3D WebGL Port!

Postby rdb » Sun Jun 21, 2015 11:48 am

Thanks to help of ThomasEgi, I've made significant progress with porting Python. Here's the Asteroids sample program working in the browser:
http://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.

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

Sure, I don't see why not.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby flavio » Mon Jun 22, 2015 2:32 pm

Congratulations! Thank you!
Image
flavio
 
Posts: 562
Joined: Fri Apr 16, 2010 12:45 pm
Location: Rome, Italy

Re: Panda3D WebGL Port!

Postby Orange » Tue Jun 23, 2015 3:28 am

Amazing work you guys :D

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

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 :D

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

Thank-you again rdb and ThomasEgi and everyone else :D :D
Orange
 
Posts: 9
Joined: Thu Dec 20, 2012 9:42 pm

Re: Panda3D WebGL Port!

Postby BaoBao » Sat Aug 15, 2015 3:27 pm

WOW! I'm also very interested in this port, too! Nice! :D
User avatar
BaoBao
 
Posts: 1
Joined: Sat Aug 15, 2015 2:49 pm

Re: Panda3D WebGL Port!

Postby cn04 » Fri Aug 21, 2015 10:23 am

Currently the Emscripten "test" HTML page is unattractive and doesn't provide a way for the user to see the download progress of the .js file. A simple 'loading' screen that shows a progress meter while resources are downloading (similar to the plugin's) would be useful.

The only problem is that dependencies such as models, textures, etc. are downloaded after the .js file begins running. And, as far as I know, Emscripten doesn't provide a way for us to monitor the progress of that. (If you look at the code of the test page, there appears to be a sort of progress/loading indication for these, but the actual compiled script never actually calls those functions.)
cn04
 
Posts: 18
Joined: Sat Jan 31, 2015 8:27 am

Re: Panda3D WebGL Port!

Postby rdb » Sun Aug 23, 2015 12:28 pm

Of course. There would eventually be a proper replacement for the default emscripten test page, but it's probably more important to focus on getting all of the core functionality working well at this stage.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby rdb » Sun Sep 06, 2015 9:29 pm

While compiling CPython to ASM.js does work, I'm not convinced that it's the most optimal solution - we're essentially running a VM inside of a VM, and the CPython VM is really big. I've been looking around for Python-to-JS transpilers that will help make a lighter and faster Panda build.

The most promising one is I found is Brython, which seems in active development, and has excellent interoperability with JavaScript - you can directly call JavaScript functions from Python, and Python objects are really just decorated JavaScript objects.

So I dusted off interrogate's C binding generator, and created an FFI tool to use emscripten's FFI to spit out JavaScript bindings for Panda3D. Now I can call Panda3D functions from JavaScript and therefore Brython:
http://rdb.name/brython-panda3d.png

Brython tries to be a drop-in replacement for JavaScript, so you're even able to put this in an HTML page:
Code: Select all
<script type="text/python">
from panda3d.core import *
....
</script>

Of course, we would provide a code path to compile to obfuscated JS directly for production use.

There's still some way to go (overloaded functions are not yet handled, and keyword arguments, etc.), but I can call most Panda classes and functions just fine. It's promising so far that it compiles and loads so quickly.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby Orange » Sun Sep 06, 2015 10:03 pm

Awesome news rdb :D

Thank-you sooo very much for continuing to work on this :D

I know that it is very much appreciated by the community :D

Hopefully soon we can be able to add a simple build step to export to HTML5 :D
Orange
 
Posts: 9
Joined: Thu Dec 20, 2012 9:42 pm

Re: Panda3D WebGL Port!

Postby cn04 » Wed Sep 09, 2015 2:56 pm

Very fancy! :D
cn04
 
Posts: 18
Joined: Sat Jan 31, 2015 8:27 am

Re: Panda3D WebGL Port!

Postby cn04 » Thu Oct 01, 2015 8:02 am

Just a note - this port doesn't work if the browser only has experimental WebGL support.
The application will only run if the official 'webgl' support is reported, and not with 'experimental-webgl'. In the experimental case, there are no errors, but the canvas remains blank (no graphics are rendered).
See http://stackoverflow.com/questions/11871077/proper-way-to-detect-webgl-support
cn04
 
Posts: 18
Joined: Sat Jan 31, 2015 8:27 am

Re: Panda3D WebGL Port!

Postby rdb » Sun Oct 04, 2015 5:32 am

That's a bit surprising, as the emscripten function we call does seem to fall back to experimental-webgl:
https://github.com/kripken/emscripten/b ... gl.js#L649
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby rdb » Fri Feb 12, 2016 7:31 pm

Update: brython seems to be a no-go, since it doesn't support reference counting, which we need in order to free objects from the emscripten heap, and I can't spare the time to add this feature.

The only approach that is actually proven to work so far is emscripten-compiled CPython, so I'm back to that. The Python code is frozen using pfreeze and then compiled using emscripten, with a custom main function and loader. It works well, actually, and with a lot of work I managed to make the process fairly efficient, though it's still a huge amount of code.

It may be interesting in the future to consider Nuitka, which is a compiler that compiles CPython bytecode to actual C code (rather than embedding Python bytecode, although it still depends on CPython). It seems to work well with Panda code on the desktop at least. It may (or may not) offer performance and size benefits. To be investigated.

In any case, I've done further work on the WebGL port, making it more robust and adding more features. Here's another demo showing off pointerlock mode to achieve FPS-style controls, using a modified version of cn04's loader with tobspr's design - written in Python!

http://rdb.name/panda3d-webgl/simple_fps.html
(Don't mind the crappy graphics or the sloppy controls - there's still a lot of things to fix, I mainly slapped this together to test pointerlock and the load process.)

For the early adopters I've updated the build dependencies (includes CPython patch). Let me know if you want the freezify.py front-end that I used to produce the online demos.
rdb
 
Posts: 10816
Joined: Mon Dec 04, 2006 5:58 am
Location: Netherlands

Re: Panda3D WebGL Port!

Postby Orange » Mon Feb 15, 2016 1:07 am

Awesome work rdb :D

I tried the demo and it seems to be pretty smooth. :)

The loading process and pointerlock worked fine on Firefox 44 , very slick experience like Unity :)

How much work do you think remains to get WebGL as valid deployment target ? I would like to use Panda instead of Unity, but I don't know if Panda is " ready " just yet. :(

I tried downloading the compressed archive but for me at least it seems corrupted ? :(
Orange
 
Posts: 9
Joined: Thu Dec 20, 2012 9:42 pm

Next

Return to Panda Features in Development

Who is online

Users browsing this forum: No registered users and 3 guests