Part II: OpenGL To WebAssembly With React!

Hey everyone,
I had talked about an end-to-end React App with WebAssembly in my previous article. This one intends to take it a step further by bringing in GPU rendering via OpenGL. So, let’s get started!

Basic WebGL Setup

This section takes you through the basic webgl setup within our react app. It builds upon the code base from the previous article available here.

<canvas id=”glCanvas” width=”100px” height=”100px” />

OpenGL via WebAssembly

Next, let’s try to achieve the same using OpenGL. To accomplish this, we will add a function in our Sample Class that accepts a string (which will be the id of canvas in our DOM).

emcc --bind bindings/SampleBindings.cpp -Icpp/ cpp/*.cpp -s WASM=1 -s MODULARIZE=1 -o Sample.js

Computer Scientist at Adobe | IIT Kanpur

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store