Aspnetcore: Systems.Numerics and WebGL?

[Thaina]

Did or will the Blazor project would covering the port of Systems.Numerics types and possible to bridge the system with the WebGL?

I am interest in building WebGL/WebAssembly game engine with C#. And Blazor seem promising to write C# in browser. But I don't see any mention about webgl and 3D things in Blazor yet

[SteveSandersonMS]

The System.Numerics types are available.

possible to bridge the system with the WebGL

Depends on what you mean. It is possible to use the .NET->JavaScript interop facility to invoke WebGL APIs from .NET code. However, the fact that you're talking about System.Numerics suggests you'd like to use .NET code inside a WebGL shader, which is most definitely not possible.

Primarily with Blazor we're focusing on HTML app scenarios.

[tzachshabtay]

Hi @SteveSandersonMS ,

I took the WebGL question as "are there plans to create a WebGL dotnet binding API (which will basically just wrap around the js API)"?
Or rather, the generic form of the question "how many (and which) of the existing js APIs do you intend to wrap as a dotnet API?"

I'm also very interested in integrating WebGL with Blazor and would love, if a wrapper API is not happening, a basic example of drawing a quad with a texture with WebGL js interop in a Blazor website.

[Thaina]

@SteveSandersonMS No not about shader but about API to interact with it

As @tzachshabtay talk about binding webgl API. What I said bridge is mean using object in System.Numerics with API about setting shader attribute and uniform and VertexStream in addition to js typed array. And also efficiently interop, translate, and serialize those data

That's what I mean bridging

For example, in webgl we write

  const colors = [
    1.0,  1.0,  1.0,  1.0,    // white
    1.0,  0.0,  0.0,  1.0,    // red
    0.0,  1.0,  0.0,  1.0,    // green
    0.0,  0.0,  1.0,  1.0,    // blue
  ];

  const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

  return {
    position: positionBuffer,
    color: colorBuffer,
  };

I would like is, at least, as this

```C#
var color = new System.Numerics.Matrix4x4();

var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,color,gl.STATIC_DRAW); // Matrix, Quaternion, Vector will be converted directly to float32Array
```

Or better API in C# flavor

[Thaina]

@SteveSandersonMS please reopened

[wanton7]

@Thaina focus of this project is to create SPA framework similar to Angular 2+ etc like @SteveSandersonMS said, as you can see on project's main page https://github.com/aspnet/Blazor. But you could probably create those bindings yourself. If you don't need HTML pages maybe you could just use Mono directly. It's what Blazor uses to compile IL to WebAssembly.

Also if you want to create an game engine you should minimize WebAssembly <-> JavaScript calls, i've read that those are pretty slow. So doing straight WebGL api binding is probably quite slow. One blog i read about it is here https://medium.com/@mbebenita/webassembly-is-30x-faster-than-javascript-c71ea54d2f96

[Thaina]

@wanton7 Well, while the focus of this project is to be equivalence of angular typescript. typescript itself can call all javascript API directly because it is direct translate to javascript without overhead. Which also include canvas and webgl context. So it has no problem that angular2 didn't do anything about it

But Blazor is somehow utilize webassembly. And yes as you show me, there is overhead for calling js from wasm. So I think we should not write binding over it by ourself but it should be optimized from the Blazor project wrapping it from the get go like other DOM API. Well, canvas is still DOM so webgl and other canvas context should be wrapped I think

[wanton7]

@Thaina I think you are misunderstanding something. You are comparing TypeScript that is just JavaScript superset to Blazor that is not a language at all or compiler. Nor does Blazor compile anything to WebAssembly, it uses Mono to do that. It's like comparing TypeScript to Angular. Mono is probably what you think Blazor is. Mono is your TypeScript and Blazor is your Angular. Mono's repo is here https://github.com/mono/mono

If you know about libraries/frameworks like Angular, React and VueJS then you know those thing are made so you don't need to do manual DOM manipulation. Also you are comparing DOM api where performance doesn't matter that much to WebGL that needs performance much more if plan to do something like games. You should do renderer with JavaScript and send stuff in batches from WebAssembly. You can't optimize WebGL api for WebAssembly by doing 1:1 api binding to JavaScript.

[Thaina]

@wanton7 I'm not sure who would be responsible for binding javascript DOM API with C#, Blazor or mono? I think it would be Blazor

Put it simply, who will write the HTMLCanvasElement class in C#? It also need to have function GetContext(string) which is return the object that contains declaration and implementation of webgl

And this would be my point here that I want it to implemented as optimized as possible. And also utilize the type in System.Numerics natively

So if the Blazor would not responsible for this please tell me which project it would be responsible for. But I don't think it is of mono

[wanton7]

@Thaina Answer to your question is Mono. https://mobile.twitter.com/migueldeicaza/status/953327960324485121

[Thaina]

@wanton7 Then I'm sorry. Thank you very much

[tezine]

It would be awesome if we could create web apps with blazor + webgl components!
Qt framework uses opengl to create their qml components and its a lot easier and faster to create fluid animated uis.
Blazor+ webgl could be better since its c# instead of c++ and could run on any browser!

[TehWardy]

Is this not what's being asked for ...
https://github.com/BlazorExtensions/Canvas
... general WebGL / Canvas interop from Blazor.