Jump to content

Pixi Raycaster


Recommended Posts

You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).


The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.


Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation :D). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition ;)


(should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...