Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

https://slides.com/francescostrazzullo

http://codingjam.it/

http://www.avanscoperta.it/it/training/frameworkless-frontend-workshop/

Contents

WebGL Fundamentals

three.js

PixiJS

Embedded PixiJS

Why?

Interactive Experiences

Really Fast Rendering

WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering 3D graphics within any compatible web browser without the use of plug-ins

Wikipedia

Chrome Experiments - WebGL

WebGL 2.0

In reality WebGL is just a rasterization engine

It's a port of OpenGL ES 2.0 for the web

Every WebGL application is split in two parts

The JS / DOM part

The GLSL Part

OpenGL Shading Language

is a high-level shading language with a syntax based on the C programming language. It was created by the OpenGL ARB (OpenGL Architecture Review Board) to give developers more direct control of the graphics pipeline without having to use ARB assembly language or hardware-specific languages.

Wikipedia

Every GLSL Application is split in two functions

Vertex Shader

Fragment Shader

Together they form a "Program"

Sorry but you will probably don't use WebGL during your day by day Job...

Key Concepts

Camera

View Frustum

Mesh

Mesh = Geometry + Material

Raycaster

Why WebGL?

Really Fast Rendering

Why 2D Contents?

Web Applications

Key Concepts

Application

Ticker

Resource Loader

Thanks!

Feedbacks

https://docs.google.com/forms/d/e/1FAIpQLSfjmsj728FK_O0-Mg0L8n707cuCQkHfObQ-5nY72dPpFFWmmQ/viewform