1 /**
2 * \file emscripten.c
3 * Emscripten example of using the single-file \c zstddeclib. Draws a rotating
4 * textured quad with data from the in-line Zstd compressed DXT1 texture (DXT1
5 * being hardware compression, further compressed with Zstd).
6 * \n
7 * Compile using:
8 * \code
9 * export CC_FLAGS="-Wall -Wextra -Werror -Os -g0 -flto --llvm-lto 3 -lGL -DNDEBUG=1"
10 * export EM_FLAGS="-s WASM=1 -s ENVIRONMENT=web --shell-file shell.html --closure 1"
11 * emcc $CC_FLAGS $EM_FLAGS -o out.html emscripten.c
12 * \endcode
13 *
14 * \author Carl Woffenden, Numfum GmbH (released under a CC0 license)
15 */
16
17 #include <stddef.h>
18 #include <stdio.h>
19 #include <stdlib.h>
20 #include <string.h>
21
22 #include <emscripten/emscripten.h>
23 #include <emscripten/html5.h>
24
25 #include <GLES2/gl2.h>
26 #include <GLES2/gl2ext.h>
27
28 #include "../zstddeclib.c"
29
30 //************************* Test Data (DXT texture) **************************/
31
32 /**
33 * Zstd compressed DXT1 256x256 texture source.
34 * \n
35 * See \c testcard.png for the original.
36 */
37 static uint8_t const srcZstd[] = {
38 #include "testcard-zstd.inl"
39 };
40
41 /**
42 * Uncompressed size of \c #srcZstd.
43 */
44 #define DXT1_256x256 32768
45
46 /**
47 * Destination for decoding \c #srcZstd.
48 */
49 static uint8_t dstDxt1[DXT1_256x256] = {};
50
51 #ifndef ZSTD_VERSION_MAJOR
52 /**
53 * For the case where the decompression library hasn't been included we add a
54 * dummy function to fake the process and stop the buffers being optimised out.
55 */
ZSTD_decompress(void * dst,size_t dstLen,const void * src,size_t srcLen)56 size_t ZSTD_decompress(void* dst, size_t dstLen, const void* src, size_t srcLen) {
57 return (memcmp(dst, src, (srcLen < dstLen) ? srcLen : dstLen)) ? dstLen : 0;
58 }
59 #endif
60
61 //*************************** Program and Shaders ***************************/
62
63 /**
64 * Program object ID.
65 */
66 static GLuint progId = 0;
67
68 /**
69 * Vertex shader ID.
70 */
71 static GLuint vertId = 0;
72
73 /**
74 * Fragment shader ID.
75 */
76 static GLuint fragId = 0;
77
78 //********************************* Uniforms *********************************/
79
80 /**
81 * Quad rotation angle ID.
82 */
83 static GLint uRotId = -1;
84
85 /**
86 * Draw colour ID.
87 */
88 static GLint uTx0Id = -1;
89
90 //******************************* Shader Source ******************************/
91
92 /**
93 * Vertex shader to draw texture mapped polys with an applied rotation.
94 */
95 static GLchar const vertShader2D[] =
96 #if GL_ES_VERSION_2_0
97 "#version 100\n"
98 "precision mediump float;\n"
99 #else
100 "#version 120\n"
101 #endif
102 "uniform float uRot;" // rotation
103 "attribute vec2 aPos;" // vertex position coords
104 "attribute vec2 aUV0;" // vertex texture UV0
105 "varying vec2 vUV0;" // (passed to fragment shader)
106 "void main() {"
107 " float cosA = cos(radians(uRot));"
108 " float sinA = sin(radians(uRot));"
109 " mat3 rot = mat3(cosA, -sinA, 0.0,"
110 " sinA, cosA, 0.0,"
111 " 0.0, 0.0, 1.0);"
112 " gl_Position = vec4(rot * vec3(aPos, 1.0), 1.0);"
113 " vUV0 = aUV0;"
114 "}";
115
116 /**
117 * Fragment shader for the above polys.
118 */
119 static GLchar const fragShader2D[] =
120 #if GL_ES_VERSION_2_0
121 "#version 100\n"
122 "precision mediump float;\n"
123 #else
124 "#version 120\n"
125 #endif
126 "uniform sampler2D uTx0;"
127 "varying vec2 vUV0;" // (passed from fragment shader)
128 "void main() {"
129 " gl_FragColor = texture2D(uTx0, vUV0);"
130 "}";
131
132 /**
133 * Helper to compile a shader.
134 *
135 * \param type shader type
136 * \param text shader source
137 * \return the shader ID (or zero if compilation failed)
138 */
compileShader(GLenum const type,const GLchar * text)139 static GLuint compileShader(GLenum const type, const GLchar* text) {
140 GLuint shader = glCreateShader(type);
141 if (shader) {
142 glShaderSource (shader, 1, &text, NULL);
143 glCompileShader(shader);
144 GLint compiled;
145 glGetShaderiv(shader, GL_COMPILE_STATUS, &compiled);
146 if (compiled) {
147 return shader;
148 } else {
149 GLint logLen;
150 glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &logLen);
151 if (logLen > 1) {
152 GLchar* logStr = malloc(logLen);
153 glGetShaderInfoLog(shader, logLen, NULL, logStr);
154 #ifndef NDEBUG
155 printf("Shader compilation error: %s\n", logStr);
156 #endif
157 free(logStr);
158 }
159 glDeleteShader(shader);
160 }
161 }
162 return 0;
163 }
164
165 //********************************** Helpers *********************************/
166
167 /**
168 * Vertex position index.
169 */
170 #define GL_VERT_POSXY_ID 0
171
172 /**
173 * Vertex UV0 index.
174 */
175 #define GL_VERT_TXUV0_ID 1
176
177 /**
178 * \c GL vec2 storage type.
179 */
180 struct vec2 {
181 float x;
182 float y;
183 };
184
185 /**
186 * Combined 2D vertex and 2D texture coordinates.
187 */
188 struct posTex2d {
189 struct vec2 pos;
190 struct vec2 uv0;
191 };
192
193 //****************************************************************************/
194
195 /**
196 * Current quad rotation angle (in degrees, updated per frame).
197 */
198 static float rotDeg = 0.0f;
199
200 /**
201 * Emscripten (single) GL context.
202 */
203 static EMSCRIPTEN_WEBGL_CONTEXT_HANDLE glCtx = 0;
204
205 /**
206 * Emscripten resize handler.
207 */
resize(int type,const EmscriptenUiEvent * e,void * data)208 static EM_BOOL resize(int type, const EmscriptenUiEvent* e, void* data) {
209 double surfaceW;
210 double surfaceH;
211 if (emscripten_get_element_css_size ("#canvas", &surfaceW, &surfaceH) == EMSCRIPTEN_RESULT_SUCCESS) {
212 emscripten_set_canvas_element_size("#canvas", surfaceW, surfaceH);
213 if (glCtx) {
214 glViewport(0, 0, (int) surfaceW, (int) surfaceH);
215 }
216 }
217 (void) type;
218 (void) data;
219 (void) e;
220 return EM_FALSE;
221 }
222
223 /**
224 * Boilerplate to create a WebGL context.
225 */
initContext()226 static EM_BOOL initContext() {
227 // Default attributes
228 EmscriptenWebGLContextAttributes attr;
229 emscripten_webgl_init_context_attributes(&attr);
230 if ((glCtx = emscripten_webgl_create_context("#canvas", &attr))) {
231 // Bind the context and fire a resize to get the initial size
232 emscripten_webgl_make_context_current(glCtx);
233 emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, NULL, EM_FALSE, resize);
234 resize(0, NULL, NULL);
235 return EM_TRUE;
236 }
237 return EM_FALSE;
238 }
239
240 /**
241 * Called once per frame (clears the screen and draws the rotating quad).
242 */
tick()243 static void tick() {
244 glClearColor(1.0f, 0.0f, 1.0f, 1.0f);
245 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
246
247 if (uRotId >= 0) {
248 glUniform1f(uRotId, rotDeg);
249 rotDeg += 0.1f;
250 if (rotDeg >= 360.0f) {
251 rotDeg -= 360.0f;
252 }
253 }
254
255 glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
256 glFlush();
257 }
258
259 /**
260 * Creates the GL context, shaders and quad data, decompresses the Zstd data
261 * and 'uploads' the resulting texture.
262 *
263 * As a (naive) comparison, removing Zstd and building with "-Os -g0 s WASM=1
264 * -lGL emscripten.c" results in a 15kB WebAssembly file; re-adding Zstd
265 * increases the Wasm by 26kB.
266 */
main()267 int main() {
268 if (initContext()) {
269 // Compile shaders and set the initial GL state
270 if ((progId = glCreateProgram())) {
271 vertId = compileShader(GL_VERTEX_SHADER, vertShader2D);
272 fragId = compileShader(GL_FRAGMENT_SHADER, fragShader2D);
273
274 glBindAttribLocation(progId, GL_VERT_POSXY_ID, "aPos");
275 glBindAttribLocation(progId, GL_VERT_TXUV0_ID, "aUV0");
276
277 glAttachShader(progId, vertId);
278 glAttachShader(progId, fragId);
279 glLinkProgram (progId);
280 glUseProgram (progId);
281 uRotId = glGetUniformLocation(progId, "uRot");
282 uTx0Id = glGetUniformLocation(progId, "uTx0");
283 if (uTx0Id >= 0) {
284 glUniform1i(uTx0Id, 0);
285 }
286
287 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
288 glEnable(GL_BLEND);
289 glDisable(GL_DITHER);
290
291 glCullFace(GL_BACK);
292 glEnable(GL_CULL_FACE);
293 }
294
295 GLuint vertsBuf = 0;
296 GLuint indexBuf = 0;
297 GLuint txName = 0;
298 // Create the textured quad (vert positions then UVs)
299 struct posTex2d verts2d[] = {
300 {{-0.85f, -0.85f}, {0.0f, 0.0f}}, // BL
301 {{ 0.85f, -0.85f}, {1.0f, 0.0f}}, // BR
302 {{-0.85f, 0.85f}, {0.0f, 1.0f}}, // TL
303 {{ 0.85f, 0.85f}, {1.0f, 1.0f}}, // TR
304 };
305 uint16_t index2d[] = {
306 0, 1, 2,
307 2, 1, 3,
308 };
309 glGenBuffers(1, &vertsBuf);
310 glBindBuffer(GL_ARRAY_BUFFER, vertsBuf);
311 glBufferData(GL_ARRAY_BUFFER,
312 sizeof(verts2d), verts2d, GL_STATIC_DRAW);
313 glVertexAttribPointer(GL_VERT_POSXY_ID, 2,
314 GL_FLOAT, GL_FALSE, sizeof(struct posTex2d), 0);
315 glVertexAttribPointer(GL_VERT_TXUV0_ID, 2,
316 GL_FLOAT, GL_FALSE, sizeof(struct posTex2d),
317 (void*) offsetof(struct posTex2d, uv0));
318 glGenBuffers(1, &indexBuf);
319 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuf);
320 glBufferData(GL_ELEMENT_ARRAY_BUFFER,
321 sizeof(index2d), index2d, GL_STATIC_DRAW);
322 glEnableVertexAttribArray(GL_VERT_POSXY_ID);
323 glEnableVertexAttribArray(GL_VERT_TXUV0_ID);
324
325 // Decode the Zstd data and create the texture
326 if (ZSTD_decompress(dstDxt1, DXT1_256x256, srcZstd, sizeof srcZstd) == DXT1_256x256) {
327 glGenTextures(1, &txName);
328 glBindTexture(GL_TEXTURE_2D, txName);
329 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
330 glCompressedTexImage2D(GL_TEXTURE_2D, 0,
331 GL_COMPRESSED_RGB_S3TC_DXT1_EXT,
332 256, 256, 0, DXT1_256x256, dstDxt1);
333 } else {
334 printf("Failed to decode Zstd data\n");
335 }
336 emscripten_set_main_loop(tick, 0, EM_FALSE);
337 emscripten_exit_with_live_runtime();
338 }
339 return EXIT_FAILURE;
340 }
341