Kunshan University - Multimedia workshop - Taïwan 2024

Nine hours multimedia class with 10-15 design students from the Visual Communication and Design department.

This Workshop focus on creative interactive artworks using cables.gl framework

Create an account in https://cables.gl/
Log-in, and join Team Kunshan VCD (-> "request acces")

(beta !) standalone version for Windows PC / MacOS / Linux here : https://cables.gl/downloads

Cables?

- Cables.gl is developed by Undev studio

- Undev is a studio based in berlin (Germany), that create interactive experiences using modern web technologies (WebGl, WebGPU, Web Audio, WebXR, classic html...)

Workshop Program

day

10/06

11/06

12/06

Class exercices

- Introduction

- Display contents

- Multi scenes

- Materials

- Camera texture

- Displacement

- Image Compose

- MeshInstancer

- RenderToTexture

Vocabulary

- Patch : A program made with cables.gl

- Node Editor : Graph where user connect boxes with cable

- Op / Operator : A box that have a FUNCTION (written in javascript)

- Input Port : Store data, and can receive from any other output port

- Output Port : return data, and can send it to any other Input port

- Parameters : Different values of the data for Op's (ex: color RGB = "255,0,0" Translate XYZ = "0,0,20")

- Canvas : The screen where we Render / Display the visual

- Number : Data type based on a value (Integer / float)

- Boolean : Data type based on 2 state : TRUE or FALSE

- String : Data type based on a character : "a" , "abc" ... etc

- Array : Data type based on a list of values : "1 , 2 , 3"

- Object : Data type based on a javascript object (Json/ Texture / Audio ...)

Class exercises

Team Kunshan VCD

Online Tutorials

Official Tutorial

Decode Tutorial

Random Cool and Useful Ops to try:

RenderToTexture

TextureProjection

RandomCluster

meshInstancier

surfaceScatter

ArrayGetTexture

vertexWobble

ScaleByNormals

pointSphereRandom

AreaoDiscardPixel

Texture coordinate grid

heightmap

displacement

areaScaler

InstancedDisplacementMap

SortArray3ByDistance

characterRotate

twistmesh

ScreenPosTo3d

SimpleSpline

SplineMesh

SplineDeform

ArrayPathFollowParticles

ExplodeDividedMesh

Made with cables.gl

- Check some projects made with cables here

- Check a collection of Nice demo made in cables here

Nike - The Art Of Touch - AKQA Studios

See MFX Azura Real time animation demo: https://mfx.drastic.net/view/asura/

Free Online Ressources and links

3d models:

https://3dviewer.net/ online .glb 3dModel file viewer

https://sketchfab.com/ 3d models online ressource (incorporated into Zapworks studio)

https://labs.sketchfab.com/sculptfab/ App to sketch 3d sculpture online

https://www.mixamo.com/ Lots of character animation free to download

Images:

https://www.pngwing.com/ free transparent png files

https://www.freepik.com/ free vector and .psd files

Video:

https://www.pexels.com/ Download royalty free animations .mp4

https://www.onlinevideoconverter.com/ Download and convert many video online from youtube etc

https://video.online-convert.com/ Convert all files online

Sound:

https://freesound.org/ Download many free sounds

Fonts:

https://www.dafont.com/