By VISY - ""In the country of the blind, the one-eyed man is king""
-
Upload
tbxtbx -
Category
Technology
-
view
1.747 -
download
2
description
Transcript of By VISY - ""In the country of the blind, the one-eyed man is king""
![Page 1: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/1.jpg)
"In the country of the blind, the one-eyed man is king"
Visa-Valtteri “visy” Pimiä
or how fumbling my way through pixel-based effects made learning WebGL a lot easier
![Page 2: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/2.jpg)
My history with pixel-based visuals
Started doing simple effects with QBASICWorked my way to Turbo Pascal and VGA programmingGot sidetracked to NES and Atari 2600 developmentLearned OpenGL mostly professionally, then started using GPU-accelerated graphics
![Page 3: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/3.jpg)
But why talk about something whenI can just speedcode here :-)
Processing makes it possible
![Page 4: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/4.jpg)
Coding pixel-based effects
Access the screen through a framebuffer, an array of pixel color values, palette index values or bitplane togglesSet pixel color values according to position, time, function value etc.
![Page 5: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/5.jpg)
Proprietary “engines”
I started making small games and demo-style little programsEverything was always coded for one single production, with no mind put into reusability of the toolsThis got old pretty quickly and I found myself toying with the idea of a visual editor for demos
![Page 6: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/6.jpg)
First: S.P.L.I.F
Trilobit ScriPtable Lua Interactive MultiplatForm Tackles a multitude of problems I had with development:
Inherently multiplatform (OSX, Win32, Linux) because all the GL calls are coded with Lua.All visual code is reloadable without relaunching or recompiling the programThe demo player is seekable and supports setting sync points “The demo is the editor”Always open source
![Page 7: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/7.jpg)
Syncing
Timeline file millisecond syncing of demo partsFFT beat sync for effectsSeeking for testing
![Page 8: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/8.jpg)
S.P.L.I.F has flaws
Fixed OpenGL version, upgrading would require recompiling the Lua libraries for all the three platformsNo shader supportTerrible hacks for texture handlingThe OpenGL / Lua bound version I used was found to be rather incomplete
![Page 9: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/9.jpg)
But it worked well enough
Counter Intelligence Program by Bilotrip
![Page 10: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/10.jpg)
Need for an upgrade
After I heard about WebGL I got the idea of doing something like S.P.L.I.F in the browser with easily reloadable and tweakable visualsWebGL has shaders, so the natural choice was to enable the editing of shader parameters (in addition for JavaScript variables) realtime
![Page 11: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/11.jpg)
Technology behind DarumaGL
WebGL canvas for the outputPure JavaScript + HTML5 + CSS3 for the UITextures loaded from PNG filesHTML5 audio from OGG fileTimeline.js used for the keyframe editor
![Page 12: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/12.jpg)
Demonstration of the DarumaGL editor
http://www.low.fi/~visy/webgl/iloinen_paiva/
![Page 13: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/13.jpg)
…and it has flaws as well
No real timeline dumping (cut & paste from export windows)Shader code still requires reloading of the pageHTML5 audio support is still rather flaky cross browsers, and require some time to matureNo cross-browser FFT support for sound analysisWebGL is still not available for mobile browsers or Internet Explorer
![Page 14: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/14.jpg)
But…
WebGL _is_ a W3 standard, and pretty much all major browser except Internet Explorer have support for it in development roadmapsNo plugins required anymore for GPU accelerated content and complex video/audio data processing and playback
No third party components required
![Page 15: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/15.jpg)
Lessons learned from pixel effects
Pixel shaders are pretty similar to framebuffers in many waysCan set single resolution independent fragments instead of toggling actual pixels on the screenMany fragments are calculated concurrently on the GPU, so the shader program is run in parallel.
![Page 16: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/16.jpg)
Some things of note
I tend to avoid calculating complex geometries and like to play around with fragments on a single quadComplex blending and processing passes possible with the GPU -> enables effects that are just simply impossible to do on a framebuffer with a fast FPS
![Page 17: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/17.jpg)
Demonstration
MKULTRA by Bilotriphttp://www.low.fi/~visy/webgl/mkultra/
![Page 18: By VISY - ""In the country of the blind, the one-eyed man is king""](https://reader035.fdocuments.in/reader035/viewer/2022073116/545c51f0b0af9f12318b47a6/html5/thumbnails/18.jpg)
Thank you for listening!