Lan & Anna

Overview

We're all stuck at home, but we still want to learn about shaders together. That's why we (Anna & Lan) made "Bloop". It’s a multi-user online coding environment for collaboratively making GLSL shaders on a blob geometry, made with Socket.io and Three.js.

This workshop introduces a high-level explanation of socket.io, shows how it can interact with Three.js, and asks us all to write one big collaborative, improvised shader together on "Bloop".

Video preview of the user interface and interaction

Video preview of the user interface and interaction

Learning outcomes

1. Understand the basics of socket.io
2. See how socket.io can interact with Three.js to create a collaborative shading editor
3. Create a GLSL fragment shader that everyone in the class contributes to

Questions

• What is socket.io?
• How is socket.io different from WebSocket API?
• How does this app use socket.io, Three.js, and GLSL together?
• What do we make if everyone contributes to a single piece of code?

Schedule

Untitled Database

Materials

Computer and internet.

Source File

lanzhang76/bloop_shader_app