WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - - PowerPoint PPT Presentation

▶
webgl websockets
SMART_READER_LITE
LIVE PREVIEW

WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming - - PowerPoint PPT Presentation

Jan 06, 2024 638 likes •954 views

WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming Ashraf Samy Hegab MultiPlay.io 3D Multiplayer Multi-Platform Games @multiplayio 2 @multiplayio 3 Agenda Going 3D WebGL? How to draw a cube (source code dive)

slide-1
SLIDE 1

WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming

Ashraf Samy Hegab MultiPlay.io

slide-2
SLIDE 2

2

3D Multiplayer Multi-Platform Games

@multiplayio

slide-3
SLIDE 3

3

@multiplayio

slide-4
SLIDE 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

slide-5
SLIDE 5

5

WebGL?

Tizen

Safari Android

Internet Explorer

Blackberry Firefox

Ubuntu

Chrome

slide-6
SLIDE 6

6

Everything is a triangle

0, 1, 0 1, 1, 0

  • 1, -1, 0
  • Vertices
  • UVs
  • Indices
  • Normals
slide-7
SLIDE 7

7

How to draw a cube learningwebgl.com

slide-8
SLIDE 8

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); }

slide-9
SLIDE 9

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
slide-10
SLIDE 10

10

http://multiplay.io/play

Phone Wars WebGL Demo

slide-11
SLIDE 11

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; };

slide-12
SLIDE 12

Going Multiplayer

slide-13
SLIDE 13

13

WebSockets?

  • TCP
  • Persistent
  • Bi-directional
  • Not UDP

var 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); }

slide-14
SLIDE 14

14

WebSockets? caniuse.com

slide-15
SLIDE 15

15

SocketIO NodeJS WebGL App

Popular Web Multiplayer Stack

MongoDB

slide-16
SLIDE 16

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

slide-17
SLIDE 17

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

slide-18
SLIDE 18

18

http://multiplay.io/play

Multiplayer Demo

slide-19
SLIDE 19

19

TODO://

  • Server side validation
  • Load balancing
  • Latency hacks
slide-20
SLIDE 20

Going Multi-platform

slide-21
SLIDE 21

21

Supporting Tizen

  • <access origin="*"/>
  • xhr.state === 0
  • Disable Android File Transfer app
  • Simulator fast
  • Emulator slow but accurate
  • Use circular icons
slide-22
SLIDE 22

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; };

slide-23
SLIDE 23

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 );

slide-24
SLIDE 24

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)
slide-25
SLIDE 25

25

Supporting iOS, Android, Windows Phone

  • OpenGL
  • Direct3D
  • C++
  • Java
  • Objective C
  • C#
  • But it’s possible!
slide-26
SLIDE 26

26

Framework JavaScript App Device

Renderer Android Renderer iOS Renderer Engine App

JavaScript Proxy

WebView Proxy Renderer Windows Renderer

Supporting iOS, Android, Windows Phone

slide-27
SLIDE 27

Eval( isEvil )?

slide-28
SLIDE 28

28

Real-time creation of games

Presenting and demoing 24th July 2013 Anaheim, California

@multiplayio

slide-29
SLIDE 29

ash@multiplay.io http://multiplay.io

slide-30
SLIDE 30