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

Disclaimer: 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.

 

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 -

 

extern "C" void EMSCRIPTEN_KEEPALIVE move_train_forward() { 
    angle -= 0.01f;
    glutPostRedisplay();
 }

 extern "C" void EMSCRIPTEN_KEEPALIVE move_train_backward() { 
    angle += 0.01f;
    glutPostRedisplay();
 }

where 

angle

 is the position of the train, and 

glutPostRedisplay()

 causes the program to re-render. The two functions would move the train forward and backward.

 

 

Also, you'd want to make sure you are importing 

emscripten.h

 into your C++ program.

 

 
#include <emscripten.h>

After this, we are ready to compile the program to WASM.

 
emcc main.cpp -lGL -lGLU -lglut  -s WASM=1 -s LEGACY_GL_EMULATION=1 -O3 -o index.js

We are setting 

LEGACY_GL_EMULATION=1

 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.

 

 

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=1 -s LEGACY_GL_EMULATION=1 -O3 -o index.html

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">
      var canvas = document.getElementById("canvas");
      var Module = {
        canvas
      };
    </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.

 

      const accelerometer = new Accelerometer({ frequency: 30 });
      accelerometer.addEventListener("reading", () => {
        const { x } = accelerometer;
        if (x > 0) {
          _move_train_forward();
        } else if (x < 0) {
          _move_train_backward();
        }
      });
      accelerometer.start();

Here 

_move_train_forward 

and 

_move_train_backward

 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.

 

 

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/

 
 
 

[출처] https://hackernoon.com/how-to-get-the-most-out-of-opengl-with-c-and-wasm-eop33sb

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
» [WebAssembly] How To Get The Most Out Of OpenGL With C++ And WASM file 졸리운_곰 2022.04.19 2
109 [GameMaker] [한글판] 게임메이커 8 (Game Maker 8) file 졸리운_곰 2022.04.05 14
108 [Xamarin] Xamarin.Forms. Android 실행/ 디버깅시에 에뮬리이터 배포오류 Why am I getting this error in Xamarin.Forms using Visual Studio? file 졸리운_곰 2021.12.01 9
107 [Xamarin] Visual Studio 2019 를 설치하고 Xmarin.forms 빌드시 에러 : I am just download and start Visual Studio (Xamarin Project). But there is an ERROR NU1101. file 졸리운_곰 2021.12.01 9
106 [게임개발] How to Create Smarter NPCs in Games file 졸리운_곰 2021.08.31 14
105 (CGP)16장. 탱크 게임 file 졸리운_곰 2021.06.28 499
104 (CGP) 15장. 탱크 맵툴 만들기 file 졸리운_곰 2021.06.28 210
103 (CGP) 14장 Sogo 게임 file 졸리운_곰 2021.06.28 13
102 (CGP)13장. 패턴 뷰어 file 졸리운_곰 2021.06.28 12
101 (CGP) 12장 Snake 게임 file 졸리운_곰 2021.06.28 17
100 (CGP) 11장 Snake 게임 툴 만들기 file 졸리운_곰 2021.06.28 18
99 (CGP) 10장. 하트담기 게임 file 졸리운_곰 2021.06.28 14
98 (CGP) 9장. 하트 툴 만들기 file 졸리운_곰 2021.06.28 13
97 (CGP) 8장. 벽돌깨기 게임 file 졸리운_곰 2021.06.28 28
96 (CGP)7장. 짝 맞추기 게임 file 졸리운_곰 2021.06.28 27
95 (CGP) 6장. 두더지 잡기 게임 file 졸리운_곰 2021.06.28 36
94 (CGP) 5장. 슛골인 게임 file 졸리운_곰 2021.06.27 122
93 (CGP) 4장. 사운드 file 졸리운_곰 2021.06.27 20
92 (CGP) 3장. 게임의 기본 구조 file 졸리운_곰 2021.06.27 75
91 (CGP) 2장. 함수 file 졸리운_곰 2021.06.27 19
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED