Web Video Processing Made Easy

Project Setup

Create the Application

Create a texture from the WebCam

Create the filter shader

const float screenSize = 512.;
vec2 tileUV = floor(gl_FragCoord.xy / gridSize) * gridSize / screenSize;
vec4 tileColor = texture2D(textureSampler, tileUV);
float tileLuminance = getLuminance(tileColor.rgb);
vec4 finalColor = palette[int(tileLuminance * 3. + lumaOffset)];
onGridline(gl_FragCoord.x, gridSize)
return mod(floor(distFrom), spacing) == 0.0;
gl_FragColor = gridLineColor;

That is it!!!

--

--

--

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Accurate Vanilla JS Stopwatch Script

Brew/PHP/Yarn/Node/Laravel ->ERROR: libicuio.64.dylib not found? Try this…

The Yin and Yang of Scala: Any and Nothing

<CODE>NEEDS TO BE PRIORITY !!

How : OAuth2.0 — Sign-in with Google for Client-side (JavaScript) applications.

Understanding Breadth First Tree Traversal with JavaScript

How useReucer() works in React?

Today I’m going to share something about JavaScript. let’s get started

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

More from Medium

How to achieve a 3D panoramic scene with pivoting camera in three js

Working With .STL Files On Three.JS

Quantum Computing with Javascript using Q.js

How to Build A Scalable Scrawler Service With Puppeteer?