Giter VIP home page Giter VIP logo

blazor3d-playground's Introduction

3D world in Blazor - Playground

Live version is hosted on Github Pages

How to clone project

TODO => merge submodules instructions

About project & code structure

This project contains my latest tests & discoveries in domain of 3D rendering in Blazor and the code is available here. I have decided to go with WebGL for now (check the list at the bottom for other possible technologies) because of it's maturity and wide adoption on any type of device. The objective is to write 3D apps with as few lines of JavaScript as possible.

My research in this topic started with BlazorExtensions/Canvas nuget package. However the package is no longer supported or developed and has a few not working/bugged/not implemented features - so I decided to fork & modify it to my needs and you can check the code right here.

3D graphics necessitates the use of matrices, unfortunately none of availables math libraries provides functionnality similar to GlMatrix.js - very popular library for WebGL written in JavaScript. I had to create my own simplified version of it. The library is very limited for now, so it's not published in it's own repository on Github and you can only see it in the GLMatrixSharp folder in the main repo.

During the development I have noticed that I need to write similar bites of code nearly all the time. For this reason I have created a proof of concept for a project with helper classes to create 3D world faster and with less bugs. For now it has classes for managing loading models, textures, allocating buffers etc. The code is located in the WebGLSharp folder in the main repo.

Samples

List of currently available samples:

  • Simple rotating cube - quick animation created following Mozilla MSDN tutorial on WebGL
  • Model loading - loading custom mesh from .obj file using my custom library
  • Camera control with mouse - rotating the camera around an object using mouse events
  • Data to texture (WIP) - streaming data to an texture and displaying it in form of animation

Todo List

  • Modify helper classes to make them less opinionated and shader dependend
  • Add inverse method to matrix library

Other technologies to check

  • Unity3d => custom interop layer with JavaScript
  • WaveEngine => .net5 and compiles to webassembly, but is lacking documentation and is bugged and clearly not production ready
  • WebGPU => still experimental and implementation could be similar to WebGL
  • JavaScript 3D library => robust engine and plenty of solved issues, but necessitates a custom interop layer that could harm the performance
  • And many many other solutions...

blazor3d-playground's People

Contributors

dominiknita avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.