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)
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: 10314
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: 74
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: 913
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: 10314
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: 74
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: 10314
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: 10314
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: 11
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: 10314
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: 10314
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: 74
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: 10314
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: 74
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: 10314
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: 10314
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: 74
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: 10314
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: 553
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: 7
Joined: Thu Dec 20, 2012 9:42 pm


Return to Panda Features in Development

Who is online

Users browsing this forum: No registered users and 0 guests