JSFoo 2020

Lately we are seeing a lot of interactive experiences built using WebGL for landing pages and various marketing website. It has become a replacement for the distinctness Flash used to provide. But before falling for all the snazzy effects and Awwwards showcase, it makes sense to understand what WebGL provides. In this workshop, you will get to implement WebGL in vanilla JS, and see what capabilities it brings to your front-end toolbox.

Outline

Following are the contents of things that will be covered in workshop:

• Graphics on Web - SVG, Canvas2D, WebGL
• WebGL
• Shaders - Vertex and Fragment
• Hello World - Triangles and Gradients
• Lights, Camera, Projection!
• Use case
  • Particle Physics
  • Post-processing
  • Raymarching

Requirements

Laptop with a browser that can run WebGL https://get.webgl.org/
Intermediate experience in JS.

Speaker bio

Samarth comes with 3 years of experience as a UX Engineer at Adobe in their AI and ML team, where he developed web based custom interfaces for various image manipulation and search solutions. Through the role he has worked on all the various ways we can do graphics on the web, and tried different graphic libraries, and also came up with his own custom functionality using vanilla JS. He is currently working as an independent UX consultant and a digital artist. As a consultant he is helping startups adopt user driven development in their workflow, and as a digital artist he does creative coding and generative art on the web. More recently he is exploring WebGL through multiple digital art projects that use video post-processing, ray-marching, and TensorFlowJS Facemesh.

Links

• Post Processing
• • https://background-blur.glitch.me/
• • https://shadergram.glitch.me/lessons/
• Particle Physics / Simulation
• • https://pavel-fluid.glitch.me
• • https://boid-trail.glitch.me/
• Raymarching
• • https://hydra.ojack.xyz/?sketch_id=JqeJdqGEYpFKNG84
• • https://hydra.ojack.xyz/?sketch_id=DKxk8SWQMP6vPZ4B

Slides

https://slides.com/sagulati/webgl