Panda3D WebGL Port!

[liuzhengcai]

thanks! ,it is ok now!

web mode can not load pz file, only bam and egg.

#include "pandaFramework.h"
#include "pandaSystem.h"
#include "pandaegg.h"
 
int main(int argc, char *argv[]) {

     init_libpandaegg();
    // Load the window and set its title.
    PandaFramework framework;
    framework.open_framework(argc, argv);
    framework.set_window_title("My Panda3D Window");
    WindowFramework *window = framework.open_window();
 
    // Load the environment model.
    NodePath scene = window->load_model(framework.get_models(), "environment.egg");
    // Reparent the model to render.
    scene.reparent_to(window->get_render());
    // Apply scale and position transforms to the model.
    scene.set_scale(0.25f, 0.25f, 0.25f);
    scene.set_pos(-8, 42, 0);
 
    // Run the engine.
    framework.main_loop();
    // Shut down the engine when done.
    framework.close_framework();
    return 0;
}

@rdb

You may need to call init_libpandaegg(); at the beginning of your main function (include pandaegg.h) to force the .egg loader to be linked in. The same may apply to inint_libwebgldisplay() (not sure).

You should open the JavaScript console in your browser and look at what it says there. It should give you the error message there.

[rdb]

It should be able to load .pz files, but you need to make sure Panda was built with --use-zlib, and in your makefile you also need to specify -s USE_ZLIB=1 to CFLAGS.

[truthbomber]

Can you please tell us in order what is needed to get Panda3D running on a browser now?
I’m a bit lost.

[rdb]

No work has been done on this recently, so feel free to pick it up.

The main thing we probably need to work on is a good deployment process for easily deploying apps for web. This would probably be done by extending pfreeze, building a generic tool based on it, or it would go hand-in-hand with the new work that’s being done on deploy-ng.

Trying to compile and run a bigger Panda application in the browser would be a good way to find out which features are still missing.

[truthbomber]

As it is right now, what steps does one need to go through though?

[Anon]

This looks great! I want to do some tests with some basic python programs! How do I go about getting the webgl port running with a python program?

[jpryne]

This feature alone (combined with my brief and very positive experience with Panda3D “just working”,) has me very interested in considering Panda3D for my future projects. I have a question for those in the know:

Clearly, there will be features that are available in Panda3D that are not available in exported WebGL applications. (i.e. compute shaders) Will it be feasible to structure an app so as to utilize these features only in an appropriate conext? In other words, could I include compute-shader features that would run in a desktop version, but would either forgo, (or polyfill) them in a WebGL version?

Thanks for any insights!

[Moguri]

@jpryne

This feature alone (combined with my brief and very positive experience with Panda3D “just working”,) has me very interested in considering Panda3D for my future projects. I have a question for those in the know:

Clearly, there will be features that are available in Panda3D that are not available in exported WebGL applications. (i.e. compute shaders) Will it be feasible to structure an app so as to utilize these features only in an appropriate conext? In other words, could I include compute-shader features that would run in a desktop version, but would either forgo, (or polyfill) them in a WebGL version?

Thanks for any insights!

I would imagine that there will be a way for applications to detect that they are running in a WebGL environment. With such information, yes, you should be able to branch and setup features differently for different environments (e.g., Desktop vs Web).

[liuzhengcai]

@rdb

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?

how can i add python to webgl mode project?

[rdb]

I’m afraid I don’t have time to sort out my files and work out instructions, but here are my (messy) files for people who want to give it a try:

rdb.name/panda3d-webgl-build-depends.tar.gz
rdb.name/webgl-music-box.zip

The paths in freezify.py are hardcoded and will need to be adjusted to match your own build directories.

I did do some work recently on trying to make it easier to build for WebGL using deploy-ng; I’ve made some progress, but more work remains.

[stereoscopic]

Is there anywhere where I can download the precompiled libs to use with the python Pfreeze program? I want to test a program with python.

[wezu]

I really want to give it a try, but little luck so far.
I got pointed some time ago to: github.com/pmp-p/panda3d-webgl-runtime but I don’t think it’s working as intended on my PC

So I expect I need to compile this branch:
github.com/panda3d/panda3d/tree/webgl-port
using these third party libs:
rdb.name/panda3d-webgl-build-depends.tar.gz
and I also need emscripten from here:
kripken.github.io/emscripten-site/index.html
and then run freezify.py from:
rdb.name/webgl-music-box.zip
…after fixing all the paths?

A how-to-for dummies would really be welcome.

[pmpp]

@wezu i am trying to refresh that runtime to use python3.7 , webgl2 and both chrome and firefox
that old experiment was only tested on chromium v8 engine ( firefox was very slow at the time ).

[pokepetter]

I tried running my game in this after merging it into one file and porting to Python 2. It worked fine!
Is there any chance you could share the compiled project? I’ve tried to compile with emscipten, but I haven’t had any luck with that. Even if it doesn’t have all the features, it’s still good enough for sharing gamejam games and such.

Panda3D is honestly the best game engine I’ve run in the browser. JavaScript based ones tend to be slower.

[pmpp]

Hi, @wezu good news webgl port seems to be willing to work with recent emscripten version and python 3.7 !

Also recent tests showed possibility to use python and panda as shared libraries so it may be possible to pack simple games with the help of some prebuilt javascript libs.

