add wasm post

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