In the last two posts in this series, we added support for loading a PNG file into OpenGL as a texture, and then we displayed that texture on the screen:

• Loading a PNG into Memory and Displaying It as a Texture with OpenGL ES 2, Using (Almost) the Same Code on iOS, Android, and Emscripten.
• Loading a PNG into Memory and Displaying It as a Texture with OpenGL ES 2: Adding Support for iOS.

In this post, we’ll add support for emscripten.

Prerequisites

To complete this lesson, you’ll need to have completed Loading a PNG into Memory and Displaying It as a Texture with OpenGL ES 2: Adding Support for iOS. The previous emscripten post, Calling OpenGL from C on the Web by Using Emscripten, Sharing Common Code with Android and iOS, covers emscripten installation and setup.

You can also just download the completed project for this part of the series from GitHub and check out the code from there.

Updating the emscripten code

There’s just one new file that we we need to add to /airhockey/src/platform/emscripten/, which is platform_asset_utils.c:

#include "platform_asset_utils.h"
#include "platform_file_utils.h"
#include <assert.h>
#include <stdio.h>
#include <stdlib.h>

FileData get_asset_data(const char* relative_path) {
	assert(relative_path != NULL);
	return get_file_data(relative_path);
}

void release_asset_data(const FileData* file_data) {
	assert(file_data != NULL);
	release_file_data(file_data);
}

For emscripten, there is nothing special to do since it supports a virtual file system using pre-embedded resources. For loading assets, all we need to do here is just forward the calls on to the platform-independent file loading functions that we defined in the previous post.

Adding third-party dependencies

Since emscripten doesn’t have zlib built into it like Android and iOS do, we’ll need to add that as a third-party dependency. Download zlib 1.2.8 from http://zlib.net/ and extract it to /airhockey/src/3rdparty/libzlib. We won’t need to do anything else to get it to compile.

Updating the Makefile

To get things to compile and run, let’s replace the Makefile in the emscripten directory with the following contents:

CFLAGS = -O2 -I. -I../../core -I../common -I../../3rdparty/libpng -I../../3rdparty/libzlib -Wall -Wextra
LDFLAGS = --embed-file ../../../assets@/

OBJECTS = main.o \
		  platform_asset_utils.o \
		  ../common/platform_log.o \
		  ../common/platform_file_utils.o \
		  ../../core/buffer.o \
		  ../../core/asset_utils.o \
		  ../../core/game.o \
		  ../../core/image.o \
		  ../../core/shader.o \
		  ../../core/texture.o \
		  ../../3rdparty/libpng/png.o \
		  ../../3rdparty/libpng/pngerror.o \
		  ../../3rdparty/libpng/pngget.o \
		  ../../3rdparty/libpng/pngmem.o \
		  ../../3rdparty/libpng/pngpread.o \
		  ../../3rdparty/libpng/pngread.o \
		  ../../3rdparty/libpng/pngrio.o \
		  ../../3rdparty/libpng/pngrtran.o \
		  ../../3rdparty/libpng/pngrutil.o \
		  ../../3rdparty/libpng/pngset.o \
		  ../../3rdparty/libpng/pngtrans.o \
		  ../../3rdparty/libpng/pngwio.o \
		  ../../3rdparty/libpng/pngwrite.o \
		  ../../3rdparty/libpng/pngwtran.o \
		  ../../3rdparty/libpng/pngwutil.o \
		  ../../3rdparty/libzlib/adler32.o \
		  ../../3rdparty/libzlib/crc32.o \
		  ../../3rdparty/libzlib/deflate.o \
		  ../../3rdparty/libzlib/infback.o \
		  ../../3rdparty/libzlib/inffast.o \
		  ../../3rdparty/libzlib/inflate.o \
		  ../../3rdparty/libzlib/inftrees.o \
		  ../../3rdparty/libzlib/trees.o \
		  ../../3rdparty/libzlib/zutil.o
TARGET = airhockey.html

all: $(TARGET)

$(TARGET): $(OBJECTS)
	$(CC) $(CFLAGS) -o $@ $(LDFLAGS) $(OBJECTS)

clean:
	$(RM) $(TARGET) $(OBJECTS)

This Makefile specifies all of the required object files. When we run make, it will find the source files automatically and compile them into objects, using the CFLAGS that we’ve defined above. When we run this Makefile through emmake, emcc will use the --embed-file ../../../assets@/ line to package all of the assets into our target HTML file; the @/ syntax tells emscripten to place the assets at the root of the virtual file system. More information can be found at the emscripten wiki.

If your emscripten is configured and ready to go, then you can build the program by running emmake as follows, changing the path to emmake to reflect where you’ve installed emscripten.

MacBook-Air:emscripten user$ /opt/emscripten/emmake make -j 8

If all went well, airhockey.html should look similar to the following HTML:

For information on installing and configuring emscripten, see Calling OpenGL from C on the Web by Using Emscripten, Sharing Common Code with Android and iOS or the emscripten tutorial.

Exploring further

The full source code for this lesson can be found at the GitHub project. For the next few posts, we’re going to start doing more with our base so that we can start making this look more like an actual air hockey game!