[FOSDEM 2023] How I Ported Doom to the Browser with WebAssembly

Transcript

1. How I ported DOOM to the browser with .Net's Blazor WASM
2. Speaker DevRel @ Worldline Teacher Yassine Benabbas yostane YCoding
3. Game porting Make a game run in platforms other than its original ones Achieved by adapting the code for the new platform Not porting: virtual machine or emulator
4. Game porting Make a game run in platforms other than its original ones Achieved by adapting the code for the new platform Not porting: virtual machine or emulator MVG's video is a great source of inspiration
5. .net and the browser .net: OSS cross-platform framework C# language
6. .net and the browser .net: OSS cross-platform framework C# language In 2020 .Net 5 introduced Blazor WASM ​ ​ ​ Component based We can run .net locally on the browser
7. @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } 1 2 3 4 5 6 7 8 9 10 A Razor component
8. Let's port a .net game !
9. Released in 1993 for DOS One the most successful First Person Shooters Has two parts: engine: Game logic WAD file: all assets and maps 🌟 Doom is portable by design 🌟
10. http://mrglitchsreviews.blogspot.com/2012/09/doom-console-ports.html Ported to a LOT of platforms
11. https://www.link-cable.com/top-10-weird-doom-ports/
12. ManagedDoom .Net Port of ManagedDoom V1 Uses (graphics + audio + input) V2 (in beta as of Jan 3) uses My work is a based on ManagedDoom V1 LinuxDoom SFML silk.net
13. ManagedDoom .Net Port of ManagedDoom V1 Uses (graphics + audio + input) V2 (in beta as of Jan 3) uses My work is a based on ManagedDoom V1 LinuxDoom SFML silk.net id-Software/DOOM
14. ManagedDoom .Net Port of ManagedDoom V1 Uses (graphics + audio + input) V2 (in beta as of Jan 3) uses My work is a based on ManagedDoom V1 LinuxDoom SFML silk.net id-Software/DOOM sinshu/managed-doom
15. ManagedDoom .Net Port of ManagedDoom V1 Uses (graphics + audio + input) V2 (in beta as of Jan 3) uses My work is a based on ManagedDoom V1 LinuxDoom SFML silk.net id-Software/DOOM sinshu/managed-doom yostane/MangedDoom-Blazor
16. Porting strategy creator.nightcafe.studio
17. Porting strategy Compile the app: replace SFML code with "TODO: implement" creator.nightcafe.studio
18. Porting strategy Compile the app: replace SFML code with "TODO: implement" Implement TODOs little by little, priority to frame rendering creator.nightcafe.studio
19. Porting strategy Compile the app: replace SFML code with "TODO: implement" Implement TODOs little by little, priority to frame rendering Optimize and clean later strategy creator.nightcafe.studio
20. Porting strategy Compile the app: replace SFML code with "TODO: implement" Implement TODOs little by little, priority to frame rendering Optimize and clean later strategy Read and documentation only when necessary Used to understand frame format Doom-Wiki SFML creator.nightcafe.studio
21. Porting strategy Compile the app: replace SFML code with "TODO: implement" Implement TODOs little by little, priority to frame rendering Optimize and clean later strategy Read and documentation only when necessary Used to understand frame format Doom-Wiki SFML 2 weeks as a side- project creator.nightcafe.studio
22. Game loop pseudo-code while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7
23. Game loop pseudo-code while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7 while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7
24. Game loop pseudo-code while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7 while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const input = getPlayerInput(); while (waitForNextFrame()){ 1 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7
25. Game loop pseudo-code while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7 while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const input = getPlayerInput(); while (waitForNextFrame()){ 1 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const { frame, audio } = UpdateGameState(input, WAD); while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 3 4 render(frame); 5 play(audio); 6 } 7
26. Game loop pseudo-code while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7 while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const input = getPlayerInput(); while (waitForNextFrame()){ 1 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const { frame, audio } = UpdateGameState(input, WAD); while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 3 4 render(frame); 5 play(audio); 6 } 7 render(frame); play(audio); while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 5 6 } 7
27. Game loop pseudo-code while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7 while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const input = getPlayerInput(); while (waitForNextFrame()){ 1 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 render(frame); 5 play(audio); 6 } 7 const { frame, audio } = UpdateGameState(input, WAD); while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 3 4 render(frame); 5 play(audio); 6 } 7 render(frame); play(audio); while (waitForNextFrame()){ 1 const input = getPlayerInput(); 2 const { frame, audio } 3 = UpdateGameState(input, WAD); 4 5 6 } 7 while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } 1 2 3 4 5 6 7
28. ManagedDoom V1 architecture while loop
29. pressed keys (keyup) release keys (keydown) ['Z', 'Q'] ['space'] ManagedDoom V1 architecture UpdateGameState while loop wad DOOM.wad
30. pressed keys (keyup) release keys (keydown) ['Z', 'Q'] ['space'] ManagedDoom V1 architecture Frame Audio UpdateGameState while loop SFML Video SFML Audio wad DOOM.wad
31. pressed keys (keyup) release keys (keydown) ['Z', 'Q'] ['space'] ManagedDoom V1 architecture Frame Audio UpdateGameState while loop SFML Video SFML Audio Blazor wad DOOM.wad ~70% OK Browser
32. pressed keys (keyup) release keys (keydown) ['Z', 'Q'] ['space'] Blazor Doom architecture wad DOOM.wad requestAnimationFrame Canvas Frame buffer Audio buffer UpdateGameState Audio Context
33. pressed keys (keyup) release keys (keydown) ['Z', 'Q'] ['space'] Blazor Doom architecture wad DOOM.wad requestAnimationFrame Canvas Frame buffer Audio buffer UpdateGameState Audio Context BlazorDoom component
34. pressed keys (keyup) release keys (keydown) ['Z', 'Q'] ['space'] Blazor Doom architecture wad DOOM.wad requestAnimationFrame DotNet.invokeMethod Canvas IJSRuntime.Invoke IJSRuntime.InvokeUnmarshalled Frame buffer Audio buffer UpdateGameState Audio Context BlazorDoom component IJSRuntime.InvokeVoid
35. Technical details With some code ! https://doom.fandom.com/wiki/Cacodemon/Doom
36. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11
37. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> 1 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11
38. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> 1 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 5 6 7 8 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11
39. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> 1 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 5 6 7 8 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 jsProcessRuntime.InvokeVoid("gameLoop"); } <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 10 11 } 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11
40. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> 1 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 5 6 7 8 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 jsProcessRuntime.InvokeVoid("gameLoop"); } <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 10 11 } 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { window.gameLoop = function (timestamp) { 1 2 3 lastFrameTimestamp = timestamp; 4 // Updates the game state (advances a frame) 5 DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) 6 } 7 // This replaces the for loop in a traditional game 8 // Request the browser to notify us when we do the next iteration 9 window.requestAnimationFrame(window.gameLoop); 10 } 11
41. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> 1 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 5 6 7 8 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 jsProcessRuntime.InvokeVoid("gameLoop"); } <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 10 11 } 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { window.gameLoop = function (timestamp) { 1 2 3 lastFrameTimestamp = timestamp; 4 // Updates the game state (advances a frame) 5 DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) 6 } 7 // This replaces the for loop in a traditional game 8 // Request the browser to notify us when we do the next iteration 9 window.requestAnimationFrame(window.gameLoop); 10 } 11 // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) window.gameLoop = function (timestamp) { 1 // Check the pacing 2 if (timestamp - lastFrameTimestamp >= frameTime) { 3 lastFrameTimestamp = timestamp; 4 5 6 } 7 // This replaces the for loop in a traditional game 8 // Request the browser to notify us when we do the next iteration 9 window.requestAnimationFrame(window.gameLoop); 10 } 11
42. <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> @code { // Entry point of the game private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" jsProcessRuntime.InvokeVoid("gameLoop"); } } 1 2 3 4 5 6 7 8 9 10 11 12 <canvas id="canvas" image-rendering: pixelated;" ...> </canvas> 1 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 private async Task StartGame() { // steup the game object app = new ManagedDoom.DoomApplication(...); // JS method that calls "requestAnimationFrame" <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 5 6 7 8 9 jsProcessRuntime.InvokeVoid("gameLoop"); 10 } 11 } 12 jsProcessRuntime.InvokeVoid("gameLoop"); } <canvas id="canvas" image-rendering: pixelated;" ...> 1 </canvas> 2 @code { 3 // Entry point of the game 4 private async Task StartGame() 5 { 6 // steup the game object 7 app = new ManagedDoom.DoomApplication(...); 8 // JS method that calls "requestAnimationFrame" 9 10 11 } 12 Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { window.gameLoop = function (timestamp) { 1 2 3 lastFrameTimestamp = timestamp; 4 // Updates the game state (advances a frame) 5 DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) 6 } 7 // This replaces the for loop in a traditional game 8 // Request the browser to notify us when we do the next iteration 9 window.requestAnimationFrame(window.gameLoop); 10 } 11 // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) window.gameLoop = function (timestamp) { 1 // Check the pacing 2 if (timestamp - lastFrameTimestamp >= frameTime) { 3 lastFrameTimestamp = timestamp; 4 5 6 } 7 // This replaces the for loop in a traditional game 8 // Request the browser to notify us when we do the next iteration 9 window.requestAnimationFrame(window.gameLoop); 10 } 11 // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); window.gameLoop = function (timestamp) { 1 // Check the pacing 2 if (timestamp - lastFrameTimestamp >= frameTime) { 3 lastFrameTimestamp = timestamp; 4 // Updates the game state (advances a frame) 5 DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) 6 } 7 8 9 10 } 11
43. Entry point and frame pacing window.gameLoop = function (timestamp) { // Check the pacing if (timestamp - lastFrameTimestamp >= frameTime) { lastFrameTimestamp = timestamp; // Updates the game state (advances a frame) DotNet.invokeMethod('BlazorDoom', 'UpdateGame', downKeys, upKeys) } // This replaces the for loop in a traditional game // Request the browser to notify us when we do the next iteration window.requestAnimationFrame(window.gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 // The code that I showed earlier [JSInvokable("GameLoop")] public static void UpdateGame(uint[] downKeys, uint[] upKeys) { app.Run(downKeys, upKeys); } 1 2 3 4 5 6
44. Audio and video rendering
45. Audio playback https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts Sample 1 / Sampling frequency
46. Audio playback 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts Sample 1 / Sampling frequency
47. Audio playback 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts Sample 1 / Sampling frequency
48. Audio playback 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts Sample 1 / Sampling frequency + Sampling frequency
49. Audio playback 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts AudioContext Sample 1 / Sampling frequency + Sampling frequency
50. Audio playback 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts AudioContext Sample 1 / Sampling frequency + Sampling frequency 🔊
51. playByteArray(samples, sampleRate) { const audioBuffer = this.context.createBuffer( 1, length, this.context.sampleRate ); var channelData = audioBuffer.getChannelData(0); // JS receives a weird "samples" array for (let i = 0; i < length; i += 2) { // Scale the value to between -1 and 1 channelData[i] = samples[i] / 0xffff; } // Play the audio var source = this.context.createBufferSource(); source.buffer = audioBuffer; source.connect(this.context.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Audio playback // Somewhere in the Doom Engine's audio module DoomApplication.WebAssemblyJSRuntime.Invoke<object>( "playSound", new object[] { samples, sampleRate, 0, Position } ); 1 2 3 4
52. playByteArray(samples, sampleRate) { const audioBuffer = this.context.createBuffer( 1, length, this.context.sampleRate ); var channelData = audioBuffer.getChannelData(0); // JS receives a weird "samples" array for (let i = 0; i < length; i += 2) { // Scale the value to between -1 and 1 channelData[i] = samples[i] / 0xffff; } // Play the audio var source = this.context.createBufferSource(); source.buffer = audioBuffer; source.connect(this.context.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var channelData = audioBuffer.getChannelData(0); // JS receives a weird "samples" array for (let i = 0; i < length; i += 2) { // Scale the value to between -1 and 1 channelData[i] = samples[i] / 0xffff; } playByteArray(samples, sampleRate) { 1 const audioBuffer = this.context.createBuffer( 2 1, length, this.context.sampleRate 3 ); 4 5 6 7 8 9 10 // Play the audio 11 var source = this.context.createBufferSource(); 12 source.buffer = audioBuffer; 13 source.connect(this.context.destination); 14 source.start(); 15 } 16 Audio playback // Somewhere in the Doom Engine's audio module DoomApplication.WebAssemblyJSRuntime.Invoke<object>( "playSound", new object[] { samples, sampleRate, 0, Position } ); 1 2 3 4
53. playByteArray(samples, sampleRate) { const audioBuffer = this.context.createBuffer( 1, length, this.context.sampleRate ); var channelData = audioBuffer.getChannelData(0); // JS receives a weird "samples" array for (let i = 0; i < length; i += 2) { // Scale the value to between -1 and 1 channelData[i] = samples[i] / 0xffff; } // Play the audio var source = this.context.createBufferSource(); source.buffer = audioBuffer; source.connect(this.context.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var channelData = audioBuffer.getChannelData(0); // JS receives a weird "samples" array for (let i = 0; i < length; i += 2) { // Scale the value to between -1 and 1 channelData[i] = samples[i] / 0xffff; } playByteArray(samples, sampleRate) { 1 const audioBuffer = this.context.createBuffer( 2 1, length, this.context.sampleRate 3 ); 4 5 6 7 8 9 10 // Play the audio 11 var source = this.context.createBufferSource(); 12 source.buffer = audioBuffer; 13 source.connect(this.context.destination); 14 source.start(); 15 } 16 playByteArray(samples, sampleRate) { const audioBuffer = this.context.createBuffer( 1, length, this.context.sampleRate ); var channelData = audioBuffer.getChannelData(0); // JS receives a weird "samples" array for (let i = 0; i < length; i += 2) { // Scale the value to between -1 and 1 channelData[i] = samples[i] / 0xffff; } // Play the audio var source = this.context.createBufferSource(); source.buffer = audioBuffer; source.connect(this.context.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Audio playback // Somewhere in the Doom Engine's audio module DoomApplication.WebAssemblyJSRuntime.Invoke<object>( "playSound", new object[] { samples, sampleRate, 0, Position } ); 1 2 3 4
54. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame
55. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame
56. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame
57. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame
58. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame
59. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame
60. 0 1 2 3 1 1 2 3 0 1 2 3 From 1D frame to a 2D frame 2 2 0 1 Frame data Color palette Frame Image built from top to bottom and from left to right Doom uses color indexing
61. C# Byte Array to JS, considerations 0 1 2 3 1 1 2 3 0 1 2 3 2 2 0 1 Frame data Color palette IJSRuntime.InvokeUnmarshalled
62. C# Byte Array to JS, considerations 0 1 2 3 1 1 2 3 0 1 2 3 2 2 0 1 Frame data Color palette 0123 1123 2201 IJSRuntime.InvokeUnmarshalled
63. C# Byte Array to JS, considerations 0 1 2 3 1 1 2 3 0 1 2 3 2 2 0 1 Frame data Color palette 0123 1123 2201 0123 IJSRuntime.InvokeUnmarshalled
64. C# Byte Array to JS, considerations 0 1 2 3 1 1 2 3 0 1 2 3 2 2 0 1 Frame data Color palette 0123 1123 2201 0123 4 bytes in C# -> 1 number in JS n elements in C# -> (n / 4) elements in JS Bit shifting required in JS ! IJSRuntime.InvokeUnmarshalled
65. Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
66. window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
67. window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 4 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
68. window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 4 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 10 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
69. window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 4 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 10 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 7 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 16 17 18 19 20 21 22 Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
70. window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 4 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 10 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 7 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 16 17 18 19 20 21 22 window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
71. window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 4 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 let dataIndex = y * (width * 4) + x; 7 setSinglePixel(imageData, dataIndex, colors, 8 (screenDataItem >> mask) & 0xff); 9 10 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 16 const color = BINDING.mono_array_get(colors, colorIndex); 17 imageData.data[dataIndex] = color & 0xff; 18 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; 19 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; 20 imageData.data[dataIndex + 3] = 255; 21 } 22 let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { 1 // JS receives an array with 4 bytes per item 2 for (var i = 0; i < (width * height) / 4; i += 1) { 3 // Gets the array sent from C# 4 const screenDataItem = BINDING.mono_array_get(screenData, i); 5 for (var mask = 0; mask <= 24; mask += 8) { 6 7 8 (screenDataItem >> mask) & 0xff); 9 // Build the image from top to bottom, left to right 10 if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } 11 } 12 } 13 context.putImageData(imageData, 0, 0); 14 }; 15 16 17 18 19 20 21 22 window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 window.renderWithColorsAndScreenDataUnmarshalled = (screenData, colors) => { // JS receives an array with 4 bytes per item for (var i = 0; i < (width * height) / 4; i += 1) { // Gets the array sent from C# const screenDataItem = BINDING.mono_array_get(screenData, i); for (var mask = 0; mask <= 24; mask += 8) { let dataIndex = y * (width * 4) + x; setSinglePixel(imageData, dataIndex, colors, (screenDataItem >> mask) & 0xff); // Build the image from top to bottom, left to right if (y >= height - 1) { y = 0; x += 4; } else { y += 1; } } } context.putImageData(imageData, 0, 0); }; function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = BINDING.mono_array_get(colors, colorIndex); imageData.data[dataIndex] = color & 0xff; imageData.data[dataIndex + 1] = (color >> 8) & 0xff; imageData.data[dataIndex + 2] = (color >> 16) & 0xff; imageData.data[dataIndex + 3] = 255; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Frame rendering // Somwhere in the Doom Engine's graphics module var args = new object[] { screen.Data, colors, 320, 200 }; // Send the frame buffer to JS DoomApplication.WebAssemblyJSRuntime.InvokeUnmarshalled<byte[], uint[], int> ("renderWithColorsAndScreenDataUnmarshalled", screen.Data, colors); 1 2 3 4 5
72. Tips and lessons learned Avoid Array.Copy on Big arrays (in .Net 5) Extensive logging from Blazor sloooows the app Calling Blazor from JS is very fast But has problems with certain data types Undocumented APIs removed in .Net 7 in favor of JS Interop
73. Tips and lessons learned Avoid Array.Copy on Big arrays (in .Net 5) Extensive logging from Blazor sloooows the app Calling Blazor from JS is very fast But has problems with certain data types Undocumented APIs removed in .Net 7 in favor of JS Interop window.requestAnimationFrame allows to pace the frames Browsers require interaction with the page to play audio
74. DEMO
75. JS Interop in .net >= 7 Less intricate way to run .Net from JS (no components) More adapted to this case than Blazor export function setLocalStorage(todosJson) { window.localStorage.setItem('dotnet-wasm-todomvc', todosJson); } 1 2 3 static partial class Interop { [JSImport("setLocalStorage", "todoMVC/store.js")] internal static partial void _setLocalStorage(string json); } 1 2 3 4 5 public partial class MainJS { [JSExport] public static void OnHashchange(string url) { controller?.SetView(url); } } 1 2 3 4 5 6 7 8 const exports = await getAssemblyExports( getConfig().mainAssemblyName); exports.TodoMVC.MainJS.OnHashchange(document.location.hash); 1 2 3 Call JS from .Net Call .Net from JS
76. Next steps Short term: Migrate to JS Interop Update to ManagedDoom V2 Middle term: Game music Test WADs othen than DOOM1 Long term / wish: PR this port to ManagedDoom
77. Conclusion WASM makes existing code compatible with Browsers Porting games is fun
78. Thanks ! Any questions ? Source code Slides
79. Links https://mspoweruser.com/this-doom-digital-camera- source-port-is-amazing-and-bizarre/ https://www.link-cable.com/top-10-weird-doom-ports/ pixabay.com