Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[JS EXPERIENCE 2018] Jogos em JavaScript com WebGL - Juliana Negreiros, Codeminer42

136 views

Published on

Jogos em JavaScript com WebGL - Juliana Negreiros, Codeminer42

[JS EXPERIENCE 2018] - 5 de julho de 2018 São Paulo/SP

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[JS EXPERIENCE 2018] Jogos em JavaScript com WebGL - Juliana Negreiros, Codeminer42

  1. 1. Jogos em Javascript com WebGL Juliana Negreiros
  2. 2. Juliana Negreiros @juunegreiros
  3. 3. WTF is WebGL?
  4. 4. Web Graphics Library
  5. 5. “Vou usar WebGL para fazer 3D num passe de mágica.”
  6. 6. Padrão nativo presente nos navegadores que permite criar 3Ds interativos.
  7. 7. GLSL (OpenGL Shading Language)
  8. 8. Onde usam?
  9. 9. Assassin’s Creed Pirates
  10. 10. Car Visualizer
  11. 11. Youtube Rewind 2017
  12. 12. Welcome to Hogwarts
  13. 13. Awwwards
  14. 14. E por que é tão legal?
  15. 15. Cross-browser
  16. 16. Inúmeros frameworks
  17. 17. De grátis!!!
  18. 18. Tudo flores então?
  19. 19. Complexo de se usar sozinho
  20. 20. Custoso
  21. 21. Navegador requer aceleração de hardware
  22. 22. E como funciona?
  23. 23. Vertex Shader + Fragment Shader
  24. 24. Os dados utilizados devem ser enviados para a GPU
  25. 25. WebGL altera os estados desses shaders
  26. 26. <canvas id="c"></canvas> <script id="2d-vertex-shader" type="notjs"> attribute vec4 a_position; void main() { gl_Position = a_position; } </script> <script id="2d-fragment-shader" type="notjs"> precision mediump float; void main() { gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple } </script> <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script> <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons- helper.js"></script>
  27. 27. function createShader(gl, type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) { return shader; } console.log(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); } function createProgram(gl, vertexShader, fragmentShader) { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); var success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) { return program; } console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); } function main() { var canvas = document.getElementById("c"); var gl = canvas.getContext("webgl"); if (!gl) { return; } var vertexShaderSource = document.getElementById("2d-vertex-shader").text; var fragmentShaderSource = document.getElementById("2d-fragment-shader").text; var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); var program = createProgram(gl, vertexShader, fragmentShader); var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); var positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var positions = [ 0, 0, 0, 0.5, 0.7, 0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); webglUtils.resizeCanvasToDisplaySize(gl.canvas); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); gl.enableVertexAttribArray(positionAttributeLocation); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var size = 2; var type = gl.FLOAT; var normalize = false; var stride = 0; var offset = 0; gl.vertexAttribPointer( positionAttributeLocation, size, type, normalize, stride, offset) var primitiveType = gl.TRIANGLES; var offset = 0; var count = 3; gl.drawArrays(primitiveType, offset, count); } main();
  28. 28. Escolha sua library favorita!
  29. 29. Elementos básicos
  30. 30. Sistema de Coordenadas 3D
  31. 31. Polígonos const geometry = new THREE.Geometry();
  32. 32. Vértice geometry.vertices.push(new THREE.Vector3( -10, 0, 0) ); geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
  33. 33. Texturas const texture = new THREE.TextureLoader().load( ‘path/textura.jpg’ );
  34. 34. Shader/Geometry const geometry = new THREE.BoxGeometry( 1, 1, 1 );
  35. 35. Shader/Geometry
  36. 36. Material const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  37. 37. Material
  38. 38. Mesh const cube = new THREE.Mesh( geometry, material ); scene.add( cube );
  39. 39. Model
  40. 40. Model
  41. 41. Transformações
  42. 42. Transformações requestAnimationFrame( animate ); cube.rotation.x += 0.021; cube.rotation.y += 0.021; renderer.render( scene, camera );
  43. 43. Cena e Câmera
  44. 44. Cena const scene = new THREE.Scene();
  45. 45. Câmera const camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
  46. 46. Luzes
  47. 47. Luzes const pointLight = new THREE.PointLight (0xFFFFFF); pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; scene.add(pointLight);
  48. 48. Renderizador const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );
  49. 49. E como criar algo de verdade?
  50. 50. Endless Runner: bit.ly/endless-runner
  51. 51. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, sceneWidth / sceneHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); Cena, Camera e Renderizador
  52. 52. const dom = document.getElementById('container'); const scoreText = document.createElement('div'); Elementos no DOM const clock = new THREE.Clock(); Contando o tempo
  53. 53. clock.start(); scene.fog = new THREE.FogExp2(0xf0fff0, 0.14); createScene();
  54. 54. renderer.setSize(sceneWidth, sceneHeight); dom.appendChild(renderer.domElement); createScene();
  55. 55. createTreesPool(treesPool); addWorld(); addHero(); addLight(); addExplosion(); createScene();
  56. 56. camera.position.z = 6.5; camera.position.y = 2.5; window.addEventListener('resize', onWindowResize, false); document.onkeydown = handleKeyDown; createScene();
  57. 57. addHero()
  58. 58. const sphereGeometry = new THREE.DodecahedronGeometry(heroRadius, 1); const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xe5f2f2, shading: THREE.FlatShading, }); addHero();
  59. 59. heroSphere = new THREE.Mesh(sphereGeometry, sphereMaterial); heroSphere.receiveShadow = true; heroSphere.castShadow = true; addHero();
  60. 60. scene.add(heroSphere); heroSphere.position.y = heroBaseY; heroSphere.position.z = 4.8; currentLane = middleLane; heroSphere.position.x = currentLane; addHero();
  61. 61. addLight()
  62. 62. createTreesPool(treesPool)
  63. 63. addWorld()
  64. 64. addExplosion()
  65. 65. Onde publicar?
  66. 66. Poki
  67. 67. WebGl.nu
  68. 68. WebGl.nu
  69. 69. Kongregate
  70. 70. Onde aprender mais?
  71. 71. ⇢WebGL Academy ⇢WebGL Fundamentals ⇢Dev Opera ⇢Aerotwist
  72. 72. Obrigada <3 http://bit.ly/webgl-jogos

×