├── SpawnDev.BlazorJS.MultiView ├── _Imports.razor ├── Assets │ └── icon-128.png ├── wwwroot │ └── icon-128.png ├── Shaders │ ├── multiview.renderer.2d.fs.glsl │ ├── multiview.renderer.2dz.fs.glsl │ ├── multiview.renderer.side-by-side.fs.glsl │ ├── multiview.renderer.vs.glsl │ ├── multiview.renderer.anaglyph.fs.glsl │ └── multiview.renderer.base.fs.glsl ├── Render2DZ.cs ├── Render2D.cs ├── RenderSideBySide.cs ├── SpawnDev.BlazorJS.MultiView.csproj ├── Utils │ ├── EmbeddedShaderLoader.cs │ └── WebGLUtilities.cs ├── RenderAnaglyph.cs └── MultiviewRenderer.cs ├── SpawnDev.BlazorJS.MultiView.Demo ├── wwwroot │ ├── favicon.png │ ├── icon-128.png │ ├── icon-192.png │ ├── sample-data │ │ └── weather.json │ ├── index.html │ └── css │ │ └── app.css ├── Layout │ ├── MainLayout.razor │ ├── NavMenu.razor │ ├── MainLayout.razor.css │ └── NavMenu.razor.css ├── _Imports.razor ├── App.razor ├── Program.cs ├── SpawnDev.BlazorJS.MultiView.Demo.csproj ├── Pages │ ├── Home.razor │ ├── RealTimeWebCam2Dto3D.razor │ └── RealtimeVideo2Dto3D.razor ├── Shared │ ├── ModelLoadView.razor │ └── ProgressBar.razor └── Properties │ └── launchSettings.json ├── README.md ├── LICENSE.txt ├── SpawnDev.BlazorJS.MultiView.sln ├── .github └── workflows │ └── main.yml ├── .gitattributes └── .gitignore /SpawnDev.BlazorJS.MultiView/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web 2 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Assets/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.MultiView/master/SpawnDev.BlazorJS.MultiView/Assets/icon-128.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/wwwroot/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.MultiView/master/SpawnDev.BlazorJS.MultiView/wwwroot/icon-128.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/wwwroot/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.MultiView/master/SpawnDev.BlazorJS.MultiView.Demo/wwwroot/favicon.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/wwwroot/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.MultiView/master/SpawnDev.BlazorJS.MultiView.Demo/wwwroot/icon-128.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/wwwroot/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.MultiView/master/SpawnDev.BlazorJS.MultiView.Demo/wwwroot/icon-192.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Shaders/multiview.renderer.2d.fs.glsl: -------------------------------------------------------------------------------- 1 | // Multiview to many by Todd Tanner 2 | 3 | #include 4 | 5 | void main(void) 6 | { 7 | gl_FragColor = texture2D(videoSampler, vUV); 8 | } 9 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Layout/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 |
3 |
4 | 5 |
6 | 7 |
8 |
9 | @Body 10 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Shaders/multiview.renderer.2dz.fs.glsl: -------------------------------------------------------------------------------- 1 | // Multiview to many by Todd Tanner 2 | 3 | #include 4 | 5 | void main(void) 6 | { 7 | //vec4 uiColor = uiColor(vUV); 8 | vec4 ret = pseudo2DZ(vUV); 9 | //ret.rgb = mix(ret.rgb, uiColor.rgb, uiColor.a); 10 | //ret.a = 1.0; 11 | gl_FragColor = ret; 12 | } 13 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Shaders/multiview.renderer.side-by-side.fs.glsl: -------------------------------------------------------------------------------- 1 | // Multiview to many by Todd Tanner 2 | 3 | #include 4 | 5 | void main(void) 6 | { 7 | //vec4 uiColor = uiColor(vUV); 8 | vec4 ret = pseudoSBS(vUV); 9 | //ret.rgb = mix(ret.rgb, uiColor.rgb, uiColor.a); 10 | //ret.a = 1.0; 11 | gl_FragColor = ret; 12 | } 13 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using SpawnDev.BlazorJS.MultiView.Demo 10 | @using SpawnDev.BlazorJS.MultiView.Demo.Layout 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/App.razor: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Shaders/multiview.renderer.vs.glsl: -------------------------------------------------------------------------------- 1 | // https://stackoverflow.com/questions/24104939/rendering-a-fullscreen-quad-using-webgl/24112706#24112706 2 | precision mediump float; 3 | 4 | // xy = vertex position in normalized device coordinates ([-1,+1] range). 5 | attribute vec2 vertexPosition; 6 | 7 | varying vec2 vUV; 8 | 9 | const vec2 scale = vec2(0.5, 0.5); 10 | 11 | void main() 12 | { 13 | vUV = vertexPosition * scale + scale; // scale vertex attribute to [0,1] range 14 | gl_Position = vec4(vertexPosition.x, -vertexPosition.y, 0.0, 1.0); 15 | } -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/wwwroot/sample-data/weather.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "date": "2022-01-06", 4 | "temperatureC": 1, 5 | "summary": "Freezing" 6 | }, 7 | { 8 | "date": "2022-01-07", 9 | "temperatureC": 14, 10 | "summary": "Bracing" 11 | }, 12 | { 13 | "date": "2022-01-08", 14 | "temperatureC": -13, 15 | "summary": "Freezing" 16 | }, 17 | { 18 | "date": "2022-01-09", 19 | "temperatureC": -16, 20 | "summary": "Balmy" 21 | }, 22 | { 23 | "date": "2022-01-10", 24 | "temperatureC": -2, 25 | "summary": "Chilly" 26 | } 27 | ] 28 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Web; 2 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 3 | using SpawnDev.BlazorJS; 4 | using SpawnDev.BlazorJS.MultiView.Demo; 5 | using SpawnDev.BlazorJS.TransformersJS.DepthAnythingV2; 6 | 7 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 8 | builder.Services.AddBlazorJSRuntime(); 9 | 10 | builder.Services.AddDepthAnything(de => 11 | { 12 | //de.UseHuggingFaceCDN = true; // Use HuggingFace CDN for model files 13 | }); 14 | 15 | builder.RootComponents.Add("#app"); 16 | builder.RootComponents.Add("head::after"); 17 | 18 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 19 | 20 | await builder.Build().BlazorJSRunAsync(); 21 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/SpawnDev.BlazorJS.MultiView.Demo.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | false 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Pages/Home.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | Home 4 | 5 |

SpawnDev.BlazorJS.MultiView

6 | 7 |
8 |

Welcome to the SpawnDev.BlazorJS.MultiView demo application!

9 | 10 |

11 | Thanks to machine learning, depth estimation has improved in leaps and bounds in the past couple years. 12 | Because of this, we can now convert 2D content to 3D content incredibly fast and cheap compared to how it was done even a few years ago. 13 | This library's primary goal is to aid the conversion of 2D+Z content created by monocular depth estimation models, like Depth Anything V2, into various 3D formats. 14 |

15 | 16 |

This application demonstrates how to use the SpawnDev.BlazorJS.MultiView library to render 2D+Z in various 3D viewing formats.

17 |

Use the navigation menu to explore different views.

