High Performance Rendering With WebGL
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
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"
Vertex Shader is for position
Fragment Shader is for colors
Sorry but you will probably don't use WebGL during your day by day Job...
References
three.js
Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser
Wikipedia
Key Concepts
Camera
Mesh
Mesh = Geometry + Material
PixiJS
Why WebGL?
Really Fast Rendering
Why 2D Contents?
Web Applications
Key Concepts
Application
Ticker
Resource Loader
Thanks!
Feedbacks