In the past compiling projects was not very easy and produced insanely huge runtimes.
Anyone interested in testing/helping may come on #panda3d on freenode irc ( bash, C + javascript knowledge needed, no windows support).

[wezu]

Well I have no bash, c++ nor javascript knowlegde and I am using windows…but but it still sound like a step in the right direction.

[rdb]

I’ve uploaded a zip containing all the relevant files for building with Python 2:
http://rdb.name/webgl-editor-and-dependencies.zip

It includes the thirdparty packages and compiled Python modules and can be extracted into a clone of the webgl-port branch of the GitHub repository. Unfortunately it does not have the compiled Panda3D modules because I don’t have the time to sort out my build environment.

I compiled Panda with these flags (note that a recent master build of interrogate needs to be on the PATH)

python2 makepanda/makepanda.py --nothing --no-png --use-egg --use-zlib --no-freetype --use-bullet --no-openssl --use-python --use-direct --use-pview --use-gles2 --use-openal --use-vorbis --optimize 4 --outputdir embuilt --target emscripten --no-egl

When that is done, it should be possible to just go into the editor directory and edit the paths at the top of the freezify.py script. Then it can be run using python2 to create the editor.js file.

Then, use this to host your filesystem as a server on localhost, and access the editor.html file from the browser:

python2 -m SimpleHTTPServer

[aedancullen]

I built interrogate first on the webgl-port branch using python makepanda/makepanda.py --nothing --static and then followed rdb’s guidelines with webgl-editor-and-dependencies.zip.

For those who haven’t got it running yet, here are the steps that worked on my system:

1. Checkout webgl-port branch, install dependencies, set up Emscripten SDK.
2. Build interrogate using the makepanda command above and add to PATH (it’s in built/bin).
3. Extract webgl-editor-and-dependencies.zip.
4. Compile for Emscripten using rdb’s flags above.

Then you should be able to go ahead with freezify.py. For the more recent Emscripten versions, I also added the option -s WASM=0 to the emcc commands in freezify.py because Emscripten now defaults to WebAssembly. I’m not sure if wasm will work as-is with webgl-port right now.

[jkcavin]

What am I doing wrong? Do I need to install Panda into the python that I’m calling with bash (the system’s python)? I’m getting this error when running freezify.py. Below are steps I took to get here. This is on a fresh Ubuntu 16.04 install.

Traceback (most recent call last):
  File "freezify.py", line 1, in <module>
    from direct.showutil import FreezeTool
ImportError: No module named direct.showutil

git clone GitHub - emscripten-core/emsdk: Emscripten SDK
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
sudo apt-get install nodejs
sudo apt-get install cmake
sudo apt-get install default-jre

Then to get Panda set up

cd …
git clone GitHub - panda3d/panda3d: Powerful, mature open-source cross-platform game engine for Python and C++, developed by Disney and CMU
cd panda3d

sudo apt-get install build-essential pkg-config python-dev libpng-dev libjpeg-dev libtiff-dev zlib1g-dev libssl-dev libx11-dev libgl1-mesa-dev libxrandr-dev libxxf86dga-dev libxcursor-dev bison flex libfreetype6-dev libvorbis-dev libeigen3-dev libopenal-dev libode-dev libbullet-dev nvidia-cg-toolkit libgtk2.0-dev libassimp-dev libopenexr-dev

git checkout webgl-port
python2 makepanda/makepanda.py --nothing --static
export PATH=$PATH:~/projects/panda3d/built/bin:~/projects/panda3d/built/lib
git checkout webgl-port

To prevent this

ERROR ‘error: undefined symbol: popen’ see Build error when compiling for WebAssembly · Issue #23005 · godotengine/godot · GitHub and error: undefined symbol: popen · Issue #7302 · emscripten-core/emscripten · GitHub

Do this

In makepanda.py add " -s ERROR_ON_UNDEFINED_SYMBOLS=0 " next to " -s WARN_ON_UNDEFINED_SYMBOLS=1 " in the same strings (2 places). Replacing the old with the new didn’t work for me.

python2 makepanda/makepanda.py --nothing --no-png --use-egg --use-zlib --no-freetype --use-bullet --no-openssl --use-python --use-direct --use-pview --use-gles2 --use-openal --use-vorbis --optimize 4 --outputdir embuilt --target emscripten --no-egl

cd ./editor

add " -s WASM=0 " to freezify.py and update all of the paths at the top. Find and replace paths up to /pand3d/ repository-directory which is where rdb’s zip is extracted.

EDIT:
I also kept the optimization below “-O3”. That is a capital O not zero. The memory initializer, the .mem file, would disappear after building and later generate a 404.

python2 freezify.py

Output:

Traceback (most recent call last):
File “freezify.py”, line 1, in <module>
from direct.showutil import FreezeTool
ImportError: No module named direct.showutil

I added the full path to /embuilt/ to $PATH and appended it to sys.path in freezify.py, but I got this error instead

Traceback (most recent call last):
File “freezify.py”, line 6, in
from direct.showutil import FreezeTool
File “/home/jcavin/projects/panda3d/embuilt/direct/showutil/FreezeTool.py”, line 19, in
from panda3d.core import *
ImportError: No module named core

I got past this once. I believe by installing Panda. However, if I deleted the built and embuilt folders and did “emcc --clear-cache,” I’d end up with these errors when I re-ran the compile commands again.

[rdb]

Yeah, you need to have Panda3D installed in your system to be able to use the freeze tool.