Jogos em Javascript com WebGL | Games in Javascript with WebGL

- JSExperience 2018 (05/07/2018)

Transcript

1. Jogos em Javascript com WebGL Juliana Negreiros
2. Juliana Negreiros @juunegreiros
3. WTF is WebGL?
5. Web Graphics Library
6. “Vou usar WebGL para fazer 3D num passe de mágica.”
7. Padrão nativo presente nos navegadores que permite criar 3Ds interativos.
9. GLSL (OpenGL Shading Language)
10. Onde usam?
11. Assassin’s Creed Pirates
12. Car Visualizer
13. Youtube Rewind 2017
14. Welcome to Hogwarts
15. Awwwards
16. E por que é tão legal?
17. Cross-browser
18. Inúmeros frameworks
21. De grátis!!!
22. Tudo flores então?
23. Complexo de se usar sozinho
24. Custoso
25. Navegador requer aceleração de hardware
26. E como funciona?
27. Vertex Shader + Fragment Shader
28. Os dados utilizados devem ser enviados para a GPU
29. WebGL altera os estados desses shaders
31. <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>
32. 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();
34. Escolha sua library favorita!
35. Elementos básicos
36. Sistema de Coordenadas 3D
37. Polígonos const geometry = new THREE.Geometry();
38. Vértice geometry.vertices.push(new THREE.Vector3( -10, 0, 0) ); geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
39. Texturas const texture = new THREE.TextureLoader().load( ‘path/textura.jpg’ );
40. Shader/Geometry const geometry = new THREE.BoxGeometry( 1, 1, 1 );
41. Shader/Geometry
42. Material const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
43. Material
44. Mesh const cube = new THREE.Mesh( geometry, material ); scene.add( cube );
45. Model
46. Model
47. Transformações
48. Transformações requestAnimationFrame( animate ); cube.rotation.x += 0.021; cube.rotation.y += 0.021; renderer.render( scene, camera );
49. Cena e Câmera
51. Cena const scene = new THREE.Scene();
52. Câmera const camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
53. Luzes
54. Luzes const pointLight = new THREE.PointLight (0xFFFFFF); pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; scene.add(pointLight);
55. Renderizador const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );
56. E como criar algo de verdade?
57. Endless Runner: bit.ly/endless-runner
58. 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
59. const dom = document.getElementById('container'); const scoreText = document.createElement('div'); Elementos no DOM const clock = new THREE.Clock(); Contando o tempo
60. Endless Runner: bit.ly/endless-runner
61. clock.start(); scene.fog = new THREE.FogExp2(0xf0fff0, 0.14); createScene();
62. renderer.setSize(sceneWidth, sceneHeight); dom.appendChild(renderer.domElement); createScene();
63. createTreesPool(treesPool); addWorld(); addHero(); addLight(); addExplosion(); createScene();
64. Endless Runner: bit.ly/endless-runner
65. camera.position.z = 6.5; camera.position.y = 2.5; window.addEventListener('resize', onWindowResize, false); document.onkeydown = handleKeyDown; createScene();
66. addHero()
67. const sphereGeometry = new THREE.DodecahedronGeometry(heroRadius, 1); const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xe5f2f2, shading: THREE.FlatShading, }); addHero();
68. heroSphere = new THREE.Mesh(sphereGeometry, sphereMaterial); heroSphere.receiveShadow = true; heroSphere.castShadow = true; addHero();
69. scene.add(heroSphere); heroSphere.position.y = heroBaseY; heroSphere.position.z = 4.8; currentLane = middleLane; heroSphere.position.x = currentLane; addHero();
70. Endless Runner: bit.ly/endless-runner
71. addLight()
72. Endless Runner: bit.ly/endless-runner
73. const hemisphereLight = new THREE.HemisphereLight(0xfffafa, 0x000000, 0.9); scene.add(hemisphereLight); addLight();
74. const sun = new THREE.DirectionalLight(0xcdc1c5, 0.9); sun.position.set(12, 6, -7); sun.castShadow = true; scene.add(sun); addLight();
75. sun.shadow.mapSize.width = 256; sun.shadow.mapSize.height = 256; sun.shadow.camera.near = 0.5; sun.shadow.camera.far = 50; addLight();
76. createTreesPool(treesPool)
77. addWorld()
78. addExplosion()
79. Onde publicar?
80. Poki
81. WebGl.nu
82. WebGl.nu
83. Kongregate
84. Onde aprender mais?
85. ⇢ ⇢ ⇢ ⇢
86. Obrigada <3 http://bit.ly/webgl-jogos