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

High Performance Rendering With WebGL

By Francesco Strazzullo

High Performance Rendering With WebGL

  • 349
Loading comments...

More from Francesco Strazzullo