DEV Community: Konrad Chmielecki

my experience with blazor

Konrad Chmielecki — Mon, 18 Apr 2022 20:42:00 +0000

When I wrote my first project in this year, I don't even planed to used blazor. But my childlike curiosity directed me on that path.
I wanted to know, haw hard will be port game from desktop to web browser in .net. And I found out is not that hard.
But I have experience with similar tools before. I used gopherjs and emscripten.
Thanks to that I know what must to do, to communicate c# with javasrcipt.
I made working blazor port pretty fast. Not only server side but webassembly to.
Of curs create port for different platform always generate some problems.
Most weird problem I have in blazor is how floating point number behave.
I received in some cases NaN values. This problem I resolve adding value like 0.0001 in calculation.

Blazor server work differently then wasm. But I don't expected that server version will be cause game to flickering.

This is happen when server don't have enough cpu power.

Now when I know pros and cons of blazor for creating game, I start thinking about next game.
But I focus only on wasm version and smartphones. This will be challenge, I do not doubt that.
Maybe blazor is not perfect tool for this task. But I see some potential, and is nice to use c# in web browser.

webgl context, canvas and blazor pages

Konrad Chmielecki — Fri, 08 Apr 2022 15:11:43 +0000

When I developed my simple game PolySnake, I decided to experimenting with Blazor. Creating port for server and webassembly don't took me too much time. But as usual, supporting different platform is tedious task.

Problem I had, is lose connection between gl context and canvas. This happen when page is changed. When switching pages is happening, html components from previous page are removed.

Return to previous page causes components to be creating agin. But for webGL is not thad same canvas.
And sadly webGL context it does not allow to by signed to other canvas.

For me initializing everything one more time is not good idea. This is not efficient and require heavy changes in architecture of my game.
And I started thinking, that I can creating canvas in javascript. This canvas will be alive that long as is required. And only need is attached that canvas to other component.

This component take focus and handling keyboard inputs. Now when page will be changed,
that same canvas will be reattach to proper place.

This is how it is looking in my code Index.razor and main.js

gl uniform

Konrad Chmielecki — Thu, 01 Jul 2021 08:36:00 +0000

Lately I had problem with variable in my code. Variable that I send to GLSL don't work. It turned out I forgot uniform instruction before variable type.
Of course my memory is good but short.

Tabel of functions that use uniform instructions.

uniform types	functions
float	gl.uniform1f gl.uniform1fv
vec2	gl.uniform2f gl.uniform2fv
vec3	gl.uniform3f gl.uniform3fv
vec4	gl.uniform4f gl.uniform4fv
int	gl.uniform1i gl.uniform1iv
ivec2	gl.uniform2i gl.uniform2iv
ivec3	gl.uniform3i gl.uniform3iv
ivec4	gl.uniform4i gl.uniform4iv
sampler2D	gl.uniform1i gl.uniform1iv
samplerCube	gl.uniform1i gl.uniform1iv
mat2	gl.uniformMatrix2fv
mat3	gl.uniformMatrix3fv
mat4	gl.uniformMatrix4fv
bool	gl.uniform1i gl.uniform1f gl.uniform1iv gl.uniform1fv
bvec2	gl.uniform2i gl.uniform2f gl.uniform2iv gl.uniform2fv
bvec3	gl.uniform3i gl.uniform3f gl.uniform3iv gl.uniform3fv
bvec4	gl.uniform4i gl.uniform4f gl.uniform4iv gl.uniform4fv

Each functions in table take handle to GLSL variable in first argument

In functions prefix i is int, f float and v is table.

gl.getUniformLocation(glsl_program, variable_name) return handle to variable in GLSL.

In WebGL handle will be represented by WebGLUniformLocation interface.

denosaur faster

Konrad Chmielecki — Sun, 27 Jun 2021 12:07:12 +0000

Thanks to the parameter --no-check you can in deno disable type checking.
Which significantly speeds up typescript processing.
Useful when combined with vscode, which validates code on development.