Jogos em JavaScript com WebGL - Juliana Negreiros, Codeminer42 [JS EXPERIENCE 2018] - 5 de julho de 2018 São Paulo/SP

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. clock.start();
scene.fog = new THREE.FogExp2(0xf0fff0, 0.14);
createScene();

61. renderer.setSize(sceneWidth, sceneHeight);
dom.appendChild(renderer.domElement);
createScene();

62. createTreesPool(treesPool);
addWorld();
addHero();
addLight();
addExplosion();
createScene();

63. camera.position.z = 6.5;
camera.position.y = 2.5;
window.addEventListener('resize',
onWindowResize, false);
document.onkeydown = handleKeyDown;
createScene();

64. addHero()

65. const sphereGeometry = new
THREE.DodecahedronGeometry(heroRadius,
1);
const sphereMaterial = new
THREE.MeshStandardMaterial({
color: 0xe5f2f2,
shading: THREE.FlatShading,
});
addHero();

66. heroSphere = new
THREE.Mesh(sphereGeometry,
sphereMaterial);
heroSphere.receiveShadow = true;
heroSphere.castShadow = true;
addHero();

67. scene.add(heroSphere);
heroSphere.position.y = heroBaseY;
heroSphere.position.z = 4.8;
currentLane = middleLane;
heroSphere.position.x = currentLane;
addHero();

68. addLight()

69. createTreesPool(treesPool)

70. addWorld()

71. addExplosion()

72. Onde publicar?

73. Poki

74. WebGl.nu

75. WebGl.nu

76. Kongregate

77. Onde aprender mais?

78. ⇢WebGL Academy
⇢WebGL Fundamentals
⇢Dev Opera
⇢Aerotwist

79. Obrigada <3
http://bit.ly/webgl-jogos