Mode 7

Mode 7 implementation in C for WebAssembly.

• Demo (WebAssembly)
• Demo (JavaScript)

How to compile this?

Emscripten

First of all you need to install emscripten and its emcc compiler. Follow the installation guide that you will find in Emscripten.

Compiling

Once you have emcc properly installed run this to generate a debuggable mode7.js and mode7.wasm:

build.dev.sh

How to use this library?

Its easy, you only need to import mode7.js in your webpage and then:

<scriptsrc="mode7.js"></script><script>Module.onRuntimeInitialized=async_=>{// Allocate 64x64x4 to draw the plane texture in it.constPlaneSize=64constplanePointer=Module._get_safe_memory(PlaneSize*PlaneSize*4)constplane=newImageData(newUint8ClampedArray(Module.buffer,planePointer,PlaneSize*PlaneSize*4),PlaneSize,PlaneSize)// Allocate 320x200x4 to draw the final image.consttargetPointer=Module._get_safe_memory(320*200*4)consttarget=newImageData(newUint8ClampedArray(Module.buffer,targetPointer,320*200*4),320,200)// Initialize mode 7.Module._set_perspective(Math.PI*0.5,0.001,0.006)Module._set_plane(plane.width,plane.height,planePointer)Module._set_view(angle,x,y)letframeID,angle=0,x=0,y=0functionframe(time){if(keys.get('ArrowLeft')){angle-=0.05}elseif(keys.get('ArrowRight')){angle+=0.05}if(keys.get('ArrowUp')){x+=Math.cos(angle)*0.001y+=Math.sin(angle)*0.001}elseif(keys.get('ArrowDown')){x-=Math.cos(angle)*0.001y-=Math.sin(angle)*0.001}// Updates the view angle and position.Module._set_view(angle,x,y)// Renders the pseudo-plane.Module._render(target.width,target.height,targetPointer)cx.putImageData(target,0,0)frameID=window.requestAnimationFrame(frame)}frameID=window.requestAnimationFrame(frame)}</script>

Thanks to

• javidx9 for his great video Programming Pseudo 3D Planes aka MODE7 (C++)
• All the people working on Emscripten.
• Lin Clark for her articles on WebAssembly Memory

Made with ❤️ by AzazelN28