Half-Life inspired scene (and how I made it happen)

Showcase
1

Hey guys,

I’ve been working on this scene for a while. Here it is: https://oguzeroglu.github.io/ROYGBIV/demo/villeneuvedascq2/application.html

This scene works at 60 FPS for both mobile and desktop devices (I’ve tested with my MacBook Air, Samsung and iPhone). Here are some optimization techniques I’ve used to make that happen:

  • Textures are packed & compressed to KTX format. Here’s the packed texture for this scene:

    textureAtlas
    textureAtlas512×512 235 KB

  • I’ve written a Quake style shadow baker (light maps). This technique casts a ray from given surface to light position to check if there are any blocking objects. Then writes results to a texture. All the shadow textures are then packed & compressed again. Here’s the shadow texture for this scene:

    shadowAtlas
    shadowAtlas512×512 9.82 KB

    Note that this does not happen in real time and is a pre-computed process. I’m not using Three.js Raycaster. I’ve written another one optimized for my engine. I think I also posted the library here which finds nearby objects in constant time. I’m using that library for efficiency: http://github.com/oguzeroglu/nearby. I also do this in WebWorkers to keep the page responsive since this process takes couple of hours.

  • All rooms are merged -> Each room is a single mesh. I also defined some areas, and which objects should be rendered/should not be rendered in given area.

  • Lights are baked as well. I directly modify the color attribute of meshes. So there’s no light calculations happening in real time.

  • For the color of lambs (a little detail you may notice), I’m using emissive maps & emissive colors.

Feel free to hit me up with feedback & questions. Big love for this community <3

7 Likes
2

Very nice, but where are the head :crab:?

2 Likes
3

hey @oguzeroglu, it looks quite nice. I suggest using blender for things like texture mapping and light baking, it will save you a lot of time, i think. Nevertheless, nooks nice, well done!

4

Thanks! I integrated these features into my game engine so it all happens automatically now. I’d like to keep everything client side. I also learn quite a lot while trying to reinvent the wheel :stuck_out_tongue:

1 Like
5

Update: Now you can walk inside it: https://oguzeroglu.github.io/ROYGBIV/demo/villeneuvedascq2/application.html

3 Likes
6

Controls really well on mobile, nice job! And I love the way it all looks too.

1 Like
7

Nice ! I find the jump a little strange, maybe too slow especially in the descent. You made me want to try your collision solution