Panda3D WebGL Port!

thanks! :smiley: ,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[]) {

    // 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.
    // 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.
    // Shut down the engine when done.
    return 0;

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.

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

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.

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

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?

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).

how can i add python to webgl mode project?

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:

The paths in 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.

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.

I really want to give it a try, but little luck so far.
I got pointed some time ago to: but I don’t think it’s working as intended on my PC

So I expect I need to compile this branch:
using these third party libs:
and I also need emscripten from here:
and then run from:
…after fixing all the paths?

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

@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 ).

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.

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).

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.

I’ve uploaded a zip containing all the relevant files for building with Python 2:

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/ --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 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

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

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
  4. Compile for Emscripten using rdb’s flags above.

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

1 Like

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 Below are steps I took to get here. This is on a fresh Ubuntu 16.04 install.

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

git clone
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./
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
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/ --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 and

Do this

In 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/ --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 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.

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.



Traceback (most recent call last):
File “”, 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, but I got this error instead

Traceback (most recent call last):
File “”, line 6, in
from direct.showutil import FreezeTool
File “/home/jcavin/projects/panda3d/embuilt/direct/showutil/”, 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.

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