|
/* |
|
This is free and unencumbered software released into the public domain. |
|
|
|
Anyone is free to copy, modify, publish, use, compile, sell, or |
|
distribute this software, either in source code form or as a compiled |
|
binary, for any purpose, commercial or non-commercial, and by any |
|
means. |
|
|
|
In jurisdictions that recognize copyright laws, the author or authors |
|
of this software dedicate any and all copyright interest in the |
|
software to the public domain. We make this dedication for the benefit |
|
of the public at large and to the detriment of our heirs and |
|
successors. We intend this dedication to be an overt act of |
|
relinquishment in perpetuity of all present and future rights to this |
|
software under copyright law. |
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. |
|
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR |
|
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, |
|
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
|
OTHER DEALINGS IN THE SOFTWARE. |
|
|
|
For more information, please refer to <http://unlicense.org/> |
|
*/ |
|
|
|
#include <emscripten/emscripten.h> |
|
#include <emscripten/html5.h> |
|
|
|
#define GL_GLEXT_PROTOTYPES |
|
#define EGL_EGLEXT_PROTOTYPES |
|
#include <GL/gl.h> |
|
#include <GLES2/gl2.h> |
|
#include <math.h> |
|
|
|
static const char* vertex_shader_text = |
|
"precision lowp float;" |
|
"uniform mat4 uMVP;" |
|
"attribute vec4 aPos;" |
|
"attribute vec3 aCol;" |
|
"varying vec3 vCol;" |
|
"void main()" |
|
"{" |
|
"vCol = aCol;" |
|
"gl_Position = uMVP * aPos;" |
|
"}"; |
|
|
|
static const char* fragment_shader_text = |
|
"precision lowp float;" |
|
"varying vec3 vCol;" |
|
"void main()" |
|
"{" |
|
"gl_FragColor = vec4(vCol, 1.0);" |
|
"}"; |
|
|
|
typedef struct Vertex { float x, y, r, g, b; } Vertex; |
|
static GLuint program, vertex_buffer; |
|
static GLint uMVP_location, aPos_location, aCol_location; |
|
|
|
int WAFNDraw(double f, void*); |
|
|
|
// This function is called at startup |
|
int main(int argc, char *argv[]) |
|
{ |
|
emscripten_set_canvas_element_size("canvas", 640, 480); |
|
|
|
EmscriptenWebGLContextAttributes attrs; |
|
emscripten_webgl_init_context_attributes(&attrs); |
|
attrs.alpha = 0; |
|
auto glContext = emscripten_webgl_create_context("canvas", &attrs); |
|
emscripten_webgl_make_context_current(glContext); |
|
|
|
glViewport(0, 0, 640, 480); |
|
|
|
GLuint vertex_shader = glCreateShader(GL_VERTEX_SHADER); |
|
glShaderSource(vertex_shader, 1, &vertex_shader_text, NULL); |
|
glCompileShader(vertex_shader); |
|
|
|
GLuint fragment_shader = glCreateShader(GL_FRAGMENT_SHADER); |
|
glShaderSource(fragment_shader, 1, &fragment_shader_text, NULL); |
|
glCompileShader(fragment_shader); |
|
|
|
program = glCreateProgram(); |
|
glAttachShader(program, vertex_shader); |
|
glAttachShader(program, fragment_shader); |
|
glLinkProgram(program); |
|
|
|
uMVP_location = glGetUniformLocation(program, "uMVP"); |
|
aPos_location = glGetAttribLocation(program, "aPos"); |
|
aCol_location = glGetAttribLocation(program, "aCol"); |
|
|
|
glGenBuffers(1, &vertex_buffer); |
|
glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer); |
|
|
|
glEnableVertexAttribArray(aPos_location); |
|
glVertexAttribPointer(aPos_location, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)0); |
|
glEnableVertexAttribArray(aCol_location); |
|
glVertexAttribPointer(aCol_location, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)(sizeof(float) * 2)); |
|
|
|
emscripten_request_animation_frame_loop(&WAFNDraw, 0); |
|
|
|
return 0; |
|
} |
|
|
|
// This function is called by loader.js every frame |
|
int WAFNDraw(double f, void*) |
|
{ |
|
f /= 1000.0; |
|
|
|
glClear(GL_COLOR_BUFFER_BIT); |
|
|
|
Vertex vertices[3] = |
|
{ |
|
{ -0.6f, -0.4f, 1.f, 0.f, 0.f }, |
|
{ 0.6f, -0.4f, 0.f, 0.f, 1.f }, |
|
{ 0.f, 0.6f, 1.f, 1.f, 1.f }, |
|
}; |
|
vertices[0].r = 0.5f + sinf(f * 3.14159f * 2.0f) * 0.5f; |
|
vertices[1].b = 0.5f + cosf(f * 3.14159f * 2.0f) * 0.5f; |
|
glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer); |
|
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); |
|
|
|
GLfloat mvp[4*4] = { 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1 }; |
|
glUseProgram(program); |
|
glUniformMatrix4fv(uMVP_location, 1, GL_FALSE, mvp); |
|
glDrawArrays(GL_TRIANGLES, 0, 3); |
|
|
|
return EM_TRUE; |
|
} |
I keep reading these "let's skip Emscripten for a smaller and better result" recommending articles. I wish that such approaches would prove something more complex than a hello world/webgl to showcase the superiority over and unrecoverable bloat about Emscripten. The gripe with these articles is that they will take the reader down a fallacious path of ending up re-writing what Emscripten already offers, with little gains.
The article introduction conflates Emscripten with asm.js/fastcomp, and uses asm.js/fastcomp as a "proof" of Emscripten's hackiness; while conveniently omitting the fact that Emscripten can well target the upstream LLVM wasm backend (in fact, these two are developed in conjunction). I am sorry to write, but that kind of rhetorics did not seem honest to me.
If you wanted to just develop software to the web, and not treat the web as one of your (many) build targets, then such an approach might be feasible. However if you are developing software to target many platforms, you end up wasting time reimplementing what is already there in Emscripten - e.g. your GL layer looks like it is copy-paste adapted from Emscripten libraries. If someone needs to target OpenGL ES on Android, and WebGL in browsers, saying that it's easy and smaller with DIY - it may not be that true..
Of course reimplementing the wheel is fine, for fun and learning; although the article was not quite cast in either light, but to make a point of how to improve over Emscripten.
Emscripten's current hurdle that is acknowledged here is that it does need configuring to get the minimal build size for trivial applications, but it is much less work to go through src/settings.js rather than e.g. rewrite Emscripten's GL layer from scratch; It is probably also lacking in documentation, which is perhaps the root cause why these kinds of articles keep coming up? I think we will need to improve on that part.
If you'd like to try out a comparable minimally sized WebGL application built with Emscripten, check out https://github.com/juj/webgl_render_test/ that renders WebGL sprites and text with minimal sized output (~5K JS, ~18K Wasm). It also does not generate any JS garbage to ensure as little as possible GC stuttering, enables easy co-targeting for WebGL 1 vs WebGL 2, is readily Closure compiler -capable out of the box and uses a runtime that is easily extended to multithreading and background rendering, to name a few.
Your final application was ~50K. Here is an online link similar features compiled with Emscripten, that is about half of that in size: http://clb.confined.space/greetings/ , with music, WebGL sprites and text, and audio.
It is great to see interest in directly tackling LLVM wasm tooling, but I think that could also be written about in standalone, without making a needless(?) stomp on Emscripten?