New beta version of Ab4d.SharpEngine.Web with samples for any web framework

by abenedik 28. October 2025 13:21

I am informing you that an important new beta version of Ab4d.SharpEngine for the browser has been released.

The new beta2 version brings many new features from the core Ab4d.SharpEngine library. The list of the most important new features is provided below.

But first, I want to talk about an even more important thing than new features. The samples for the previous version (beta1) were written only for a Blazor WebAssembly application. But in most cases, you would want to add 3D graphics to an existing website. Because there are many web frameworks, it is likely that the website is not using Blazor WebAssembly.

To solve that, the new samples also come with a NoBlazorBrowserDemo solution. This shows how to create a pure WebAssembly .Net project with no references to Blazor. That project can reference Ab4d.SharpEngine.Web library. The code in this project creates the 3D scene by using Scene, SceneNodes and other objects from the Ab4d.SharpEngine library. The code can also use JavaScript interop so when added to a web page it can call the functions that are defined in JavaScript and also JavaScript functions (for example, button event handlers on the web page) can call the .Net code to update the 3D scene.

When that project is compiled for the Release build and published, it generates a few JavaScript (.js) and WebAssembly (.wasm) files that can be added to any website.

Because of very efficient trimming, the size of all the generated files (including the .NET Runtime) is only 9.3 MB. When compressed with Brotli, the size of all the code required to show a simple 3D scene is only 2.2 MB! (see screenshot below)

The new samples demonstrate how to show the 3D scene in a simple HTML and JavaScript web page by using different web servers. The following samples are available:

  • Asp.Net Core web server
  • Express Node.js web server
  • Python's socketserver

Here is a screenshot when Express Node.js is used as a web server (note the marked transfer size):

3D scene rendered by SharpEngine in browser on node.js Express web server and by using Brotli compression

The NoBlazorBrowserDemo solution can be used as a demonstration of how to use Ab4d.SharpEngine to easily show complex 3D graphics in any web framework, including Angular, React, Blazor with server-side rendering and any other. Note that I am not an expert on web servers and web frameworks. If you know of any improvements to the samples, or can provide another sample using a popular web framework, please write to issues or discussions, or create a PR.

And as with the previous version, this version also includes the Blazor WebAssembly project. The new sample is updated to demonstrate the functionality of the new beta 2 version. The following is a list of the most important new features:

  • Added support for loading, creating and showing textures.
  • Added support for showing bitmap fonts and vector fonts generated from TrueType font files.
  • Added ObjImporter that can import obj files.
  • Added support for SolidColorMaterial.
  • Fixed sorting transparent objects by camera distance.
  • When WebGL 2.0 is not supported, then WebGL 1.0 is used.

The following screenshot shows the new sample (note that teapot was loaded from a obj file and has textures; there are also bitmap and vector fonts - later generated from a TrueType file):

Ab4d.SharpEngine.Web beta 2 sample with loaded obj file, bitmap and vector fonts

And here is another screenshot showing Obj viewed with a more complex obj file imported:

Ab4d.SharpEngine.Web sample showing imported gearbox obj model

You can also check the online demo here (if you see an error, please disable caching - usually it helps to press CTRL-F5 to reload all the files)

The release of the v1.0 is still planned for the end of 2025. See the Current implementation details to check which features from the main Ab4d.SharpEngine library are already implemented and which will be available for v1.0.

 

In 2025 I also plan to release a new version of Ab3d.PowerToys and Ab3d.DXEngine. The development versions of both libraries already have many improvements and fixes. Some are still planned to be implemented. For Ab3d.PowerToys, one of the more interesting new features is smoother camera rotation that will nicely animate the camera when it is rotated by the user (this can be enabled on request; the default behaviour will stay unchanged). For Ab4d.DXEngine, I will try to provide a version that will not depend on SharpDX but will use System.Numerics for Vector3 and Matrix4x4. The interop for DirectX 11 will be embedded into the Ab3d.DXEngine library. My tests show that using System.Numerics instead of SharpDX.Mathematics can provide significant performance improvements because of better use of SIMD instructions. Also, because SharpDX is not updated anymore, some users are concerned about that. Embedding DirectX interop into the library will also remove those concerns.

I will try to do my best to preserve the names of the classes, methods and parameters as much as possible. But because of some namespace changes and new class names (for example, Matrix4x4 instead of Matrix), the new library will require some changes to the user code.

But if you are happy with SharpDX and would only want to upgrade to a new version of Ab3d.DXEngine without any modifications, then there will also be a new Ab3d.DXEngine version that will still use SharpDX. The plan is to have two NuGet packages: "Ab3d.DXEngine" will use the embedded DirectX interop and System.Numerics; but there will also be "Ab4d.DXEngine.SharpDX" NuGet package that will still use the SharpDX library.

If you are using Ab3d.PowerToys or Ab3d.DXEngine and you have any new feature requests, now is the best time to report them.

