Drawing 3D perspective in a 2D canvas with plain JavaScript

[grelf]

3D perspective is perfectly possible in the plain 2D canvas of HTML5/JavaScript without the overhead of any frameworks or libraries.

As an example I have recently created a small game in response to a GameDev challenge relating to DOOM.

I was troubled by a bug in my display when the player moved close to walls. I sat down and made some diagrams to help me get my thinking straight and then I was able to solve the bug. I thought others might find my diagrams useful so I am adding them here.

My aim is to demonstrate that 3D perspective is perfectly possible in the plain 2D graphics context. I believe that it is simplest for beginners to start in this way, getting familiar with JavaScript without the additional learning curves presented by the various frameworks.

You can read about what I have just done in relation to DOOM here (which has a link to my little game): https://www.grelf.net/predoom/info.html

The code was adapted from my earlier and more complex game, The Forest: https://www.myforest.uk/
(I now need to add a correction to the drawing of the mines in that program, having solved the bug).

 

 

[b10b]

Nice, I liked the attention to detail on the phone booths!

Canvas (2D) is very versatile.  Have you considered how to optimise to boost things from ~1 fps to 30+ fps?  For example, batching, limiting upscale, caching rotations, integer positions, clip regions.  What current operations may be safely discarded?

 

[grelf]

Glad you liked it.

The "attention to detail" is because I am using some of my own photos for the graphics, just edited a bit to provide transparency for windows and alternative layers for animating such things as the opening of doors.

I have no requirement for going faster. My aim is to provide programs which will run on ANY device with an HTML5-capable browser, with a small loading time and without the user having to download anything else. I am also keen to encourage beginners to explore the creative possibilities of plain Javascript. I think I can see too many examples here of people trying to run before they can walk.

[b10b]

1 hour ago, grelf said:

I have no requirement for going faster. My aim is to provide programs which will run on ANY device with an HTML5-capable browser, with a small loading time and without the user having to download anything else. I am also keen to encourage beginners to explore the creative possibilities of plain Javascript. I think I can see too many examples here of people trying to run before they can walk.

I see many of us here are building programs that run on any device with minor loading times.  Running those programs at interactive frame rates is often crucial to game-mechanics.  So why would performance not be a requirement of a proposed rendering technique intended to inspire beginners?

By way of comparison I'm currently working on a little game, set in a hilly forest.  All done as "3D" using Canvas (2D): a few dozen lines of code, hurtles along at 60fps on mobile, with CPU cycles to spare for audio and game loop.  Please hold your applause, I cheat a lot - such performance is only possible due to tricks and culling - it is not a general-purpose 3D engine.  Nor does it look as good as a real-time shaded environment might.

Which is my point.  WebGL + 3D frameworks are usually general-purpose and performant - they are the place a modern-day beginner should start.  Whereas software-emulated-3D approaches are history-book curios with narrow modern-era use cases.  If we're heading into curio then let's be curious