: This post is meant to put out my experience of using OpenGL with C++ & WASM. I know there is WebGL that could be used instead of what I've done, but I was really curious about WASM and wanted to learn more about it. So I decided to give life to my university's Computer Graphics project by porting it to WASM. Disclaimer I hope my experience of learning how to use C++, OpenGL & WASM might be of some use to you. What we are building Setting up The first most step is to download emscripten and set it up, You can find the . instructions here After that, you need to be sure that you have appropriate files installed for C++ & OpenGL, in most Linux distros all the required packages are already present. Making the C++ program ready for WASM The OpenGL project I had done for my university was a train that translates (moves) along the x-axis, and this was supposed to be controlled by the user. I directly compiled the program to WASM and included it in my project, it worked fine on computers (I could control the train using the keyboard), but the problem was on mobile devices. So I had to expose two functions from the C++ program to the javascript, it was done as follows - { 
    angle -= ;
    glutPostRedisplay();
 } { 
    angle += ;
    glutPostRedisplay();
 } extern "C" EMSCRIPTEN_KEEPALIVE void move_train_forward () 0.01f extern "C" EMSCRIPTEN_KEEPALIVE void move_train_backward () 0.01f where is the position of the train, and causes the program to re-render. The two functions would move the train forward and backward. angle glutPostRedisplay() Also, you'd want to make sure you are importing into your C++ program. emscripten.h # include <emscripten.h> After this, we are ready to compile the program to WASM. emcc main.cpp -lGL -lGLU -lglut  -s WASM= -s LEGACY_GL_EMULATION= -O3 -o index.js 1 1 We are setting because I am using an old version of OpenGL, feel free to skip it if you are using a newer version. The output is a js and wasm file, you'll need to use the js file in your HTML. LEGACY_GL_EMULATION=1 you can also compile the C++ program to a complete HTML, JS & WASM project by changing the command to emcc main.cpp -lGL -lGLU -lglut  -s WASM= -s LEGACY_GL_EMULATION= -O3 -o index.html 1 1 Emscripten generates everything for you, you just need to run the project on a local server to see the result. But since we are planning to add much more functionality, we are just going to choose the js option. Writing the HTML & JS We need to create a canvas element, the output from the C++ program will be drawn on this canvas. Right after that, we are calling the js generated by Emscripten. < = > canvas id "canvas" </ > canvas < = > script type "text/javascript" canvas = .getElementById( ); Module = {
        canvas
      }; var document "canvas" var </ > script < = > script src "index.js" </ > script To control the train on mobile devices, I thought It'd be fun to control it using the accelerometer. The following code does it. accelerometer = Accelerometer({ : });
      accelerometer.addEventListener( , () => { { x } = accelerometer; (x > ) {
          _move_train_forward();
        } (x < ) {
          _move_train_backward();
        }
      });
      accelerometer.start(); const new frequency 30 "reading" const if 0 else if 0 Here and are the functions that we wrote in the C++ program (Emscripten adds the in the beginning). I've used the same methods to control the train via buttons as well. _move_train_forward _move_train_backward _ The rest of the code is available in the Codeandbox above. I'm going to stop here, let me know if you have any doubts! Thanks for taking the time to read through this article. Previously published at https://www.lenvingonsalves.me/opengl-wasm-cpp/

Code at day, Ride at night. I'm looking for new opportunities!

2021 - HackerNoon Contributor of the Year - CPP

Hire me! Click here to view my resume

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

How To Get The Most Out Of OpenGL With C++ And WASM

Too Long; Didn't Read

@98lenvi

RELATED STORIES