18 |
19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SpawnDev.BlazorJS.MultiView 2 | [![NuGet](https://img.shields.io/nuget/dt/SpawnDev.BlazorJS.MultiView.svg?label=SpawnDev.BlazorJS.MultiView)](https://www.nuget.org/packages/SpawnDev.BlazorJS.MultiView) 3 | Tools for rendering 2D, 2D+Z, Side by Side, Over Under, and other 2D/3D images, videos, or streams in output formats like Green Magenta, Red Cyan, Side by Side, Over Under, glasses-free lenticular, etc. in Blazor WebAssembly applications. 4 | 5 | Thanks to machine learning, depth estimation has improved in leaps and bounds in the past couple years. 6 | With the right tools, we can now easily convert 2D images and videos to 3D. 7 | This library's primary goal is to aid the conversion of 2D+Z content created by monocular depth estimation models, like Depth Anything V2, into various 3D formats. Support for other 3D input formats is also planned. 8 | 9 | Currently supports 2D+Z to Anaglyph 10 | 11 | - [Realtime WebCam 2D to 3D](https://lostbeard.github.io/SpawnDev.BlazorJS.MultiView/RealTime2Dto3D) 12 | - [Realtime Video 2D to 3D](https://lostbeard.github.io/SpawnDev.BlazorJS.MultiView/RealTimeVideo2Dto3D) 13 | 14 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SpawnDev.BlazorJS.MultiView.Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | An unhandled error has occurred. 26 | Reload 27 | 🗙 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Shared/ModelLoadView.razor: -------------------------------------------------------------------------------- 1 | @using SpawnDev.BlazorJS.TransformersJS 2 |
3 | @foreach (var progress in ModelProgresses.Values) 4 | { 5 |
6 | 7 |
8 | } 9 |
10 | @code { 11 | [Parameter] 12 | public Dictionary ModelProgresses { get; set; } = new(); 13 | 14 | bool DisplayIt => ModelProgresses.Any(o => o.Value.Progress > 0d && o.Value.Progress < 100d); 15 | 16 | public static string BytesToHumanReadable(long bytes) 17 | { 18 | string[] sizes = { "B", "KB", "MB", "GB", "TB", "PB", "EB" }; 19 | double len = bytes; 20 | int order = 0; 21 | while (len >= 1024 && order < sizes.Length - 1) 22 | { 23 | order++; 24 | len = len / 1024; 25 | } 26 | return $"{len:0.##} {sizes[order]}"; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Shared/ProgressBar.razor: -------------------------------------------------------------------------------- 1 | @code { 2 | [Parameter] 3 | public double Progress { get; set; } 4 | 5 | [Parameter] 6 | public double Max { get; set; } = 100; 7 | 8 | [Parameter] 9 | public string? Label { get; set; } 10 | 11 | private string ProgressBarWidth => $"{(Progress / Max) * 100}%"; 12 | } 13 | 14 |
15 |
16 |
@Progress.ToString("0.##")% @Label
17 |
18 | 19 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Render2DZ.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | using SpawnDev.BlazorJS.MultiView.Utils; 3 | 4 | namespace SpawnDev.BlazorJS.MultiView 5 | { 6 | /// 7 | /// 2D+Z renderer 8 | /// 9 | public class Render2DZ : MultiviewRenderer 10 | { 11 | public override string OutFormat => "2D+Z"; 12 | public Render2DZ() : base() 13 | { 14 | Init(); 15 | } 16 | public Render2DZ(HTMLCanvasElement canvas) : base(canvas) 17 | { 18 | Init(); 19 | } 20 | void Init() 21 | { 22 | var vertexShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.vs.glsl"); 23 | if (string.IsNullOrEmpty(vertexShader)) 24 | { 25 | throw new Exception("Vertex shader not found"); 26 | } 27 | var fragmentShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.2dz.fs.glsl"); 28 | if (string.IsNullOrEmpty(fragmentShader)) 29 | { 30 | throw new Exception("Fragment shader not found"); 31 | } 32 | program = CreateProgram(vertexShader, fragmentShader); 33 | } 34 | public override void ApplyEffect() 35 | { 36 | 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Render2D.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | using SpawnDev.BlazorJS.MultiView.Utils; 3 | 4 | namespace SpawnDev.BlazorJS.MultiView 5 | { 6 | /// 7 | /// 2D renderer 8 | /// 9 | public class Render2D : MultiviewRenderer 10 | { 11 | public override string OutFormat => "2D"; 12 | public override bool RequiresDepth => false; 13 | public Render2D() : base() 14 | { 15 | Init(); 16 | } 17 | public Render2D(HTMLCanvasElement canvas) : base(canvas) 18 | { 19 | Init(); 20 | } 21 | void Init() 22 | { 23 | var vertexShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.vs.glsl"); 24 | if (string.IsNullOrEmpty(vertexShader)) 25 | { 26 | throw new Exception("Vertex shader not found"); 27 | } 28 | var fragmentShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.2d.fs.glsl"); 29 | if (string.IsNullOrEmpty(fragmentShader)) 30 | { 31 | throw new Exception("Fragment shader not found"); 32 | } 33 | program = CreateProgram(vertexShader, fragmentShader); 34 | } 35 | public override void ApplyEffect() 36 | { 37 | 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/RenderSideBySide.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | using SpawnDev.BlazorJS.MultiView.Utils; 3 | 4 | namespace SpawnDev.BlazorJS.MultiView 5 | { 6 | /// 7 | /// Stereo side-by-side renderer 8 | /// 9 | public class RenderSideBySide : MultiviewRenderer 10 | { 11 | public override string OutFormat => "Side-by-Side"; 12 | public RenderSideBySide() : base() 13 | { 14 | Init(); 15 | } 16 | public RenderSideBySide(HTMLCanvasElement canvas) : base(canvas) 17 | { 18 | Init(); 19 | } 20 | public bool ReverseViewOrder 21 | { 22 | get => views_index_invert; 23 | set => views_index_invert = value; 24 | } 25 | void Init() 26 | { 27 | var vertexShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.vs.glsl"); 28 | if (string.IsNullOrEmpty(vertexShader)) 29 | { 30 | throw new Exception("Vertex shader not found"); 31 | } 32 | var fragmentShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.side-by-side.fs.glsl"); 33 | if (string.IsNullOrEmpty(fragmentShader)) 34 | { 35 | throw new Exception("Fragment shader not found"); 36 | } 37 | program = CreateProgram(vertexShader, fragmentShader); 38 | } 39 | public override void ApplyEffect() 40 | { 41 | 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/launchsettings.json", 3 | "iisSettings": { 4 | "windowsAuthentication": false, 5 | "anonymousAuthentication": true, 6 | "iisExpress": { 7 | "applicationUrl": "http://localhost:6967", 8 | "sslPort": 44325 9 | } 10 | }, 11 | "profiles": { 12 | "http": { 13 | "commandName": "Project", 14 | "dotnetRunMessages": true, 15 | "launchBrowser": true, 16 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 17 | "applicationUrl": "http://localhost:5013", 18 | "environmentVariables": { 19 | "ASPNETCORE_ENVIRONMENT": "Development" 20 | } 21 | }, 22 | "https": { 23 | "commandName": "Project", 24 | "dotnetRunMessages": true, 25 | "launchBrowser": true, 26 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 27 | "applicationUrl": "https://localhost:7010;http://localhost:5013", 28 | "environmentVariables": { 29 | "ASPNETCORE_ENVIRONMENT": "Development" 30 | } 31 | }, 32 | "IIS Express": { 33 | "commandName": "IISExpress", 34 | "launchBrowser": true, 35 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 36 | "environmentVariables": { 37 | "ASPNETCORE_ENVIRONMENT": "Development" 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Layout/NavMenu.razor: -------------------------------------------------------------------------------- 1 |
2 |
3 | Blazor MultiView 4 | 7 |
8 |
9 | 10 |
11 | 28 |
29 | 30 | @code { 31 | private bool collapseNavMenu = true; 32 | 33 | private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; 34 | 35 | private void ToggleNavMenu() 36 | { 37 | collapseNavMenu = !collapseNavMenu; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Layout/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | 15 | .top-row { 16 | background-color: #f7f7f7; 17 | border-bottom: 1px solid #d6d5d5; 18 | justify-content: flex-end; 19 | height: 3.5rem; 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .top-row ::deep a, .top-row ::deep .btn-link { 25 | white-space: nowrap; 26 | margin-left: 1.5rem; 27 | text-decoration: none; 28 | } 29 | 30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { 31 | text-decoration: underline; 32 | } 33 | 34 | .top-row ::deep a:first-child { 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | } 38 | 39 | @media (max-width: 640.98px) { 40 | .top-row { 41 | justify-content: space-between; 42 | } 43 | 44 | .top-row ::deep a, .top-row ::deep .btn-link { 45 | margin-left: 0; 46 | } 47 | } 48 | 49 | @media (min-width: 641px) { 50 | .page { 51 | flex-direction: row; 52 | } 53 | 54 | .sidebar { 55 | width: 250px; 56 | height: 100vh; 57 | position: sticky; 58 | top: 0; 59 | } 60 | 61 | .top-row { 62 | position: sticky; 63 | top: 0; 64 | z-index: 1; 65 | } 66 | 67 | .top-row.auth ::deep a:first-child { 68 | flex: 1; 69 | text-align: right; 70 | width: 0; 71 | } 72 | 73 | .top-row, article { 74 | padding-left: 2rem !important; 75 | padding-right: 1.5rem !important; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.14.36127.28 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SpawnDev.BlazorJS.MultiView", "SpawnDev.BlazorJS.MultiView\SpawnDev.BlazorJS.MultiView.csproj", "{BE79F027-BF22-43C8-9A06-B010EE450A63}" 7 | EndProject 8 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SpawnDev.BlazorJS.MultiView.Demo", "SpawnDev.BlazorJS.MultiView.Demo\SpawnDev.BlazorJS.MultiView.Demo.csproj", "{6DB76915-871D-44A0-8295-4204E538E292}" 9 | EndProject 10 | Global 11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 12 | Debug|Any CPU = Debug|Any CPU 13 | Release|Any CPU = Release|Any CPU 14 | EndGlobalSection 15 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 16 | {BE79F027-BF22-43C8-9A06-B010EE450A63}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 17 | {BE79F027-BF22-43C8-9A06-B010EE450A63}.Debug|Any CPU.Build.0 = Debug|Any CPU 18 | {BE79F027-BF22-43C8-9A06-B010EE450A63}.Release|Any CPU.ActiveCfg = Release|Any CPU 19 | {BE79F027-BF22-43C8-9A06-B010EE450A63}.Release|Any CPU.Build.0 = Release|Any CPU 20 | {6DB76915-871D-44A0-8295-4204E538E292}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 21 | {6DB76915-871D-44A0-8295-4204E538E292}.Debug|Any CPU.Build.0 = Debug|Any CPU 22 | {6DB76915-871D-44A0-8295-4204E538E292}.Release|Any CPU.ActiveCfg = Release|Any CPU 23 | {6DB76915-871D-44A0-8295-4204E538E292}.Release|Any CPU.Build.0 = Release|Any CPU 24 | EndGlobalSection 25 | GlobalSection(SolutionProperties) = preSolution 26 | HideSolutionNode = FALSE 27 | EndGlobalSection 28 | GlobalSection(ExtensibilityGlobals) = postSolution 29 | SolutionGuid = {F8457546-7450-4C54-80D8-90E8A6D45459} 30 | EndGlobalSection 31 | EndGlobal 32 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | # Run workflow on every push to the master branch 4 | on: workflow_dispatch 5 | 6 | jobs: 7 | deploy-to-github-pages: 8 | permissions: 9 | contents: write 10 | # use ubuntu-latest image to run steps on 11 | runs-on: ubuntu-latest 12 | steps: 13 | # uses GitHub's checkout action to checkout code form the master branch 14 | - uses: actions/checkout@v2 15 | 16 | # sets up .NET Core SDK 17 | - name: Setup .NET Core SDK 18 | uses: actions/setup-dotnet@v3.0.3 19 | with: 20 | dotnet-version: '9' 21 | 22 | # Install dotnet wasm buildtools workload 23 | - name: Install .NET WASM Build Tools 24 | run: dotnet workload install wasm-tools wasm-tools-net8 25 | 26 | # publishes Blazor project to the publish-folder 27 | - name: Publish .NET Core Project 28 | run: dotnet publish ./SpawnDev.BlazorJS.MultiView.Demo/ --nologo -c:Release --output publish 29 | 30 | # changes the base-tag in index.html from '/' to '/SpawnDev.BlazorJS.MultiView/' to match GitHub Pages repository subdirectory 31 | - name: Change base-tag in index.html from / to /SpawnDev.BlazorJS.MultiView/ 32 | run: sed -i 's/ 4 | 5 | uniform float agdata[21]; 6 | 7 | vec4 anaglyphMix(vec4 l, vec4 r){ 8 | // 9 | float brightness = agdata[0]; 10 | float contrast = agdata[1]; 11 | float gamma = agdata[2]; 12 | // red channel 13 | float rlr = agdata[3]; 14 | float rlg = agdata[4]; 15 | float rlb = agdata[5]; 16 | float rrr = agdata[6]; 17 | float rrg = agdata[7]; 18 | float rrb = agdata[8]; 19 | // green channel 20 | float glr = agdata[9]; 21 | float glg = agdata[10]; 22 | float glb = agdata[11]; 23 | float grr = agdata[12]; 24 | float grg = agdata[13]; 25 | float grb = agdata[14]; 26 | // blue channel 27 | float blr = agdata[15]; 28 | float blg = agdata[16]; 29 | float blb = agdata[17]; 30 | float brr = agdata[18]; 31 | float brg = agdata[19]; 32 | float brb = agdata[20]; 33 | // gamma correction 34 | if (gamma > 0.1) 35 | { 36 | //r.rgb = pow(r.rgb, 1.0 / gamma); 37 | l.r = pow(l.r, 1.0 / gamma); 38 | l.g = pow(l.g, 1.0 / gamma); 39 | l.b = pow(l.b, 1.0 / gamma); 40 | r.r = pow(r.r, 1.0 / gamma); 41 | r.g = pow(r.g, 1.0 / gamma); 42 | r.b = pow(r.b, 1.0 / gamma); 43 | } 44 | // 45 | float red = l.r * rlr + l.g * rlg + l.b * rlb + r.r * rrr + r.g * rrg + r.b * rrb; 46 | float green = l.r * glr + l.g * glg + l.b * glb + r.r * grr + r.g * grg + r.b * grb; 47 | float blue = l.r * blr + l.g * blg + l.b * blb + r.r * brr + r.g * brg + r.b * brb; 48 | vec4 o = vec4(red, green, blue, 1.0); 49 | o.rgb = (o.rgb - 0.5) * (contrast + 1.0) + 0.5; 50 | o.rgb = o.rgb + brightness; 51 | // gamma correction 52 | if (gamma > 0.1) 53 | { 54 | o.r = pow(o.r, gamma); 55 | o.g = pow(o.g, gamma); 56 | o.b = pow(o.b, gamma); 57 | } 58 | return o; 59 | } 60 | 61 | void main(void) 62 | { 63 | vec4 uiColor = uiColor(vUV); 64 | vec4 l = viewColor(0.0, vUV); 65 | vec4 r = viewColor(1.0, vUV); 66 | vec4 ret = anaglyphMix(l, r); 67 | //ret.rgb = mix(ret.rgb, uiColor.rgb, uiColor.a); 68 | ret.a = 1.0; 69 | gl_FragColor = ret; 70 | //gl_FragColor = vec4(1.0,0.0,0.0,1.0);// texture2D(videoSampler, vUV); 71 | } 72 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/SpawnDev.BlazorJS.MultiView.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0;net9.0;net10.0 5 | enable 6 | enable 7 | 2.1.0 8 | True 9 | true 10 | true 11 | Embedded 12 | SpawnDev.BlazorJS.MultiView 13 | LostBeard 14 | Tools for rendering 2D+Z (primary focus), Side by Side, Over Under, and other 2D/3D images, videos, or streams in 2D/3D output formats like Green Magenta, Red Cyan, Side by Side, Over Under, multi-view glasses-free lenticular, and more in Blazor WebAssembly applications. 15 | https://github.com/LostBeard/SpawnDev.BlazorJS.MultiView 16 | README.md 17 | LICENSE.txt 18 | icon-128.png 19 | https://github.com/LostBeard/SpawnDev.BlazorJS.MultiView.git 20 | git 21 | Blazor;BlazorWebAssembly;Javascript;3D;Anaglyph;Multiview;2DZ 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Utils/EmbeddedShaderLoader.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | using System.Reflection; 3 | using System.Text.RegularExpressions; 4 | 5 | namespace SpawnDev.BlazorJS.MultiView.Utils 6 | { 7 | public static class EmbeddedShaderLoader 8 | { 9 | static Regex IncludeRegex = new Regex(@"#include<(.+?)>", RegexOptions.Multiline | RegexOptions.Compiled); 10 | 11 | public static string? GetShaderString(string resourceName, bool useIncludes = true, Assembly? assembly = null) 12 | { 13 | try 14 | { 15 | assembly ??= Assembly.GetCallingAssembly(); 16 | var resourceNames = assembly.GetManifestResourceNames(); 17 | var resourceMatch = resourceNames.FirstOrDefault(name => name.EndsWith("." + resourceName)); 18 | if (resourceMatch == null) 19 | { 20 | return null; 21 | } 22 | using var stream = assembly.GetManifestResourceStream(resourceMatch)!; 23 | using var reader = new StreamReader(stream); 24 | var ret = reader.ReadToEnd(); 25 | if (useIncludes) 26 | { 27 | // #include 28 | var matches = IncludeRegex.Matches(ret); 29 | foreach (Match match in matches) 30 | { 31 | var includeName = match.Groups[1].Value; 32 | var includeShader = GetShaderString(includeName, true, assembly); 33 | if (includeShader != null) 34 | { 35 | ret = ret.Replace(match.Value, includeShader); 36 | } 37 | } 38 | } 39 | return ret; 40 | } 41 | catch 42 | { 43 | return null; 44 | } 45 | } 46 | public static WebGLShader? CreateShader(WebGLRenderingContext gl, string resourceName, int shaderType, bool useIncludes = true, Assembly? assembly = null) 47 | { 48 | var shaderSource = GetShaderString(resourceName, useIncludes, assembly); 49 | if (shaderSource == null) 50 | { 51 | return null; 52 | } 53 | var shader = gl.CreateShader(shaderType); 54 | gl.ShaderSource(shader, shaderSource); 55 | gl.CompileShader(shader); 56 | var compiled = gl.GetShaderParameter(shader, gl.COMPILE_STATUS); 57 | if (!compiled) 58 | { 59 | var lastError = gl.GetShaderInfoLog(shader); 60 | Console.WriteLine("Error compiling shader '" + shader + "':" + lastError); 61 | gl.DeleteShader(shader); 62 | return null; 63 | } 64 | return shader; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Layout/NavMenu.razor.css: -------------------------------------------------------------------------------- 1 | .navbar-toggler { 2 | background-color: rgba(255, 255, 255, 0.1); 3 | } 4 | 5 | .top-row { 6 | height: 3.5rem; 7 | background-color: rgba(0,0,0,0.4); 8 | } 9 | 10 | .navbar-brand { 11 | font-size: 1.1rem; 12 | } 13 | 14 | .bi { 15 | display: inline-block; 16 | position: relative; 17 | width: 1.25rem; 18 | height: 1.25rem; 19 | margin-right: 0.75rem; 20 | top: -1px; 21 | background-size: cover; 22 | } 23 | 24 | .bi-house-door-fill-nav-menu { 25 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); 26 | } 27 | 28 | .bi-plus-square-fill-nav-menu { 29 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); 30 | } 31 | 32 | .bi-list-nested-nav-menu { 33 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); 34 | } 35 | 36 | .nav-item { 37 | font-size: 0.9rem; 38 | padding-bottom: 0.5rem; 39 | } 40 | 41 | .nav-item:first-of-type { 42 | padding-top: 1rem; 43 | } 44 | 45 | .nav-item:last-of-type { 46 | padding-bottom: 1rem; 47 | } 48 | 49 | .nav-item ::deep a { 50 | color: #d7d7d7; 51 | border-radius: 4px; 52 | height: 3rem; 53 | display: flex; 54 | align-items: center; 55 | line-height: 3rem; 56 | } 57 | 58 | .nav-item ::deep a.active { 59 | background-color: rgba(255,255,255,0.37); 60 | color: white; 61 | } 62 | 63 | .nav-item ::deep a:hover { 64 | background-color: rgba(255,255,255,0.1); 65 | color: white; 66 | } 67 | 68 | @media (min-width: 641px) { 69 | .navbar-toggler { 70 | display: none; 71 | } 72 | 73 | .collapse { 74 | /* Never collapse the sidebar for wide screens */ 75 | display: block; 76 | } 77 | 78 | .nav-scrollable { 79 | /* Allow sidebar to scroll for tall menus */ 80 | height: calc(100vh - 3.5rem); 81 | overflow-y: auto; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | } 4 | 5 | h1:focus { 6 | outline: none; 7 | } 8 | 9 | a, .btn-link { 10 | color: #0071c1; 11 | } 12 | 13 | .btn-primary { 14 | color: #fff; 15 | background-color: #1b6ec2; 16 | border-color: #1861ac; 17 | } 18 | 19 | .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { 20 | box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; 21 | } 22 | 23 | .content { 24 | padding-top: 1.1rem; 25 | } 26 | 27 | .valid.modified:not([type=checkbox]) { 28 | outline: 1px solid #26b050; 29 | } 30 | 31 | .invalid { 32 | outline: 1px solid red; 33 | } 34 | 35 | .validation-message { 36 | color: red; 37 | } 38 | 39 | #blazor-error-ui { 40 | background: lightyellow; 41 | bottom: 0; 42 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 43 | display: none; 44 | left: 0; 45 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 46 | position: fixed; 47 | width: 100%; 48 | z-index: 1000; 49 | } 50 | 51 | #blazor-error-ui .dismiss { 52 | cursor: pointer; 53 | position: absolute; 54 | right: 0.75rem; 55 | top: 0.5rem; 56 | } 57 | 58 | .blazor-error-boundary { 59 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 60 | padding: 1rem 1rem 1rem 3.7rem; 61 | color: white; 62 | } 63 | 64 | .blazor-error-boundary::after { 65 | content: "An error has occurred." 66 | } 67 | 68 | .loading-progress { 69 | position: relative; 70 | display: block; 71 | width: 8rem; 72 | height: 8rem; 73 | margin: 20vh auto 1rem auto; 74 | } 75 | 76 | .loading-progress circle { 77 | fill: none; 78 | stroke: #e0e0e0; 79 | stroke-width: 0.6rem; 80 | transform-origin: 50% 50%; 81 | transform: rotate(-90deg); 82 | } 83 | 84 | .loading-progress circle:last-child { 85 | stroke: #1b6ec2; 86 | stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; 87 | transition: stroke-dasharray 0.05s ease-in-out; 88 | } 89 | 90 | .loading-progress-text { 91 | position: absolute; 92 | text-align: center; 93 | font-weight: bold; 94 | inset: calc(20vh + 3.25rem) 0 auto 0.2rem; 95 | } 96 | 97 | .loading-progress-text:after { 98 | content: var(--blazor-load-percentage-text, "Loading"); 99 | } 100 | 101 | code { 102 | color: #c02d76; 103 | } 104 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Shaders/multiview.renderer.base.fs.glsl: -------------------------------------------------------------------------------- 1 | // 2D+Z multi-view by Todd Tanner (LostBeard) 2 | // Improvements welcomed 3 | // This is a prtial fragment shader that can be included to allow easy access to psuedo-views 4 | // from various angles that will be generated using the depth and rgb data 5 | 6 | precision highp float; 7 | 8 | // uniforms required for PostProcess 9 | varying vec2 vUV; 10 | // overlay texture 11 | uniform sampler2D textureSampler; 12 | // custom uniforms 13 | // frame image 14 | uniform sampler2D videoSampler; 15 | // frame depthmap 16 | // expected to be 1 byte per pixel representing the rgb pixel's depth in videoSampler with the same xy position 17 | // the depth value will be in the alpha channel 18 | uniform sampler2D depthSampler; 19 | uniform bool views_index_invert_x; // false 0x is left, true 0x is right 20 | uniform float rC0[4]; 21 | uniform int rI0[1]; 22 | 23 | const vec4 colorBlack = vec4(0.0, 0.0, 0.0, 1.0); 24 | 25 | float getDepth(vec2 uv){ 26 | return texture2D(depthSampler, uv).a; 27 | } 28 | 29 | vec4 viewColor2DZ(float view_index, vec2 view_uv) { 30 | vec4 o = vec4(0.0, 0.0, 0.0, 0.5); 31 | if (views_index_invert_x) { 32 | view_index *= -1.0; 33 | } 34 | float sep_max_x = rC0[0] * abs(view_index); 35 | float pixel_width = rC0[1]; 36 | float pixel_width_half = rC0[2]; 37 | float offset_f = rC0[3]; 38 | if (view_index == 0.0 || sep_max_x < pixel_width) { 39 | o = texture2D(videoSampler, view_uv); 40 | } 41 | else { 42 | //vec4 d = viewColorTiled(1.0, vUV); 43 | // compute r using l and d 44 | float pDepth; 45 | vec2 uv = view_uv; 46 | vec2 uvNext = view_uv; 47 | float cur_depth = -2.0; 48 | float dest_x = 0.0; 49 | float diff_x = 0.0; 50 | float cur_coord_x = 0.0; 51 | float lowestDepthDiff = 1.0; 52 | float lowestDepth = 1.0; 53 | float lowestDepthX = 0.0; 54 | float shiftMode = view_index > 0.0 ? -1.0 : 1.0; // ++-+ 55 | float pixel_width_signed = pixel_width * shiftMode; 56 | float sep_max_x_signed = sep_max_x * shiftMode; 57 | float offset_f_signed = offset_f * sep_max_x_signed; 58 | float start_x = uv.x - sep_max_x_signed + offset_f_signed; 59 | start_x = start_x - mod(start_x, pixel_width); 60 | //uvNext.x = start_x; 61 | //uvNext.x = uv.x - sep_max_x; // + (pixel_width * 2.0); 62 | //uvNext.x += pixel_width * shiftMode * 2.0; 63 | for (int n = 0; n < 100; n++) 64 | { 65 | if (n >= rI0[0]) break; 66 | uvNext.x = start_x + (pixel_width_signed * float(n)); 67 | pDepth = getDepth(uvNext.xy); 68 | //pDepth = clamp(pDepth, 0.0, 1.0); 69 | dest_x = uvNext.x + (pDepth * sep_max_x_signed) - offset_f_signed; 70 | diff_x = abs(uv.x - dest_x); 71 | if (diff_x <= pixel_width && cur_depth <= pDepth) 72 | { 73 | cur_depth = pDepth; 74 | cur_coord_x = uvNext.x; 75 | o.a = 1.0; 76 | } 77 | if (pDepth <= lowestDepth && diff_x <= lowestDepthDiff + pixel_width) { 78 | lowestDepthDiff = diff_x; 79 | lowestDepth = pDepth; 80 | lowestDepthX = uvNext.x; 81 | } 82 | //uvNext.x += pixel_width; // 83 | //uvNext.x = (uv.x - sep_max_x) + (pixel_width * n); 84 | //if (uvNext.x >= uv.x + sep_max_x) test += 1.0; 85 | } 86 | if (o.a == 1.0) { 87 | //o = texture2D(mapToShift, vec2(cur_coord_x - (pixel_width * shiftMode), uvNext.y)); 88 | o = texture2D(videoSampler, vec2(cur_coord_x, uvNext.y)); 89 | //frag_out.c1.r = cur_depth; 90 | } 91 | else 92 | { 93 | // fill 94 | o = texture2D(videoSampler, vec2(lowestDepthX, uvNext.y)); 95 | //frag_out.c1.r = lowestDepth; // vec4(lowestDepth, lowestDepth, lowestDepth, 1.0); 96 | } 97 | } 98 | return o; 99 | } 100 | 101 | vec4 viewColor(float view_index, vec2 view_uv) { 102 | return viewColor2DZ(view_index, view_uv); 103 | } 104 | 105 | vec4 pseudoSBS(vec2 view_uv) { 106 | if (view_uv.x > 0.5) { 107 | return viewColor2DZ(1.0, vec2((view_uv.x - 0.5) * 2.0, view_uv.y)); 108 | } 109 | else 110 | { 111 | return viewColor2DZ(0.0, vec2(view_uv.x * 2.0, view_uv.y)); 112 | } 113 | } 114 | 115 | vec4 pseudo2DZ(vec2 view_uv) { 116 | if (view_uv.x > 0.5) { 117 | float z = getDepth(vec2((view_uv.x - 0.5) * 2.0, view_uv.y)); 118 | return vec4(z, z, z, 1.0); 119 | } 120 | else 121 | { 122 | return viewColor2DZ(0.0, vec2(view_uv.x * 2.0, view_uv.y)); 123 | } 124 | } 125 | 126 | vec4 uiColor(vec2 uv) { 127 | return texture2D(textureSampler, uv); 128 | } 129 | 130 | 131 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/Utils/WebGLUtilities.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | using System.Reflection; 3 | 4 | namespace SpawnDev.BlazorJS.MultiView.Utils 5 | { 6 | public class WebGLUtilities 7 | { 8 | public static void SetRectangle(WebGLRenderingContext gl, float x, float y, float width, float height) 9 | { 10 | var x1 = x; 11 | var x2 = x + width; 12 | var y1 = y; 13 | var y2 = y + height; 14 | using var bufferData = new Float32Array([x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2]); 15 | gl.BufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW); 16 | } 17 | public static WebGLProgram? CreateProgramFromScripts(WebGLRenderingContext gl, string[] shaderScriptIds, string[]? optAttribs = null, int?[]? optLocations = null) 18 | { 19 | var shaders = new List(); 20 | for (var i = 0; i < shaderScriptIds.Length; i++) 21 | { 22 | var shaderName = shaderScriptIds[i]; 23 | var shaderType = shaderName.Contains("vertex") ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER; 24 | var shader = CreateShaderFromScript(gl, shaderName, shaderType); 25 | if (shader == null) 26 | { 27 | throw new Exception($"Failed to compile shader: {shaderName}"); 28 | } 29 | shaders.Add(shader); 30 | } 31 | return CreateProgram(gl, shaders, optAttribs, optLocations); 32 | } 33 | static WebGLProgram? CreateProgram(WebGLRenderingContext gl, List shaders, string[]? optAttribs, int?[]? optLocations) 34 | { 35 | var program = gl.CreateProgram(); 36 | foreach (var shader in shaders) 37 | { 38 | gl.AttachShader(program, shader); 39 | } 40 | if (optAttribs != null) 41 | { 42 | for (var i = 0; i < optAttribs.Length; i++) 43 | { 44 | gl.BindAttribLocation(program, (uint)(optLocations?[i] ?? i), optAttribs[i]); 45 | } 46 | } 47 | gl.LinkProgram(program); 48 | var linked = gl.GetProgramParameter(program, gl.LINK_STATUS); 49 | if (!linked) 50 | { 51 | var lastError = gl.GetProgramInfoLog(program); 52 | Console.WriteLine("Error in program linking:" + lastError); 53 | gl.DeleteProgram(program); 54 | return null; 55 | } 56 | return program; 57 | } 58 | public static string? ReadEmbeddedResource(string resourceName, Assembly? assembly = null) 59 | { 60 | try 61 | { 62 | assembly ??= Assembly.GetCallingAssembly(); 63 | using var stream = assembly.GetManifestResourceStream(resourceName)!; 64 | using var reader = new StreamReader(stream); 65 | return reader.ReadToEnd(); 66 | } 67 | catch 68 | { 69 | return null; 70 | } 71 | } 72 | static WebGLShader? CreateShaderFromScript(WebGLRenderingContext gl, string scriptId, int shaderType) 73 | { 74 | var shaderSource = ReadEmbeddedResource($"SpawnDev.BlazorJS.TransformersJS.Demo.Shaders.{scriptId}.glsl"); 75 | if (shaderSource == null) 76 | { 77 | return null; 78 | } 79 | var shader = gl.CreateShader(shaderType); 80 | gl.ShaderSource(shader, shaderSource); 81 | gl.CompileShader(shader); 82 | var compiled = gl.GetShaderParameter(shader, gl.COMPILE_STATUS); 83 | if (!compiled) 84 | { 85 | var lastError = gl.GetShaderInfoLog(shader); 86 | Console.WriteLine("Error compiling shader '" + shader + "':" + lastError); 87 | gl.DeleteShader(shader); 88 | return null; 89 | } 90 | return shader; 91 | } 92 | public static void ResizeCanvasToDisplaySize(HTMLCanvasElement canvas) 93 | { 94 | var width = canvas.ClientWidth; 95 | var height = canvas.ClientHeight; 96 | if (canvas.Width != width || canvas.Height != height) 97 | { 98 | canvas.Width = (int)width; 99 | canvas.Height = (int)height; 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/RenderAnaglyph.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | using SpawnDev.BlazorJS.MultiView.Utils; 3 | 4 | namespace SpawnDev.BlazorJS.MultiView 5 | { 6 | /// 7 | /// Anaglyph renderer 8 | /// 9 | public class RenderAnaglyph : MultiviewRenderer 10 | { 11 | /// 12 | /// Represents a profile for an anaglyph effect, including its name and associated data. 13 | /// 14 | /// An anaglyph profile typically contains a name identifying the profile and a set of 15 | /// data values that define the parameters for the anaglyph effect. The property holds the 16 | /// numerical values used to configure the effect. 17 | public class AnaglyphProfile 18 | { 19 | public string Name { get; set; } 20 | public float[] Data { get; set; } 21 | } 22 | int _ProfileIndex = 0; 23 | public int ProfileIndex 24 | { 25 | get => _ProfileIndex; 26 | set 27 | { 28 | if (value >= 0 && value < AnaglyphProfiles.Count) 29 | { 30 | _ProfileIndex = value; 31 | } 32 | } 33 | } 34 | public AnaglyphProfile ActiveProfile 35 | { 36 | get => AnaglyphProfiles[ProfileIndex]; 37 | } 38 | public override string OutFormat => ActiveProfile.Name; 39 | 40 | // https://github.com/dolphin-emu/dolphin/blob/master/Data/Sys/Shaders/Anaglyph/dubois.glsl 41 | List AnaglyphProfiles = new List() 42 | { 43 | //// all 44 | // float brightness = agdata[0]; 45 | // float contrast = agdata[1]; 46 | // float gamma = agdata[2]; 47 | //// red channel 48 | // float rlr = agdata[3]; 49 | // float rlg = agdata[4]; 50 | // float rlb = agdata[5]; 51 | // float rrr = agdata[6]; 52 | // float rrg = agdata[7]; 53 | // float rrb = agdata[8]; 54 | //// green channel 55 | // float glr = agdata[9]; 56 | // float glg = agdata[10]; 57 | // float glb = agdata[11]; 58 | // float grr = agdata[12]; 59 | // float grg = agdata[13]; 60 | // float grb = agdata[14]; 61 | //// blue channel 62 | // float blr = agdata[15]; 63 | // float blg = agdata[16]; 64 | // float blb = agdata[17]; 65 | // float brr = agdata[18]; 66 | // float brg = agdata[19]; 67 | // float brb = agdata[20]; 68 | new AnaglyphProfile{ 69 | Name = "Red Cyan", 70 | Data = new float[]{ 71 | 0.0f, 72 | 0.0f, 73 | 0.0f, 74 | 0.456f, 75 | 0.500f, 76 | 0.176f, 77 | -0.043f, 78 | -0.088f, 79 | -0.002f, 80 | -0.040f, 81 | -0.038f, 82 | -0.016f, 83 | 0.378f, 84 | 0.734f, 85 | -0.018f, 86 | -0.015f, 87 | -0.021f, 88 | -0.005f, 89 | -0.072f, 90 | -0.113f, 91 | 1.226f 92 | } 93 | }, 94 | new AnaglyphProfile{ 95 | Name = "Green Magenta", 96 | Data = new float[]{ 97 | 0.0f, // brightness 98 | 0.0f, // contrast 99 | 0.0f, // gamma 100 | -0.062f, 101 | -0.158f, 102 | -0.039f, 103 | 0.529f, 104 | 0.705f, 105 | 0.024f, 106 | 0.284f, 107 | 0.668f, 108 | 0.143f, 109 | -0.016f, 110 | -0.015f, 111 | -0.065f, 112 | -0.015f, 113 | -0.027f, 114 | 0.021f, 115 | 0.009f, 116 | 0.075f, 117 | 0.937f 118 | } 119 | }, 120 | }; 121 | public RenderAnaglyph() : base() 122 | { 123 | Init(); 124 | } 125 | public RenderAnaglyph(HTMLCanvasElement canvas) : base(canvas) 126 | { 127 | Init(); 128 | } 129 | void Init() 130 | { 131 | var vertexShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.vs.glsl"); 132 | if (string.IsNullOrEmpty(vertexShader)) 133 | { 134 | throw new Exception("Vertex shader not found"); 135 | } 136 | var fragmentShader = EmbeddedShaderLoader.GetShaderString("multiview.renderer.anaglyph.fs.glsl"); 137 | if (string.IsNullOrEmpty(fragmentShader)) 138 | { 139 | throw new Exception("Fragment shader not found"); 140 | } 141 | program = CreateProgram(vertexShader, fragmentShader); 142 | } 143 | public override void ApplyEffect() 144 | { 145 | var profile = AnaglyphProfiles[ProfileIndex]; 146 | Uniform1fv("agdata", profile.Data); 147 | } 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Oo]ut/ 33 | [Ll]og/ 34 | [Ll]ogs/ 35 | 36 | # Visual Studio 2015/2017 cache/options directory 37 | .vs/ 38 | # Uncomment if you have tasks that create the project's static files in wwwroot 39 | #wwwroot/ 40 | 41 | # Visual Studio 2017 auto generated files 42 | Generated\ Files/ 43 | 44 | # MSTest test Results 45 | [Tt]est[Rr]esult*/ 46 | [Bb]uild[Ll]og.* 47 | 48 | # NUnit 49 | *.VisualState.xml 50 | TestResult.xml 51 | nunit-*.xml 52 | 53 | # Build Results of an ATL Project 54 | [Dd]ebugPS/ 55 | [Rr]eleasePS/ 56 | dlldata.c 57 | 58 | # Benchmark Results 59 | BenchmarkDotNet.Artifacts/ 60 | 61 | # .NET Core 62 | project.lock.json 63 | project.fragment.lock.json 64 | artifacts/ 65 | 66 | # ASP.NET Scaffolding 67 | ScaffoldingReadMe.txt 68 | 69 | # StyleCop 70 | StyleCopReport.xml 71 | 72 | # Files built by Visual Studio 73 | *_i.c 74 | *_p.c 75 | *_h.h 76 | *.ilk 77 | *.meta 78 | *.obj 79 | *.iobj 80 | *.pch 81 | *.pdb 82 | *.ipdb 83 | *.pgc 84 | *.pgd 85 | *.rsp 86 | *.sbr 87 | *.tlb 88 | *.tli 89 | *.tlh 90 | *.tmp 91 | *.tmp_proj 92 | *_wpftmp.csproj 93 | *.log 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio LightSwitch build output 298 | **/*.HTMLClient/GeneratedArtifacts 299 | **/*.DesktopClient/GeneratedArtifacts 300 | **/*.DesktopClient/ModelManifest.xml 301 | **/*.Server/GeneratedArtifacts 302 | **/*.Server/ModelManifest.xml 303 | _Pvt_Extensions 304 | 305 | # Paket dependency manager 306 | .paket/paket.exe 307 | paket-files/ 308 | 309 | # FAKE - F# Make 310 | .fake/ 311 | 312 | # CodeRush personal settings 313 | .cr/personal 314 | 315 | # Python Tools for Visual Studio (PTVS) 316 | __pycache__/ 317 | *.pyc 318 | 319 | # Cake - Uncomment if you are using it 320 | # tools/** 321 | # !tools/packages.config 322 | 323 | # Tabs Studio 324 | *.tss 325 | 326 | # Telerik's JustMock configuration file 327 | *.jmconfig 328 | 329 | # BizTalk build output 330 | *.btp.cs 331 | *.btm.cs 332 | *.odx.cs 333 | *.xsd.cs 334 | 335 | # OpenCover UI analysis results 336 | OpenCover/ 337 | 338 | # Azure Stream Analytics local run output 339 | ASALocalRun/ 340 | 341 | # MSBuild Binary and Structured Log 342 | *.binlog 343 | 344 | # NVidia Nsight GPU debugger configuration file 345 | *.nvuser 346 | 347 | # MFractors (Xamarin productivity tool) working folder 348 | .mfractor/ 349 | 350 | # Local History for Visual Studio 351 | .localhistory/ 352 | 353 | # BeatPulse healthcheck temp database 354 | healthchecksdb 355 | 356 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 357 | MigrationBackup/ 358 | 359 | # Ionide (cross platform F# VS Code tools) working folder 360 | .ionide/ 361 | 362 | # Fody - auto-generated XML schema 363 | FodyWeavers.xsd -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Pages/RealTimeWebCam2Dto3D.razor: -------------------------------------------------------------------------------- 1 | @page "/RealTime2Dto3D" 2 | @using System.Diagnostics 3 | @using SpawnDev.BlazorJS 4 | @using SpawnDev.BlazorJS.JSObjects 5 | @using SpawnDev.BlazorJS.MultiView 6 | @using SpawnDev.BlazorJS.MultiView.Demo.Shared 7 | @using SpawnDev.BlazorJS.TransformersJS 8 | @using SpawnDev.BlazorJS.TransformersJS.DepthAnythingV2 9 | @implements IDisposable 10 | 11 |
12 |

Realtime Webcam 2D to 3D

13 |
14 | In this demo, each webcam video frame is converted to 3D using SpawnDev.BlazorJS.TransformersJS and TransformStream. 15 |
16 |
17 | 18 |
19 |
20 |
21 | 22 | () 23 |
24 | 25 |
26 |
27 | 28 | () 29 |
30 | 31 |
32 |
33 | 34 | () 35 |
36 | 37 |
38 |
39 | 40 | 46 |
47 |
FPS: @(Math.Round(fps, 2))
48 |
Source Size: @($"{SourceWidth}x{SourceHeight}")
49 |
Depth Size: @($"{DepthWidth}x{DepthHeight}")
50 |
@startErrorMessage
51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 | @code { 62 | [Inject] 63 | BlazorJSRuntime JS { get; set; } = default!; 64 | 65 | [Inject] 66 | DepthAnythingService DepthAnythingService { get; set; } = default!; 67 | 68 | MediaStream? stream = null; 69 | TransformStreamCallbacks? transformerCallbacks = null; 70 | TransformStream? transformStream = null; 71 | Task? transformerTask = null; 72 | ElementReference videoRef; 73 | ElementReference scaleRef; 74 | HTMLInputElement? scaleEl; 75 | ElementReference focusRef; 76 | HTMLInputElement? focus3DEl; 77 | ElementReference level3DRef; 78 | HTMLInputElement? level3DEl; 79 | HTMLVideoElement? video; 80 | Window? window = null; 81 | string model = "onnx-community/depth-anything-v2-small"; 82 | bool UseWebGPU = true; 83 | DepthEstimationPipeline? pipeline = null; 84 | double scale = 0.5d; 85 | double fps = 0; 86 | Stopwatch sw = Stopwatch.StartNew(); 87 | bool stopButtonDisabled => transformStream == null || busy; 88 | bool startButtonDisabled => transformStream != null || !initComplete || busy; 89 | string? startErrorMessage = null; 90 | double frameCount = 0; 91 | MultiviewRenderer? activeRenderer => Renderers[RendererIndex]; 92 | float Focus3D = 0.5f; 93 | float Level3D = 1.0f; 94 | int AnaglyphProfile = 0; 95 | int RendererIndex = 0; 96 | bool initComplete = false; 97 | bool beenInit = false; 98 | bool busy = false; 99 | List Renderers = new List(); 100 | 101 | protected override async Task OnAfterRenderAsync(bool firstRender) 102 | { 103 | if (firstRender) 104 | { 105 | beenInit = true; 106 | // Init 107 | window = JS.Get("window"); 108 | video = new HTMLVideoElement(videoRef); 109 | // Anaglyph renderer initialization 110 | Renderers.Add(new RenderAnaglyph { ProfileIndex = 0 }); 111 | Renderers.Add(new RenderAnaglyph { ProfileIndex = 1 }); 112 | Renderers.Add(new RenderSideBySide()); 113 | Renderers.Add(new Render2DZ()); 114 | Renderers.Add(new Render2D()); 115 | // setup the sliders aRenderSideBySideents 116 | scaleEl = new HTMLInputElement(scaleRef); 117 | scaleEl.OnChange += Scale_OnChange; 118 | focus3DEl = new HTMLInputElement(focusRef); 119 | focus3DEl.OnChange += Focus_OnChange; 120 | level3DEl = new HTMLInputElement(level3DRef); 121 | level3DEl.OnChange += Level_OnChange; 122 | // depth estimation pipeline initialization 123 | DepthAnythingService.OnStateChange += DepthAnythingService_OnStateChange; 124 | // transform stream initialization 125 | transformerCallbacks = new TransformStreamCallbacks(transform: Transformer_Transform); 126 | initComplete = true; 127 | StateHasChanged(); 128 | } 129 | } 130 | void DepthAnythingService_OnStateChange() 131 | { 132 | StateHasChanged(); 133 | } 134 | void Scale_OnChange() 135 | { 136 | if (scaleEl == null) return; 137 | if (double.TryParse(scaleEl.Value, out var s)) 138 | { 139 | scale = s; 140 | StateHasChanged(); 141 | } 142 | } 143 | void Focus_OnChange() 144 | { 145 | if (focus3DEl == null) return; 146 | if (float.TryParse(focus3DEl.Value, out var s)) 147 | { 148 | Focus3D = s; 149 | StateHasChanged(); 150 | } 151 | } 152 | void Level_OnChange() 153 | { 154 | if (level3DEl == null) return; 155 | if (float.TryParse(level3DEl.Value, out var s)) 156 | { 157 | Level3D = s; 158 | StateHasChanged(); 159 | } 160 | } 161 | void Stop() 162 | { 163 | if (video != null) 164 | { 165 | try 166 | { 167 | if (!video.Paused) video.Pause(); 168 | video.SrcObject = null; 169 | } 170 | catch { } 171 | } 172 | if (stream != null) 173 | { 174 | stream.StopAllTracks(); 175 | stream.Dispose(); 176 | stream = null; 177 | } 178 | transformStream?.Dispose(); 179 | transformStream = null; 180 | } 181 | async Task Start() 182 | { 183 | if (video == null || transformerCallbacks == null) 184 | { 185 | return; 186 | } 187 | Stop(); 188 | var state = "Accessing camera"; 189 | try 190 | { 191 | busy = true; 192 | startErrorMessage = ""; 193 | StateHasChanged(); 194 | using var navigator = JS.Get("navigator"); 195 | stream = await navigator.MediaDevices.GetUserMedia(new { video = true }); 196 | if (stream != null) 197 | { 198 | using var inputTrack = stream.GetFirstVideoTrack(); 199 | if (pipeline == null) 200 | { 201 | state = "Initializing DepthAnything pipeline"; 202 | //var transformers = await Transformers.Init(); 203 | //pipeline = await transformers.DepthEstimationPipeline(model, new PipelineOptions { Device = UseWebGPU ? "webgpu" : null, OnProgress = OnProgress }); 204 | pipeline = await DepthAnythingService.GetDepthEstimationPipeline(); 205 | } 206 | state = "Creating TransformStream"; 207 | using var processor = new MediaStreamTrackProcessor(new MediaStreamTrackProcessorOptions { Track = inputTrack! }); 208 | using var generator = new MediaStreamTrackGenerator(new MediaStreamTrackGeneratorOptions { Kind = "video" }); 209 | 210 | transformStream = new TransformStream(transformerCallbacks); 211 | // Pipe the processor through the transformStream to the generator 212 | transformerTask = processor.Readable.PipeThrough(transformStream).PipeTo(generator.Writable); 213 | 214 | state = "Playing stream"; 215 | // Display the output stream in the video element 216 | video.SrcObject = new MediaStream([generator]); 217 | await video.Play(); 218 | } 219 | } 220 | catch (Exception ex) 221 | { 222 | startErrorMessage = $"{state} failed: {ex.Message}"; 223 | Stop(); 224 | } 225 | finally 226 | { 227 | busy = false; 228 | } 229 | } 230 | async Task Transformer_Transform(VideoFrame rgbFrame, TransformStreamDefaultController controller) 231 | { 232 | if (transformStream == null || pipeline == null || activeRenderer == null) 233 | { 234 | controller.Error("TransformStream not initialized."); 235 | rgbFrame.Close(); // Dispose the VideoFrame to free resources 236 | return; 237 | } 238 | try 239 | { 240 | var rgbWidth = rgbFrame.DisplayWidth; 241 | var rgbHeight = rgbFrame.DisplayHeight; 242 | 243 | // full size rgb frame canvas 244 | using var rgbCanvas = new OffscreenCanvas(rgbWidth, rgbHeight); 245 | using var rgbCtx = rgbCanvas.Get2DContext(); 246 | rgbCtx.DrawImage(rgbFrame, 0, 0, rgbWidth, rgbHeight); 247 | 248 | // Create an OffscreenCanvas to draw the scaled VideoFrame 249 | var depthWidth = (int)(rgbWidth * scale); 250 | var depthHeight = (int)(rgbHeight * scale); 251 | using var rgbCanvasScaled = new OffscreenCanvas(depthWidth, depthHeight); 252 | using var rgbCtxScaled = rgbCanvasScaled.Get2DContext(); 253 | rgbCtxScaled.DrawImage(rgbFrame, 0, 0, depthWidth, depthHeight); 254 | 255 | // Convert the OffscreenCanvas to a RawImage for processing 256 | using var rgbImageScaled = RawImage.FromCanvas(rgbCanvasScaled); 257 | 258 | // uncomment after next Transformer.js update 259 | // using var rgbImage = RawImage.FromCanvas(rgbCanvasScaled); 260 | 261 | // Run the depth estimation pipeline on the RGB image 262 | using var depthResult = await pipeline!.Call(rgbImageScaled); 263 | using var depth = depthResult.Depth; 264 | using var depthmapData = depth.Data; 265 | 266 | // Merge the 2D image and the depth result into a single canvas 267 | //using var rgbZCanvas = Merge2DWithDepthToCanvas2DZ(rgbFrame, depthResult); 268 | 269 | // use full size rgb and the generated depth 270 | activeRenderer.Level3D = Level3D; 271 | activeRenderer.Focus3D = Focus3D; 272 | activeRenderer.SetInput(rgbCanvas); 273 | activeRenderer.SetDepth(depth.Width, depth.Height, depthmapData); 274 | activeRenderer.Render(); 275 | 276 | // resize the canvas to match the renderer output (reusing the renderer's OffscreenCanvas) 277 | rgbCanvasScaled.Width = activeRenderer.OutWidth; 278 | rgbCanvasScaled.Height = activeRenderer.OutHeight; 279 | rgbCtxScaled.DrawImage(activeRenderer.OffscreenCanvas!); 280 | 281 | // Create a new VideoFrame with the processed bitmap 282 | using var rgbZFrame = new VideoFrame(rgbCanvasScaled, new VideoFrameOptions 283 | { 284 | Timestamp = rgbFrame.Timestamp, 285 | Duration = rgbFrame.Duration, 286 | }); 287 | 288 | // Enqueue the new frame into the output stream 289 | controller.Enqueue(rgbZFrame); 290 | 291 | } 292 | catch (Exception ex) 293 | { 294 | Console.WriteLine($"Error processing video frame: {ex.Message}"); 295 | } 296 | finally 297 | { 298 | rgbFrame.Close(); // Dispose the VideoFrame to free resources 299 | // update fps 300 | frameCount += 1; 301 | var elapsedSeconds = sw.Elapsed.TotalSeconds; 302 | if (elapsedSeconds >= 1d) 303 | { 304 | sw.Restart(); 305 | fps = frameCount / elapsedSeconds; 306 | frameCount = 0; 307 | StateHasChanged(); 308 | } 309 | } 310 | } 311 | int SourceWidth = 0; 312 | int SourceHeight = 0; 313 | int DepthWidth = 0; 314 | int DepthHeight = 0; 315 | OffscreenCanvas Merge2DWithDepthToCanvas2DZ(VideoFrame rgbFrame, DepthEstimationResult depthEstimationResult) 316 | { 317 | using var depthEstimation = depthEstimationResult.Depth; 318 | using var grayscale1BPPData = depthEstimation.Data; 319 | var depthWidth = depthEstimation.Width; 320 | var depthHeight = depthEstimation.Height; 321 | var width = rgbFrame.DisplayWidth; 322 | var height = rgbFrame.DisplayHeight; 323 | var outWidth = width * 2; 324 | var outHeight = height; 325 | SourceWidth = width; 326 | SourceHeight = height; 327 | DepthWidth = depthWidth; 328 | DepthHeight = depthHeight; 329 | var grayscaleDataBytes = grayscale1BPPData.ReadBytes(); 330 | // Convert the 1BPP grayscale data to RGBA format 331 | var depthmapRGBABytes = Grayscale1BPPToRGBA(grayscaleDataBytes, depthWidth, depthHeight); 332 | // Create an ImageData object from the depth bytes 333 | using var depthImageData = ImageData.FromBytes(depthmapRGBABytes, depthWidth, depthHeight); 334 | // Create an OffscreenCanvas for the depth map ImageData 335 | using var depthCanvas = new OffscreenCanvas(depthWidth, depthHeight); 336 | using var depthCtx = depthCanvas.Get2DContext(); 337 | // Draw the depth map ImageData onto the OffscreenCanvas 338 | depthCtx.PutImageData(depthImageData, 0, 0); 339 | // Create an OffscreenCanvas for the final output 340 | var canvas = new OffscreenCanvas(outWidth, outHeight); 341 | using var ctx = canvas.Get2DContext(); 342 | // draw rgb image 343 | ctx.DrawImage(rgbFrame, 0, 0, width, height); 344 | // draw depth map 345 | ctx.DrawImage(depthCanvas, width, 0, width, height); 346 | return canvas; 347 | } 348 | byte[] Grayscale1BPPToRGBA(byte[] grayscaleData, int width, int height) 349 | { 350 | var ret = new byte[width * height * 4]; 351 | for (var i = 0; i < grayscaleData.Length; i++) 352 | { 353 | var grayValue = grayscaleData[i]; 354 | ret[i * 4] = grayValue; // Red 355 | ret[i * 4 + 1] = grayValue; // Green 356 | ret[i * 4 + 2] = grayValue; // Blue 357 | ret[i * 4 + 3] = 255; // Alpha 358 | } 359 | return ret; 360 | } 361 | public void Dispose() 362 | { 363 | // Clean up resources if necessary 364 | Stop(); 365 | if (beenInit) 366 | { 367 | beenInit = false; 368 | DepthAnythingService.OnStateChange -= DepthAnythingService_OnStateChange; 369 | } 370 | if (scaleEl != null) 371 | { 372 | scaleEl.OnChange -= Scale_OnChange; 373 | scaleEl.Dispose(); 374 | scaleEl = null; 375 | } 376 | activeRenderer?.Dispose(); 377 | video?.Dispose(); 378 | window?.Dispose(); 379 | transformerCallbacks?.Dispose(); 380 | } 381 | } 382 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView.Demo/Pages/RealtimeVideo2Dto3D.razor: -------------------------------------------------------------------------------- 1 | @page "/RealTimeVideo2Dto3D" 2 | @using System.Diagnostics 3 | @using SpawnDev.BlazorJS 4 | @using SpawnDev.BlazorJS.JSObjects 5 | @using SpawnDev.BlazorJS.MultiView 6 | @using SpawnDev.BlazorJS.MultiView.Demo.Shared 7 | @using SpawnDev.BlazorJS.TransformersJS 8 | @using SpawnDev.BlazorJS.TransformersJS.DepthAnythingV2 9 | @implements IDisposable 10 | 11 |
12 |

Realtime Video 2D to 3D

13 |
14 | In this demo, each video frame is converted to 3D using SpawnDev.BlazorJS.TransformersJS and RequestVideoFrameCallback. 15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | () 29 |
30 | 31 |
32 |
33 | 34 | () 35 |
36 | 37 |
38 |
39 | 40 | () 41 |
42 | 43 |
44 |
45 | 46 | 52 |
53 |
FPS: @(Math.Round(fps, 2))
54 |
Source Size: @($"{SourceWidth}x{SourceHeight}")
55 |
Depth Size: @($"{DepthWidth}x{DepthHeight}")
56 |
@camErrorMessage
57 |
58 |
59 | 60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 | @code { 68 | [Inject] 69 | BlazorJSRuntime JS { get; set; } = default!; 70 | 71 | [Inject] 72 | DepthAnythingService DepthAnythingService { get; set; } = default!; 73 | 74 | ElementReference outputCanvasRef; 75 | HTMLCanvasElement? outputCanvas; 76 | 77 | ElementReference fileInputRef; 78 | HTMLInputElement? fileInput; 79 | File? sourceFile = null; 80 | 81 | ElementReference videoRef; 82 | ElementReference scaleRef; 83 | HTMLInputElement? scaleEl; 84 | ElementReference focusRef; 85 | HTMLInputElement? focus3DEl; 86 | ElementReference level3DRef; 87 | HTMLInputElement? level3DEl; 88 | HTMLVideoElement? video; 89 | Window? window = null; 90 | string model = "onnx-community/depth-anything-v2-small"; 91 | bool UseWebGPU = true; 92 | DepthEstimationPipeline? pipeline = null; 93 | double scale = 0.5d; 94 | double fps = 0; 95 | Stopwatch sw = Stopwatch.StartNew(); 96 | bool stopButtonDisabled => string.IsNullOrEmpty(videoUrlObject) || busy; 97 | bool startButtonDisabled => !initComplete || sourceFile == null || !string.IsNullOrEmpty(videoUrlObject) || busy; 98 | string? camErrorMessage = null; 99 | double frameCount = 0; 100 | MultiviewRenderer? activeRenderer => Renderers[RendererIndex]; 101 | float Focus3D = 0.5f; 102 | float Level3D = 1.0f; 103 | int AnaglyphProfile = 0; 104 | int RendererIndex = 0; 105 | bool initComplete = false; 106 | List Renderers = new List(); 107 | bool busy = false; 108 | bool beenInit = false; 109 | CanvasRenderingContext2D? ctx; 110 | bool supportsVideoFrameCallback = false; 111 | bool supportsWindowAnimationCallback = false; 112 | protected override async Task OnAfterRenderAsync(bool firstRender) 113 | { 114 | if (firstRender) 115 | { 116 | beenInit = true; 117 | // Init 118 | outputCanvas = new HTMLCanvasElement(outputCanvasRef); 119 | ctx = outputCanvas.Get2DContext(); 120 | 121 | fileInput = new HTMLInputElement(fileInputRef); 122 | fileInput.OnChange += FileInput_OnChange; 123 | 124 | window = JS.Get("window"); 125 | supportsWindowAnimationCallback = !window.JSRef!.IsUndefined("requestAnimationFrame"); 126 | 127 | video = new HTMLVideoElement(videoRef); 128 | supportsVideoFrameCallback = video.SupportsRequestVideoFrameCallback; 129 | 130 | // Anaglyph renderer initialization 131 | Renderers.Add(new RenderAnaglyph { ProfileIndex = 0 }); 132 | Renderers.Add(new RenderAnaglyph { ProfileIndex = 1 }); 133 | Renderers.Add(new RenderSideBySide()); 134 | Renderers.Add(new Render2DZ()); 135 | Renderers.Add(new Render2D()); 136 | scaleEl = new HTMLInputElement(scaleRef); 137 | scaleEl.OnChange += Scale_OnChange; 138 | focus3DEl = new HTMLInputElement(focusRef); 139 | focus3DEl.OnChange += Focus_OnChange; 140 | level3DEl = new HTMLInputElement(level3DRef); 141 | level3DEl.OnChange += Level_OnChange; 142 | // depth estimation pipeline initialization 143 | DepthAnythingService.OnStateChange += DepthAnythingService_OnStateChange; 144 | initComplete = true; 145 | RequeueUpdate(); 146 | StateHasChanged(); 147 | } 148 | } 149 | void DepthAnythingService_OnStateChange() 150 | { 151 | StateHasChanged(); 152 | } 153 | void FileInput_OnChange(Event ev) 154 | { 155 | using var files = fileInput!.Files; 156 | sourceFile = files?.FirstOrDefault(); 157 | StateHasChanged(); 158 | } 159 | async Task PlaySource(File file) 160 | { 161 | if (video == null || fileInput == null) return; 162 | try 163 | { 164 | // Reset the video element 165 | video.Src = string.Empty; 166 | video.Load(); 167 | // Create a URL for the file and set it as the source 168 | var fileUrl = URL.CreateObjectURL(file); 169 | video.Src = fileUrl; 170 | video.Load(); 171 | // Play the video 172 | await video.Play(); 173 | } 174 | catch (Exception ex) 175 | { 176 | Debug.WriteLine($"Error playing source: {ex.Message}"); 177 | } 178 | } 179 | void Scale_OnChange() 180 | { 181 | if (scaleEl == null) return; 182 | if (double.TryParse(scaleEl.Value, out var s)) 183 | { 184 | scale = s; 185 | StateHasChanged(); 186 | } 187 | } 188 | void Focus_OnChange() 189 | { 190 | if (focus3DEl == null) return; 191 | if (float.TryParse(focus3DEl.Value, out var s)) 192 | { 193 | Focus3D = s; 194 | StateHasChanged(); 195 | } 196 | } 197 | void Level_OnChange() 198 | { 199 | if (level3DEl == null) return; 200 | if (float.TryParse(level3DEl.Value, out var s)) 201 | { 202 | Level3D = s; 203 | StateHasChanged(); 204 | } 205 | } 206 | void Stop() 207 | { 208 | if (video != null) 209 | { 210 | try 211 | { 212 | if (!video.Paused) video.Pause(); 213 | video.SrcObject = null; 214 | video.Src = null; 215 | } 216 | catch { } 217 | } 218 | if (!string.IsNullOrEmpty(videoUrlObject)) 219 | { 220 | try 221 | { 222 | URL.RevokeObjectURL(videoUrlObject); 223 | } 224 | catch { } 225 | videoUrlObject = null; 226 | } 227 | } 228 | string? videoUrlObject = null; 229 | async Task Start() 230 | { 231 | if (video == null) 232 | { 233 | return; 234 | } 235 | Stop(); 236 | try 237 | { 238 | busy = true; 239 | camErrorMessage = ""; 240 | StateHasChanged(); 241 | if (pipeline == null) 242 | { 243 | // var transformers = await Transformers.Init(); 244 | // pipeline = await transformers.DepthEstimationPipeline(model, new PipelineOptions { Device = UseWebGPU ? "webgpu" : null, OnProgress = OnProgress }); 245 | pipeline = await DepthAnythingService.GetDepthEstimationPipeline(); 246 | } 247 | if (sourceFile != null) 248 | { 249 | videoUrlObject = sourceFile == null ? null : URL.CreateObjectURL(sourceFile); 250 | video.Src = videoUrlObject; 251 | video.Load(); 252 | await video.Play(); 253 | } 254 | } 255 | catch (Exception ex) 256 | { 257 | camErrorMessage = $"Video play failed: {ex.Message}"; 258 | JS.Log($"Start failed: {ex.Message}"); 259 | Stop(); 260 | } 261 | finally 262 | { 263 | busy = false; 264 | } 265 | } 266 | bool UpdateCallbackRunning = false; 267 | OffscreenCanvas? rgbCanvas = null; 268 | OffscreenCanvas? rgbCanvasScaled = null; 269 | CanvasRenderingContext2D? rgbCtx = null; 270 | CanvasRenderingContext2D? rgbCtxScaled = null; 271 | async Task UpdateCallback() 272 | { 273 | if (IsDisposed || video == null || UpdateCallbackRunning || outputCanvas == null || ctx == null || activeRenderer == null) return; 274 | UpdateCallbackRunning = true; 275 | try 276 | { 277 | var rgbWidth = video.VideoWidth; 278 | var rgbHeight = video.VideoHeight; 279 | SourceWidth = rgbWidth; 280 | SourceHeight = rgbHeight; 281 | // Create an OffscreenCanvas to draw the full size VideoFrame 282 | if (rgbCanvas == null) 283 | { 284 | rgbCanvas = new OffscreenCanvas(rgbWidth, rgbHeight); 285 | rgbCtx = rgbCanvas.Get2DContext(new CanvasRenderingContext2DSettings { WillReadFrequently = true }); 286 | } 287 | else 288 | { 289 | rgbCanvas.Width = rgbWidth; 290 | rgbCanvas.Height = rgbHeight; 291 | } 292 | rgbCtx!.DrawImage(video, 0, 0, rgbWidth, rgbHeight); 293 | // Create an OffscreenCanvas to draw the scaled VideoFrame 294 | var depthWidth = (int)(rgbWidth * scale); 295 | var depthHeight = (int)(rgbHeight * scale); 296 | DepthWidth = depthWidth; 297 | DepthHeight = depthHeight; 298 | if (rgbCanvasScaled == null) 299 | { 300 | rgbCanvasScaled = new OffscreenCanvas(depthWidth, depthHeight); 301 | rgbCtxScaled = rgbCanvasScaled.Get2DContext(new CanvasRenderingContext2DSettings { WillReadFrequently = true }); 302 | } 303 | else 304 | { 305 | rgbCanvasScaled.Width = depthWidth; 306 | rgbCanvasScaled.Height = depthHeight; 307 | } 308 | rgbCtxScaled!.DrawImage(rgbCanvas, 0, 0, depthWidth, depthHeight); 309 | // Convert the OffscreenCanvas to a RawImage for processing 310 | using var rgbImageScaled = RawImage.FromCanvas(rgbCanvasScaled); 311 | // Run the depth estimation pipeline on the RGB image 312 | using var depthResult = await pipeline!.Call(rgbImageScaled); 313 | using var depth = depthResult.Depth; 314 | using var depthmapData = depth.Data; 315 | // 316 | activeRenderer.Level3D = Level3D; 317 | activeRenderer.Focus3D = Focus3D; 318 | activeRenderer.SetInput(rgbCanvas); 319 | activeRenderer.SetDepth(depth.Width, depth.Height, depthmapData); 320 | activeRenderer.Render(); 321 | // 322 | if (outputCanvas.ClientWidth != rgbWidth || outputCanvas.ClientHeight != rgbHeight) 323 | { 324 | // Resize the output canvas to match the video dimensions 325 | outputCanvas.Width = rgbWidth; 326 | outputCanvas.Height = rgbHeight; 327 | } 328 | // 329 | ctx.DrawImage(activeRenderer.OffscreenCanvas!); 330 | } 331 | catch (Exception ex) 332 | { 333 | Console.WriteLine($"UpdateCallback error: {ex.Message}"); 334 | } 335 | finally 336 | { 337 | // update fps 338 | frameCount += 1; 339 | var elapsedSeconds = sw.Elapsed.TotalSeconds; 340 | if (elapsedSeconds >= 1d) 341 | { 342 | sw.Restart(); 343 | fps = frameCount / elapsedSeconds; 344 | frameCount = 0; 345 | StateHasChanged(); 346 | } 347 | UpdateCallbackRunning = false; 348 | RequeueUpdate(); 349 | } 350 | } 351 | void RequeueUpdate() 352 | { 353 | if (IsDisposed) return; 354 | if (supportsVideoFrameCallback && video != null) 355 | { 356 | video.RequestVideoFrameCallback(() => _ = UpdateCallback()); 357 | } 358 | else if (supportsWindowAnimationCallback && window != null) 359 | { 360 | window!.RequestAnimationFrame(() => _ = UpdateCallback()); 361 | } 362 | else 363 | { 364 | JS.SetTimeout(() => _ = UpdateCallback(), 20); 365 | } 366 | } 367 | int SourceWidth = 0; 368 | int SourceHeight = 0; 369 | int DepthWidth = 0; 370 | int DepthHeight = 0; 371 | OffscreenCanvas Merge2DWithDepthToCanvas2DZ(OffscreenCanvas rgbFrame, DepthEstimationResult depthEstimationResult) 372 | { 373 | using var depthEstimation = depthEstimationResult.Depth; 374 | using var grayscale1BPPData = depthEstimation.Data; 375 | var depthWidth = depthEstimation.Width; 376 | var depthHeight = depthEstimation.Height; 377 | var width = rgbFrame.Width; 378 | var height = rgbFrame.Height; 379 | var outWidth = width * 2; 380 | var outHeight = height; 381 | SourceWidth = width; 382 | SourceHeight = height; 383 | DepthWidth = depthWidth; 384 | DepthHeight = depthHeight; 385 | var grayscaleDataBytes = grayscale1BPPData.ReadBytes(); 386 | // Convert the 1BPP grayscale data to RGBA format 387 | var depthmapRGBABytes = Grayscale1BPPToRGBA(grayscaleDataBytes, depthWidth, depthHeight); 388 | // Create an ImageData object from the depth bytes 389 | using var depthImageData = ImageData.FromBytes(depthmapRGBABytes, depthWidth, depthHeight); 390 | // Create an OffscreenCanvas for the depth map ImageData 391 | using var depthCanvas = new OffscreenCanvas(depthWidth, depthHeight); 392 | using var depthCtx = depthCanvas.Get2DContext(); 393 | // Draw the depth map ImageData onto the OffscreenCanvas 394 | depthCtx.PutImageData(depthImageData, 0, 0); 395 | // Create an OffscreenCanvas for the final output 396 | var canvas = new OffscreenCanvas(outWidth, outHeight); 397 | using var ctx = canvas.Get2DContext(); 398 | // draw rgb image 399 | ctx.DrawImage(rgbFrame, 0, 0, width, height); 400 | // draw depth map 401 | ctx.DrawImage(depthCanvas, width, 0, width, height); 402 | return canvas; 403 | } 404 | byte[] Grayscale1BPPToRGBA(byte[] grayscaleData, int width, int height) 405 | { 406 | var ret = new byte[width * height * 4]; 407 | for (var i = 0; i < grayscaleData.Length; i++) 408 | { 409 | var grayValue = grayscaleData[i]; 410 | ret[i * 4] = grayValue; // Red 411 | ret[i * 4 + 1] = grayValue; // Green 412 | ret[i * 4 + 2] = grayValue; // Blue 413 | ret[i * 4 + 3] = 255; // Alpha 414 | } 415 | return ret; 416 | } 417 | bool IsDisposed = false; 418 | public void Dispose() 419 | { 420 | if (IsDisposed) return; 421 | IsDisposed = true; 422 | if (beenInit) 423 | { 424 | beenInit = false; 425 | DepthAnythingService.OnStateChange -= DepthAnythingService_OnStateChange; 426 | } 427 | // Clean up resources if necessary 428 | Stop(); 429 | if (fileInput != null) 430 | { 431 | fileInput.OnChange -= FileInput_OnChange; 432 | fileInput = null; 433 | } 434 | if (scaleEl != null) 435 | { 436 | scaleEl.OnChange -= Scale_OnChange; 437 | scaleEl.Dispose(); 438 | scaleEl = null; 439 | } 440 | activeRenderer?.Dispose(); 441 | video?.Dispose(); 442 | window?.Dispose(); 443 | } 444 | } 445 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.MultiView/MultiviewRenderer.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | 3 | namespace SpawnDev.BlazorJS.MultiView 4 | { 5 | /// 6 | /// WebGL renderer base for multiview rendering. 7 | /// 8 | public abstract class MultiviewRenderer : IDisposable 9 | { 10 | public OffscreenCanvas? OffscreenCanvas { get; protected set; } 11 | public HTMLCanvasElement? Canvas { get; protected set; } 12 | public WebGLRenderingContext gl { get; protected set; } 13 | public WebGLProgram program { get; protected set; } 14 | /// 15 | /// Gets or sets the 3D level adjustment factor. 16 | /// 17 | public float Level3D { get; set; } = 1f; 18 | public float SepMax { get; set; } = 0.020f; 19 | /// 20 | /// The image depth relative to the screen 21 | /// 22 | public float Focus3D { get; set; } = 0.5f; 23 | WebGLBuffer? vertexPositionBuffer = null; 24 | WebGLTexture? videoSampler = null; 25 | WebGLTexture? depthSampler = null; 26 | WebGLTexture? overlayTexture = null; 27 | public virtual bool RequiresDepth => true; // default is true, can be overridden by derived classes 28 | public int OutWidth 29 | { 30 | get => Canvas?.Width ?? OffscreenCanvas?.Width ?? 0; 31 | set 32 | { 33 | if (Canvas != null && Canvas.Width != value) 34 | { 35 | Canvas.Width = value; 36 | } 37 | else if (OffscreenCanvas != null && OffscreenCanvas.Width != value) 38 | { 39 | OffscreenCanvas.Width = value; 40 | } 41 | } 42 | } 43 | public int OutHeight 44 | { 45 | get => Canvas?.Height ?? OffscreenCanvas?.Height ?? 0; 46 | set 47 | { 48 | if (Canvas != null && Canvas.Width != value) 49 | { 50 | Canvas.Height = value; 51 | } 52 | else if (OffscreenCanvas != null && OffscreenCanvas.Height != value) 53 | { 54 | OffscreenCanvas.Height = value; 55 | } 56 | } 57 | } 58 | public virtual string OutFormat { get; } = "2d"; // default output format, can be overridden by derived classes 59 | public int FrameWidth { get; protected set; } 60 | public int FrameHeight { get; protected set; } 61 | public int DepthWidth { get; protected set; } 62 | public int DepthHeight { get; protected set; } 63 | public int OverlayWidth { get; protected set; } 64 | public int OverlayHeight { get; protected set; } 65 | public string? Source { get; protected set; } 66 | protected MultiviewRenderer() 67 | { 68 | OffscreenCanvas = new OffscreenCanvas(1, 1); 69 | gl = OffscreenCanvas.GetWebGLContext(new WebGLContextAttributes 70 | { 71 | PreserveDrawingBuffer = true, 72 | }); 73 | // classes that implement this class will create he shader program 74 | } 75 | protected MultiviewRenderer(HTMLCanvasElement canvas) 76 | { 77 | Canvas = canvas; 78 | gl = canvas.GetWebGLContext(new WebGLContextAttributes 79 | { 80 | PreserveDrawingBuffer = true, 81 | }); 82 | // classes that implement this class will create the shader program 83 | } 84 | public void SetInput(OffscreenCanvas canvas) 85 | { 86 | Source = ""; 87 | if (FrameWidth != canvas.Width || FrameHeight != canvas.Height) 88 | { 89 | FrameWidth = canvas.Width; 90 | FrameHeight = canvas.Height; 91 | // input size changed 92 | } 93 | videoSampler ??= CreateImageTexture(); 94 | // Upload the image into the texture. 95 | gl.ActiveTexture(gl.TEXTURE1); 96 | // Bind videoSampler to TEXTURE1 97 | gl.BindTexture(gl.TEXTURE_2D, videoSampler); 98 | gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 99 | } 100 | public void SetInput(HTMLImageElement image) 101 | { 102 | if (Source == image.Src) return; 103 | Source = image.Src; 104 | if (FrameWidth != image.NaturalWidth || FrameHeight != image.NaturalHeight) 105 | { 106 | FrameWidth = image.NaturalWidth; 107 | FrameHeight = image.NaturalHeight; 108 | // input size changed 109 | } 110 | videoSampler ??= CreateImageTexture(); 111 | // Upload the image into the texture. 112 | gl.ActiveTexture(gl.TEXTURE1); 113 | gl.BindTexture(gl.TEXTURE_2D, videoSampler); 114 | gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 115 | } 116 | public void SetDepth(int width, int height, Uint8Array depth) 117 | { 118 | if (DepthWidth != width || DepthHeight != height) 119 | { 120 | DepthWidth = width; 121 | DepthHeight = height; 122 | // depth size changed 123 | } 124 | depthSampler ??= CreateImageTexture(); 125 | // Upload the image into the texture. 126 | gl.ActiveTexture(gl.TEXTURE2); 127 | // Bind depthSampler to TEXTURE2 128 | gl.BindTexture(gl.TEXTURE_2D, depthSampler); 129 | // Write data as 1 byte per pixel which will be read from the alpha channel of depthSampler in the fragment shader 130 | gl.TexImage2D(gl.TEXTURE_2D, 0, gl.ALPHA, width, height, 0, gl.ALPHA, gl.UNSIGNED_BYTE, depth); 131 | } 132 | public void SetOverlay(HTMLImageElement image) 133 | { 134 | if (OverlayWidth != image.NaturalWidth || OverlayHeight != image.NaturalHeight) 135 | { 136 | OverlayWidth = image.NaturalWidth; 137 | OverlayHeight = image.NaturalHeight; 138 | // overlay size changed 139 | } 140 | overlayTexture ??= CreateImageTexture(); 141 | // Upload the image into the texture. 142 | gl.ActiveTexture(gl.TEXTURE0); 143 | gl.BindTexture(gl.TEXTURE_2D, overlayTexture); 144 | gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 145 | } 146 | int vertexPositionAttrLoc = -1; 147 | protected bool views_index_invert = false; 148 | public void Render() 149 | { 150 | var outWidth = FrameWidth; 151 | var outHeight = FrameHeight; 152 | 153 | OutWidth = outWidth; 154 | OutHeight = outHeight; 155 | 156 | gl.PixelStorei(gl.UNPACK_ALIGNMENT, 1); 157 | 158 | if (vertexPositionBuffer == null) 159 | { 160 | vertexPositionAttrLoc = gl.GetAttribLocation(program, "vertexPosition"); 161 | using var vertexPositionBufferData = new Float32Array([ 162 | // First triangle: 163 | 1.0f, 1.0f, 164 | -1.0f, 1.0f, 165 | -1.0f, -1.0f, 166 | // Second triangle: 167 | -1.0f, -1.0f, 168 | 1.0f, -1.0f, 169 | 1.0f, 1.0f 170 | ]); 171 | // Write the normalized texture coordinates to the texCoordBuffer 172 | vertexPositionBuffer = gl.CreateBuffer(); 173 | gl.BindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer); 174 | gl.BufferData(gl.ARRAY_BUFFER, vertexPositionBufferData, gl.STATIC_DRAW); 175 | } 176 | 177 | // input texture 178 | videoSampler ??= CreateImageTexture(); 179 | 180 | // depth texture 181 | depthSampler ??= CreateImageTexture(); 182 | 183 | // overlay texture 184 | overlayTexture ??= CreateImageTexture(); 185 | 186 | gl.UseProgram(program); 187 | 188 | // Overlay image 189 | // set active 190 | gl.ActiveTexture(gl.TEXTURE0); 191 | // attach overlayTexture texture to the active texture (gl.TEXTURE0 here) 192 | gl.BindTexture(gl.TEXTURE_2D, overlayTexture); 193 | // set textureSampler to use TEXTURE0 194 | Uniform1i("textureSampler", 0); 195 | 196 | // Source 2D image 197 | // set active 198 | gl.ActiveTexture(gl.TEXTURE1); 199 | // attach videoSampler texture to the active texture (gl.TEXTURE1 here) 200 | gl.BindTexture(gl.TEXTURE_2D, videoSampler); 201 | // set videoSampler to use TEXTURE1 202 | Uniform1i("videoSampler", 1); 203 | 204 | // Generated depth image 205 | // set active 206 | gl.ActiveTexture(gl.TEXTURE2); 207 | // attach depthSampler texture to the active texture (gl.TEXTURE2 here) 208 | gl.BindTexture(gl.TEXTURE_2D, depthSampler); 209 | // set depthSampler to use TEXTURE2 210 | Uniform1i("depthSampler", 2); 211 | 212 | //uniform bool views_index_invert_x; // false 0x is left, true 0x is right 213 | Uniform1i("views_index_invert_x", views_index_invert ? 1 : 0); 214 | 215 | // if 2d+z below 2 uniforms must be set 216 | var outPixelWidth = 1.0f / outWidth; 217 | // handle extra data needed for 2dz and 2dzd 218 | var sep_max_x = SepMax * Level3D; // (RenderManager.settings["3d_level_global"].value); 219 | var sep_max_modifier = 900f / outWidth; 220 | sep_max_x = sep_max_x * sep_max_modifier; 221 | //sep_max_x = sep_max_x - (sep_max_x % rC0[1]); 222 | int loop_cnt = (int)Math.Ceiling(sep_max_x / outPixelWidth) + 2; 223 | //uniform float rC0[4]; 224 | Uniform1fv("rC0", [sep_max_x, outPixelWidth, outPixelWidth * 0.5f, Focus3D]); 225 | //uniform int rI0[1]; 226 | Uniform1iv("rI0", [loop_cnt]); 227 | 228 | // now apply implementing renderer's settings (usually sets uniforms, other pre-render stuff) 229 | ApplyEffect(); 230 | 231 | // Tell WebGL how to convert from clip space to pixels 232 | gl.Viewport(0, 0, outWidth, outHeight); 233 | 234 | // Clear the render target 235 | gl.ClearColor(0, 0, 0, 0); 236 | gl.Clear(gl.COLOR_BUFFER_BIT); 237 | 238 | { 239 | // bind the texCoord buffer. 240 | gl.BindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer!); 241 | gl.EnableVertexAttribArray(vertexPositionAttrLoc); 242 | gl.VertexAttribPointer(vertexPositionAttrLoc, 2, gl.FLOAT, false, 0, 0); 243 | } 244 | 245 | { 246 | // Draw the full screen quad 247 | gl.DrawArrays(gl.TRIANGLES, 0, 6); 248 | } 249 | 250 | //{ 251 | // // Cleanup 252 | // gl.BindBuffer(gl.ARRAY_BUFFER, null); 253 | //} 254 | } 255 | public WebGLTexture CreateImageTexture() 256 | { 257 | var texture = gl.CreateTexture(); 258 | gl.BindTexture(gl.TEXTURE_2D, texture); 259 | // Set the parameters so we can render any size image. 260 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 261 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 262 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 263 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 264 | return texture; 265 | } 266 | public WebGLTexture CreateDepthTexture() 267 | { 268 | var texture = gl.CreateTexture(); 269 | gl.BindTexture(gl.TEXTURE_2D, texture); 270 | // Set the parameters so we can render any size image. 271 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 272 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 273 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 274 | gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 275 | return texture; 276 | } 277 | public void Dispose() 278 | { 279 | 280 | } 281 | public virtual void ApplyEffect() 282 | { 283 | 284 | } 285 | public async Task ToBlob(string? type = null, float? quality = null) 286 | { 287 | if (string.IsNullOrEmpty(type)) 288 | { 289 | type = "image/png"; 290 | } 291 | if (Canvas != null) 292 | { 293 | if (quality != null) 294 | { 295 | var blob = await Canvas.ToBlobAsync(type, quality.Value); 296 | return blob; 297 | } 298 | else 299 | { 300 | var blob = await Canvas.ToBlobAsync(type); 301 | return blob; 302 | } 303 | } 304 | else if (OffscreenCanvas != null) 305 | { 306 | var blob = await OffscreenCanvas.ConvertToBlob(new ConvertToBlobOptions 307 | { 308 | Type = type, 309 | Quality = quality, 310 | }); 311 | return blob; 312 | } 313 | return null; 314 | } 315 | public async Task ToObjectUrl(string? type = null, float? quality = null) 316 | { 317 | using var blob = await ToBlob(type, quality); 318 | var objectUrl = blob == null ? null : URL.CreateObjectURL(blob); 319 | return objectUrl; 320 | } 321 | Dictionary _uniforms = new Dictionary(); 322 | WebGLUniformLocation? GetUniformLocation(string name) 323 | { 324 | if (_uniforms.TryGetValue(name, out var uniform)) return uniform; 325 | uniform = gl.GetUniformLocation(program, name); 326 | _uniforms.Add(name, uniform); 327 | return uniform; 328 | } 329 | protected bool Uniform2f(string name, float x, float y) 330 | { 331 | var uniformLocation = GetUniformLocation(name); 332 | if (uniformLocation == null) return false; 333 | gl.Uniform2f(uniformLocation, x, y); 334 | return true; 335 | } 336 | protected bool Uniform1f(string name, float x) 337 | { 338 | var uniformLocation = GetUniformLocation(name); 339 | if (uniformLocation == null) return false; 340 | gl.Uniform1f(uniformLocation, x); 341 | return true; 342 | } 343 | protected bool Uniform1fv(string name, IEnumerable v) 344 | { 345 | var uniformLocation = GetUniformLocation(name); 346 | if (uniformLocation == null) return false; 347 | gl.Uniform1fv(uniformLocation, v); 348 | return true; 349 | } 350 | protected bool Uniform1iv(string name, IEnumerable v) 351 | { 352 | var uniformLocation = GetUniformLocation(name); 353 | if (uniformLocation == null) return false; 354 | gl.Uniform1iv(uniformLocation, v); 355 | return true; 356 | } 357 | protected bool Uniform1i(string name, int x) 358 | { 359 | var uniformLocation = GetUniformLocation(name); 360 | if (uniformLocation == null) return false; 361 | gl.Uniform1i(uniformLocation, x); 362 | return true; 363 | } 364 | protected WebGLProgram CreateProgram(string vertexShader, string fragmentShader) 365 | { 366 | //vertex shader 367 | using var vsShader = gl.CreateShader(gl.VERTEX_SHADER); 368 | gl.ShaderSource(vsShader, vertexShader); 369 | gl.CompileShader(vsShader); 370 | var vsShaderSucc = gl.GetShaderParameter(vsShader, gl.COMPILE_STATUS); 371 | if (!vsShaderSucc) 372 | { 373 | var compilationLog = gl.GetShaderInfoLog(vsShader); 374 | gl.DeleteShader(vsShader); 375 | throw new Exception($"Error compile vertex shader for WebGLProgram. {compilationLog}"); 376 | } 377 | // fragment shader 378 | using var psShader = gl.CreateShader(gl.FRAGMENT_SHADER); 379 | gl.ShaderSource(psShader, fragmentShader); 380 | gl.CompileShader(psShader); 381 | var psShaderSucc = gl.GetShaderParameter(psShader, gl.COMPILE_STATUS); 382 | if (!psShaderSucc) 383 | { 384 | var compilationLog = gl.GetShaderInfoLog(psShader); 385 | gl.DeleteShader(vsShader); 386 | gl.DeleteShader(psShader); 387 | throw new Exception($"Error compile fragment shader for WebGLProgram. {compilationLog}"); 388 | } 389 | // program 390 | var program = gl.CreateProgram(); 391 | gl.AttachShader(program, vsShader); 392 | gl.AttachShader(program, psShader); 393 | gl.LinkProgram(program); 394 | var programSucc = gl.GetProgramParameter(program, gl.LINK_STATUS); 395 | gl.DeleteShader(vsShader); 396 | gl.DeleteShader(psShader); 397 | if (programSucc) return program; 398 | var lastError = gl.GetProgramInfoLog(program); 399 | Console.WriteLine("Error in program linking:" + lastError); 400 | gl.DeleteProgram(program); 401 | program.Dispose(); 402 | throw new Exception("Error creating shader program for WebGLProgram"); 403 | } 404 | } 405 | } 406 | --------------------------------------------------------------------------------