Tags: , , , , , , ,

SharpEngine

Published new Ab4d.SharpEngine for the browser

by abenedik 26. September 2025 13:10

I am pleased to inform you that a significant milestone for the AB4D company has been reached: as of today, we provide 3D graphics support for all platforms, including the browser.

Today, the first public beta version of the Ab4d.SharpEngine.Web library has been published on NuGet. Also, the source for the demo project has been published on GitHub. You can also check the live demo.

Here is a screenshot of the demo:

3D scene rendered with SharpEngine in a browser

Because the Ab4d.SharpEngine.Web library is using the same source code as the Ab4d.SharpEngine (using linked files), all the implemented classes use the same names and have the same properties and methods. This means that you can reuse the existing code from the desktop and mobile apps and use it for the browser. An exception is the features that are not yet supported in the web library. You can see the currently supported features on Roadmap and Implementation details.

The current demo demonstrates how to utilize Blazor WebAssembly to display 3D graphics in the browser. But because the Blazor project was created as a Progressive Web App (PWA; when creating a new project, check that the required CheckBox for PWA), the web application can also be installed on Windows, Android and iOS systems as a local app that can be started offline (without an internet connection). You can try this with the demo app. Developing PWA applications also provides an additional option for developing for desktop or mobile platforms.

What is more, you can use the existing Ab4d.SharpEngine license also allows you to develop for the browser.

Therefore, I would really like to invite you to check the new library. Please report any issues or recommendations to the GitHub issues or use any other communication tool (email, feedback form).

Tags: , , , , , ,

SharpEngine

New Ab4d.SharpEngine v3.2 and first working demo of web based rendering engine

by abenedik 12. September 2025 17:36

I am happy to inform you that a new version of Ab4d.SharpEngine, the cross-platform 3D rendering engine, was published today.

This version was actually planned to be released in November or December. However, due to the recent resolution of critical issues and the implementation of exciting new features that our users requested, I decided to publish a new official version sooner than planned.

Significant improvements have been made to improve the stability and reliability of the engine. Numerous new tests have been created to check these aspects. Some issues were resolved by modifying the Ab4d.SharpEngine, but there were also some issues that were due to bugs in the Vulkan validation layers or Intel drivers. To check the stability of the engine by yourself, one test is now available to all users. If you start the new samples for Avalonia, WPF or WinUI, then you will find a new "Advanced options" section in the Settings window. Among other options, there is also a new "Show samples TEST runner" CheckBox. When checked, a new TEST button will appear. If clicked, it starts showing random samples as quickly as possible (on ApplicationIdle). You can use that to see how long the engine can run.

This version also brings some major new features. The most interesting is support for rendering 3D models from scanned 2D images from MRI or CT scanners. See the following screenshots:

Volume rendering of 3D head model from MRI slices

The 3D model is rendered by using the new VolumeMaterialEffect that can show the 3D model from any camera angle, despite the slices being made from only one direction (one slice image is shown in the upper right corner of the screenshot). Based on the values from the scanned slices, it is possible to assign different colors and transparencies to different parts of the model - in this sample, this is used to distinguish between hard and soft tissue.

To show the 3D model, first, a 3D texture is generated from all of the scanned 2D images. Then the new CubeSlicer class is used to generate a mesh that slices a 3D cube from the camera's position to the other end of the 3D cube. Then this mesh is rendered by using the new VolumeMaterial that samples the value from the 3D texture (values from the scanned images) and converts the values into colors by using a transfer function texture (for each value in the scanned image, a color is assigned).

The sample can also be used to show how the 3D slices are generated. This can be best observed by yourself by starting the new sample and selecting "Show slice lines" or "Show slices mesh" options. You can also quickly see that by watching the following video.

The code from the sample can be used as a generic method for displaying 3D models from scanned 2D images. However, if you require any special settings or tweaks, please let me know, and I will try to adjust the code accordingly.

Another great new feature is support for super-fast hit-testing of complex meshes by using octree structures. This feature does not look that interesting, but it can be very useful for many of the users of the Ab4d.SharpEngine.

Usually, when performing hit testing, the engine generates a 3D ray from the mouse (or pointer) position to the 3D scene. Then the engine checks which SceneNodes may be intersected by the ray (by checking the bounding box). For those SceneNodes, the ray intersection is checked for each triangle of the SceneNode. When showing complex meshes with millions of triangles, this process can be very slow.

Octree structure helps solve that by organizing the triangles into a multi-level structure where each level divides the parent's 3D space into eight areas (or OctreeNode objects). The first level contains only one area, the second level contains eight areas, the third level 64 areas and the fourth level 512 areas (it is possible to define more than four levels; this is recommended for very complex meshes). Each of those areas has its own bounding box. So when doing hit testing, the area's bounding boxes are used to determine which areas are intersected by the ray. Then only the triangles in those areas are tested for intersection. This may reduce the number of checks by many thousands.

