WebGL & WebSocketsfor 3D Multi-PlatformMultiplayer GamingAshraf Samy HegabMultiPlay.io
23D Multiplayer Multi-Platform Games@multiplayio
3@multiplayio
4• Going 3D• WebGL?• How to draw a cube (source code dive)• Going Multiplayer• WebSockets?• How to move• Going Multi-platf...
5WebGL?TizenSafariAndroidInternetExplorerBlackberry FirefoxUbuntuChrome
6How to draw a cubelearningwebgl.com
7function drawScene(){gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFE...
8function drawScene(){gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFE...
9http://multiplay.io/playPhone Wars WebGL Demo
GoingMultiplayer
11WebSockets?• TCP• Persistent• Bi-directional• Not UDPvar exampleSocket = new WebSocket("ws://www.example.com/socketserve...
12WebSockets?caniuse.com
13SocketIONodeJSWebGLAppPopular Web Multiplayer StackMongoDB
14var socket = io.connect( serverURL );socket.on( connected, function (userID){socket.userID = userID;});function shootAt(...
15var sockets = [];var io = socketio.listen( port );io.sockets.on( connection, function (socket){sockets.push( socket );va...
16http://multiplay.io/playMultiplayer Demo
Going Multi-platform
18Supporting Tizen• <access origin="*"/>• xhr.state === 0• Disable Android File Transfer app• Simulator fast• Emulator slo...
19HTML5 - IndexedDB• 50mb+• Is Slow• Use a priority queue for your requests• Timestamps lets you know which files to delet...
20HTML5 - WebWorkers• Is Awesome!• json.async (https://github.com/ashcairo/json.async)• Separate file, use inline webworke...
21Supporting HTML5 Platforms• WebGL• mediump precision most compatible• IndexedDB• Some devices require use of setVersion•...
22Supporting iOS, Android, Windows Phone• OpenGL• Direct3D• C++• Java• Objective C• C#• But it’s possible!
23Framework JavaScript AppDeviceRendererAndroidRendereriOSRendererEngineAppJavaScript ProxyWebViewProxyRendererWindowsRend...
Eval( isEvil )?
25Real-time creation of gamesPresenting and demoing24th July 2013 Anaheim, California@multiplayio
ash@multiplay.iohttp://multiplay.io
TDC 2013 - WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming
Upcoming SlideShare
Loading in...5
×

TDC 2013 - WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming

1,959

Published on

Slides used for the Tizen Developer Conference 2013 session on 3d multiplayer gaming.
Excludes source code walkthroughs and demos presented in the talk.
More info: http://multiplay.io

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,959
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

TDC 2013 - WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming

  1. 1. WebGL & WebSocketsfor 3D Multi-PlatformMultiplayer GamingAshraf Samy HegabMultiPlay.io
  2. 2. 23D Multiplayer Multi-Platform Games@multiplayio
  3. 3. 3@multiplayio
  4. 4. 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
  5. 5. 5WebGL?TizenSafariAndroidInternetExplorerBlackberry FirefoxUbuntuChrome
  6. 6. 6How to draw a cubelearningwebgl.com
  7. 7. 7function 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);}
  8. 8. 8function 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
  9. 9. 9http://multiplay.io/playPhone Wars WebGL Demo
  10. 10. GoingMultiplayer
  11. 11. 11WebSockets?• TCP• Persistent• Bi-directional• Not UDPvar exampleSocket = new WebSocket("ws://www.example.com/socketserver","protocol");// On connectexampleSocket.onopen = function (event) {exampleSocket.send(“Send a message to the server");};// Receive message from serverexampleSocket.onmessage = function (event) {console.log(event.data);}
  12. 12. 12WebSockets?caniuse.com
  13. 13. 13SocketIONodeJSWebGLAppPopular Web Multiplayer StackMongoDB
  14. 14. 14var socket = io.connect( serverURL );socket.on( connected, function (userID){socket.userID = userID;});function shootAt(thatDamnUserID){socket.emit( shoot, thatDamnUserID );}How do I shoot? - Client
  15. 15. 15var 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
  16. 16. 16http://multiplay.io/playMultiplayer Demo
  17. 17. Going Multi-platform
  18. 18. 18Supporting Tizen• <access origin="*"/>• xhr.state === 0• Disable Android File Transfer app• Simulator fast• Emulator slow but accurate
  19. 19. 19HTML5 - IndexedDB• 50mb+• Is Slow• Use a priority queue for your requests• Timestamps lets you know which files to deletevar transaction = db.transaction( "cache", readwrite );var objectStore = transaction.objectStore( "cache" );// Get an item via its keyvar index = objectStore.index( "key" );var request = index.get( key );request.onsuccess = function(event){var item = event.target.result;};
  20. 20. 20HTML5 - WebWorkers• Is Awesome!• json.async (https://github.com/ashcairo/json.async)• Separate file, use inline webworkervar 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 );
  21. 21. 21Supporting 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)
  22. 22. 22Supporting iOS, Android, Windows Phone• OpenGL• Direct3D• C++• Java• Objective C• C#• But it’s possible!
  23. 23. 23Framework JavaScript AppDeviceRendererAndroidRendereriOSRendererEngineAppJavaScript ProxyWebViewProxyRendererWindowsRendererSupporting iOS, Android, Windows Phone
  24. 24. Eval( isEvil )?
  25. 25. 25Real-time creation of gamesPresenting and demoing24th July 2013 Anaheim, California@multiplayio
  26. 26. ash@multiplay.iohttp://multiplay.io
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×