WebGL + WebAudio = Tower Defense

Making Tower Defense on WebGL. Unlike other tutorials, this article shows where and for what to take resources on the example of the finished application.

The ultimate goal is:


')

Formulation of the problem:

• make fast and beautiful
• use ready when possible

Why WebGL? To draw less - in 3D, many things are done simply and look beautiful.

Home page

There are only a few DOM elements on the main page:

• canvas on which the playing field is displayed
• a couple of menu divs

Induce beauty

To output the 3D scene we will use three.js . This is a library with good documentation, examples and lots of ready-made modules. There are translations, for example here.

Scene background

This is skybox, if you use the terminology of three.js. Add a cube, google a 6-sided sky texture under the cube and load it:

var urls = [ './images/skybox_left.jpg', //-x './images/skybox_right.jpg', //+x './images/skybox_down.jpg', //+y './images/skybox_top.jpg', //-y './images/skybox_forward.jpg', //-z './images/skybox_back.jpg' //+z ]; var cubemap = THREE.ImageUtils.loadTextureCube(urls); cubemap.format = THREE.RGBFormat; var shader = THREE.ShaderLib['cube']; shader.uniforms['tCube'].value = cubemap; var SkyBoxMaterial = new THREE.ShaderMaterial({ fragmentShader : shader.fragmentShader, vertexShader : shader.vertexShader, uniforms : shader.uniforms, depthWrite : false, side : THREE.BackSide }); var skybox = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), SkyBoxMaterial); scene.add(skybox); 

Playing field

As a field, we use the usual cube stretched along the X and Z axes. For liveliness, add a mirror to the surface from here .

Other objects

Laser beam and flashes - from here , font - from here , menu icons - Flaticons .
It is desirable to make the balls shiny (material with the shine property of about 500-600), the crystals will be illuminated with a laser and can remain dull.

Control

To handle the mouse you can use OrbitControls which comes in the standard three.js libraries. It connects with just one line.

 trackballControls = new THREE.OrbitControls(camera, renderer.domElement); 

And does not require additional configuration.

Sound

For background sound, you can cut a piece from any free-sound mix on Soundcloud and connect it in HTML code

 <audio id="audiopl" autoplaynope="true" loop="true" > <source src="./sounds/deejokeethedeepline_-_synth_x_pop_rip.mp3" type="audio/mpeg" > 

With the sounds of shots and explosions, it is somewhat more complicated, they will have to be played approximately like this.

 function playSound(buffer) { var source = webAudioContext.createBufferSource(); source.buffer = buffer; source.connect(webAudioContext.destination); source.start(0); } 

The sounds themselves can be easily picked up at one of the wave-archives, for example Freesound .

State storage

For local storage of settings, etc., you can use window.localStorage.getItem (name) and window.localStorage.setItem (name, textvalue). In the example, they are used to adjust the sound.

Gameplay video

Try running in a browser

http://molgav.nn.ru/crystallit22old/
source code can be viewed there.
On phones, the toy starts, but requires additional optimization.

Shl. Who will reach level 20?