WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming -...
Transcript of WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming -...
![Page 1: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/1.jpg)
WebGL & WebSockets
for 3D Multi-Platform
Multiplayer Gaming
Ashraf Samy Hegab
MultiPlay.io
![Page 2: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/2.jpg)
2
3D Multiplayer Multi-Platform Games
@multiplayio
![Page 3: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/3.jpg)
3
@multiplayio
![Page 4: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/4.jpg)
4
• Going 3D
• WebGL?
• How to draw a cube (source code dive)
• Going Multiplayer
• WebSockets?
• How to move
• Going Multi-platform
• Supporting Tizen
• Supporting iOS, Android, Windows Phone…
Agenda
![Page 5: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/5.jpg)
5
WebGL?
Tizen
Safari
Android
Internet
Explorer
Blackberry Firefox
Ubuntu
Chrome
![Page 6: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/6.jpg)
6
Everything is a triangle
0, 1, 0
1, 1, 0-1, -1, 0
• Vertices
• UVs
• Indices
• Normals
![Page 7: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/7.jpg)
7
How to draw a cube
learningwebgl.com
![Page 8: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/8.jpg)
8
function drawScene()
{
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [x, y, z]);
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute,
cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, crateTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}
![Page 9: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/9.jpg)
9
function drawScene()
{
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [x, y, z]);
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute,
cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, crateTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}
•Setup view
•Position and rotate
•Set buffers
•Set texture
•Draw
![Page 10: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/10.jpg)
10
http://multiplay.io/play
Phone Wars WebGL Demo
![Page 11: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/11.jpg)
11
TODO://
• Collisions
• Loading obj, fbx, 3ds…
• Helper libraries (three.js)
Var BasicBoxCollisionCheck = function(sourceMin, sourceMax, targetMin, targetMax)
{
if( sourceMax[2] >= targetMin[2] && sourceMin[2] <= targetMax[2] )
{
if( sourceMax[0] >= targetMin[0] && sourceMin[0] <= targetMax[0] )
{
if( sourceMax[1] >= targetMin[1] && sourceMin[1] <= targetMax[1] )
{
return true;
}
}
}
};
return false;
};
![Page 12: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/12.jpg)
Going
Multiplayer
![Page 13: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/13.jpg)
13
WebSockets?
• TCP
• Persistent
• Bi-directional
• Not UDPvar exampleSocket = new WebSocket("ws://www.example.com/socketserver",
"protocol");
// On connect
exampleSocket.onopen = function (event) {
exampleSocket.send(“Send a message to the server");
};
// Receive message from server
exampleSocket.onmessage = function (event) {
console.log(event.data);
}
![Page 14: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/14.jpg)
14
WebSockets?
caniuse.com
![Page 15: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/15.jpg)
15
SocketIO
NodeJS
WebGL
App
Popular Web Multiplayer Stack
MongoDB
![Page 16: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/16.jpg)
16
var socket = io.connect( serverURL );
socket.on( 'connected', function (userID)
{
socket.userID = userID;
});
function shootAt(thatDamnUserID)
{
socket.emit( 'shoot', thatDamnUserID );
}
How do I shoot? - Client
![Page 17: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/17.jpg)
17
var sockets = [];
var io = socketio.listen( port );
io.sockets.on( 'connection', function (socket)
{
sockets.push( socket );
var userID = nextUserID++;
socket.emit( 'connected', userID );
socket.on( 'shoot', function (atUserID) )
{
for( var i=0; i<sockets.length; ++i )
{
sockets[i].emit( 'shoot', userID, atUserID );
}
};
});
How do I shoot? - Server
![Page 18: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/18.jpg)
18
http://multiplay.io/play
Multiplayer Demo
![Page 19: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/19.jpg)
19
TODO://
• Server side validation
• Load balancing
• Latency hacks
![Page 20: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/20.jpg)
Going Multi-platform
![Page 21: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/21.jpg)
21
Supporting Tizen
• <access origin="*"/>
• xhr.state === 0
• Disable Android File Transfer app
• Simulator fast
• Emulator slow but accurate
• Use circular icons
![Page 22: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/22.jpg)
22
HTML5 - IndexedDB
• 50mb+
• Is Slow
• Use a priority queue for your requests
• Timestamps lets you know which files to delete
var transaction = db.transaction( "cache", 'readwrite' );
var objectStore = transaction.objectStore( "cache" );
// Get an item via it's key
var index = objectStore.index( "key" );
var request = index.get( key );
request.onsuccess = function(event)
{
var item = event.target.result;
};
![Page 23: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/23.jpg)
23
HTML5 - WebWorkers
• Is Awesome!
• json.async (https://github.com/ashcairo/json.async)
• Separate file, use inline webworker
var blob = new Blob([
"self.addEventListener( 'message', function (e) { \
var json = JSON.parse( e.data ); \
self.postMessage( json ); \
self.close(); \
}, false );"]);
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL( blob );
var worker = new Worker( blobURL );
![Page 24: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/24.jpg)
24
Supporting HTML5 Platforms
• WebGL
• mediump precision most compatible
• IndexedDB
• Some devices require use of setVersion
• Some devices fail on use of setVersion
• Be ready to fallback to localStorage (~5mb)
![Page 25: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/25.jpg)
25
Supporting iOS, Android, Windows Phone
• OpenGL
• Direct3D
• C++
• Java
• Objective C
• C#
• But it’s possible!
![Page 26: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/26.jpg)
26
Framework JavaScript AppDevice
Renderer
Android
Renderer
iOS
Renderer
Engine
App
JavaScript Proxy
WebView
Proxy
Renderer
Windows
Renderer
Supporting iOS, Android, Windows Phone
![Page 27: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/27.jpg)
Eval( isEvil )?
![Page 28: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/28.jpg)
28
Real-time creation of games
Presenting and demoing
24th July 2013 Anaheim, California
@multiplayio
![Page 30: WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - …download.tizen.org/misc/media/conference2013/slides/TDC2013-We… · var socket = io.connect( serverURL ); socket.on(](https://reader036.fdocuments.us/reader036/viewer/2022062605/5fcec5f819643074f604ba15/html5/thumbnails/30.jpg)