The following screenshot from the new sample shows how each level divides the space into 8 areas (see the bottom right corner to see how many triangles are in each of the levels)

The MeshOctree object can further optimize the distribution of the triangles by slightly expanding the areas so more triangles fall into lower areas. The following screenshot shows the distribution of triangles after that optimization (note that more triangles are distributed in the lower levels):

For example, the unoptimized image shows that the first level contains 728 triangles. Those triangles are always tested for intersection with the ray. But in the optimized versions, the first and the second levels have no triangles. To see the full distribution of triangles, the Octree sample prints the "Octree statistics" to the Visual Studio Output window. Here is a shortened part of that (the numbers in the list show how many triangles are in each area or OctreeNode):

Level 1: Triangles count: 0
Level 2: Triangles count: 0
Level 3: Triangles count: 113: 0, 0, 0, 0, 0, 7, 0, 0, ... (and other values)
Level 4: Triangles count: 3983: 4, 11, 52, 12, 8, 4, 12, ... (and other values)
Total triangles count: 4096

So, for example, if the ray intersects only the bounding box of the first area in the fourth level, then only 4 triangle-ray intersections are performed (11 intersection checks are done when only the second area is hit). Now, compared to 4096 checks that would need to be performed when no octree is used.

But using an octree is not free. For complex meshes, generating all the required OctreeNodes may take some time.

By default, the MeshOctree object is generated when hit-testing a mesh that has more than 512 positions. This is defined by the HitTestOptions.MeshPositionsCountForOctreeGeneration property. You can increase this value or set it to int.MaxValue to prevent automatic octree generation. If your SceneNode is not supposed to be hit-testable, you can also disable octree generation by setting the SceneNode.IsHitTestVisible property to false. You can also manually generate the octree by calling the CreateOctree method on the mesh object (do not forget to assign the created MeshOctree to the Octree property).

In the HitTestOptions class, there are also some other new properties that define the global settings for octree generation (for example, you can set the max level count and generate the octree at mesh initialization instead of hit-test time).

So, the octree structure can provide a huge hit-testing performance boost. However, if you do not need that and you experience a longer initialization time, you can disable the octree generation.

The last new feature that I wanted to mention was also developed for one of the customers and is also related to hit-testing. This customer is showing a mesh with millions of triangles and he needs to know which triangle is hit by the mouse. Usually, using OctTree would be perfect for that scenario, but he is changing the mesh (smoothing) on each frame. This means that on each frame, the MeshOctree needs to be regenerated. This was very slow and significantly impacted the frame rate.

The solution was to render the scene to an ID bitmap where each triangle would get its own color. So instead of regenerating the MeshOctree, the frame only needs to be rendered again and then the index of the triangle can be determined by the pixel color under the mouse. This is much faster and allows the customer to perform real-time smoothing of the triangles under the mouse.

The following screenshot shows the new sample that demonstrates the triangle hit-testing that uses the ID bitmap (the mouse is not shown, but the triangle under the mouse is shown by a red polyline):

This version also brings some other new features. As always, to see the list of all the changes and fixes, check the Ab4d.SharpEngine change log.

 

I know that at this time of the year, many of you have already been expecting to be able to try the first version of Ab4d.SharpEngine for the web browser. But because of the issues in the core Ab43.SharpEngine library, and because some time was spent implementing the new features that are mentioned here, the web version is not yet ready for the first public version.

However, a lot of work was still done for the web version. Therefore, I am very happy to announce that today I have published the web page where you can check how the web version of the Ab4d.SharpEngine works. You can check it in the Ab4d.SharpEngine for web pre-alpha demo page.

Here is also a screenshot:

This demo shows that the engine already supports rendering meshes with standard material (with or without a specular effect). It also supports hit testing, rendering 3D lines and camera manipulation with mouse or touch (on mobile devices).

When the demo page is first opened, it takes a few seconds until the page is loaded (most time is spent downloading and compiling the self-contained .NET WASM file). But on subsequent page loads, the 3D scene is shown immediately.

You can also test how the engine works when rendering many SceneNodes. With each click on the "Add many objects" 1000 BoxModelNode objects are added to the scene. You can observe the rendering times by opening the DevTools (F12) and check the log messages in the Console tab. You will see that even though the engine is running in the browser, it can be very fast - on my computer, it is rendering more than 5000 objects in around 7 ms (rendering individual objects and not using mesh instancing).

As seen from this demo, many of the major features are already implemented. The code just needs a little bit of additional work. Also, documentation about the web project setup and a quick usage guide need to be written. I think that this can be completed before the end of this month. Then a new NuGet package and the source code for the sample project will be published. This will also allow you to test the engine with your own web projects.

Some of you were asking about the license of the new Ab4d.SharpEngine for the web. The good news is that there will continue to be only one license for desktop, mobile and web platforms. This means that the existing customer will be able to start using the new web version without any additional costs.

Tags: , , , , , , ,

SharpEngine