diff options
| -rw-r--r-- | md/writeup/wasm_fractal.md | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/md/writeup/wasm_fractal.md b/md/writeup/wasm_fractal.md new file mode 100644 index 0000000..cfb6bea --- /dev/null +++ b/md/writeup/wasm_fractal.md @@ -0,0 +1,144 @@ +title:Wasm fractal +keywords:wasm,c,js,emscripten,gcc + +# Wasm fractal + +## Intro + +Since 2000's I have had some tech-dream to use one language to write and its results are available to +all people independent of platform. In 2020 when WebAssembly is available by default on all platforms +and all major languages are able to translate source code to WebAssembly this era is here ;]. +There was time when java applets nad adobe flash where main technologies for interactive web demos, now +everything could be done with javascript, but also old-style languages like C are able to +run latest tech in browser woohoo. + +## Insights + +As demo works on linux and in browser there is some quircks to overcome to make code +compatible for both tehnologies. It wasnt straight away to just compile and join app SDL+OpenGL +for wasm. + +### Main loop + +Each C program have main entry point. And SDL programms usual structure include loop +that get events and execute them. + +```c +//Usual SDL code +SDL_Event event; + SDL_StartTextInput(); + while (SDL_PollEvent(&event) != 0) + { + switch (event.type) + { + case SDL_QUIT: + { + quit = 1; + break; + } + case SDL_KEYDOWN: + { + switch (event.key.keysym.sym) + { + case SDLK_DOWN: + } + } + } + } +``` + +As wasm is running in browser as canvas, then graphics context rendering is controlled from ui thread +so this loop cannot run all the time, and need to return back to ui thread. + +```c +void main_loop() +{ + +#if __EMSCRIPTEN__ + emscripten_set_main_loop(main_tick, 25, 1); +#else + while (0 == quit) + { + main_tick(); + } +#endif +} +``` +Main loop where moved to single function. And now its able to run in single cycle for wasm, +and behave as loop for other platforms. + + +### Static queue + +Allocating space in wasm from C with malloc is not supported. There is possibility to write +wrapper that manages static allocated memory, and create wrapper to alloc/dealloc memory. +Or there is possible to create arrays from js and pass buffer to wasm binary. Easier is just +to allocate static buffer. Queue that saves data for fractal iterations is saved in static +allocated buffer. + +### Color pallets + + + +### Shaders + +First versions of drawing loop didnt worked out of the box in browse. There was spent some time +to find a way to run shader. Got errors in shader language in browser, while on linux evertyhing +was working. There is version difference between shader language supported between linux and +was platform. Main fix was to define earlier shader language version. + +```c + "#version 100 \n" + "attribute vec4 position; \n" + "attribute vec4 colour; \n" + "varying vec4 interpolated_colour;\n" + "void main() \n" + "{ \n" + " interpolated_colour = colour;\n" + " gl_Position = position; \n" + " \n" + "} +``` + +### SDL+GL and compilation + +On linux OpenGLES library where used while it have less features then full OpenGL, +for current purpose is have everything. To enable different versions of GL on +wasm need to search for available options inside emscripten sdk js-configuration file. + + +Compile on linux +``` +lSDL2 -lSDL2_ttf -lGLESv2 -lGL +``` + +Compile with emscripten +``` +-s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["png"]' -s USE_SDL_TTF=2 -s MAX_WEBGL_VERSION=2 -s MIN_WEBGL_VERSION=2 -s LLD_REPORT_UNDEFINED -s USE_GLFW=3 +``` + +### Compilation + + + +## Demo + + + +## Demo page + +Permanent residence of demo, with latest version available +[Fractal Demo](http://wasm.main.lv/fractal) + + + +## Thx + +[developers.lv](https://developers.lv) - for first tryouts + +## Source + +Source provided as is, no any attempt to make it easy to build is made. + + +## Links
\ No newline at end of file |