stackgl / gl-modules.github.io

modules.gl website
modules.gl
MIT License
9 stars 1 forks source link

Workshopper tutorials #2

Open mikolalysenko opened 10 years ago

mikolalysenko commented 10 years ago

Had a conversation with @chrisdickinson on irc about this last night (incoming wall of text):

16:31 -!- Irssi: #stackvm: Total of 123 nicks [0 ops, 0 halfops, 0 voices, 123 normal]
16:31 -!- Channel #stackvm created Wed Mar 17 19:02:18 2010
16:32 -!- Irssi: Join to #stackvm was synced in 31 secs
16:34 -!- thlorenz [~thlorenz@cpe-68-173-97-224.nyc.res.rr.com] has quit [Remote host closed the connection]
16:35 -!- wolfeidau [~wolfeidau@59.167.66.200] has quit [Remote host closed the connection]
16:35 -!- tilgovi [~randall@couchdb/committer/tilgovi] has joined #stackvm
16:37 -!- kevino80 [~kevino80@199.16.190.194] has quit [Remote host closed the connection]
16:37 -!- eugeneware [~eugenewar@50-0-241-195.dedicated.static.sonic.net] has joined #stackvm
16:44 < mikolalysenko> rvagg: I want to get started on building a workshopper for glslify/gl-modules
16:45 < mikolalysenko> do you have any recommendations on how to get workshopper running within a browser window?
16:45 < mikolalysenko> ie, is there some sort of in browser testing harness that works nicely with workshopper?
16:45 -!- dominictarr [~dominicta@119.224.43.39] has joined #stackvm
16:47 < rowbit1> Hourly usage stats: [free: 24]
16:49 < dominictarr> substack, ogd hey anyone want to ride bikes to mexico after nodeconf?
16:52 -!- tilgovi_ [~randall@couchdb/committer/tilgovi] has joined #stackvm
16:53 -!- tilgovi [~randall@couchdb/committer/tilgovi] has quit [Ping timeout: 240 seconds]
16:54 -!- phated_ [~phated@72.44.240.228] has joined #stackvm
16:54 -!- djcoin [~djcoin@ip-203.net-82-216-143.rev.numericable.fr] has quit [Quit: WeeChat 0.4.2]
16:57 -!- phated_ is now known as phated
17:03 -!- kummer [~kummer@195.88.191.22] has quit [Ping timeout: 252 seconds]
17:09 -!- wolfeidau [~wolfeidau@59.167.66.200] has joined #stackvm
17:09 < chrisdickinson> mikolalysenko: i'd like to help with that process
17:09 -!- ednapiranha [~ednapiran@206.169.237.178] has quit [Remote host closed the connection]
17:10 < chrisdickinson> are you thinking that the workshop would operate entirely in browser?
17:11 < chrisdickinson> (i.e., no CLI outside of "start running the workshopper!")
17:13 < chrisdickinson> or would it be a mixed mode -- where verify pops open a browser window with your code and runs a canvas-verify module of some sort?
17:13 -!- phated [~phated@72.44.240.228] has quit [Remote host closed the connection]
17:15 -!- toddself [~toddself@f4ts07i01.advancemags.com] has quit [Remote host closed the connection]
17:18 -!- ednapiranha [~ednapiran@206.169.237.178] has joined #stackvm
17:18 < mikolalysenko> chrisdickinson: I'm open to ideas
17:18 < mikolalysenko> chrisdickinson: I was thinking about something kind of like a beefy interface
17:19 < mikolalysenko> though maybe it could be integrated into a webpage and hosted on modules.gl
17:19 < mikolalysenko> (also I need to revisit the dns hosting records for that and somehow get it working on gh-pages)
17:19 < chrisdickinson> i was thinking along the beefy lines too -- i.e., `gl-workshopper verify program.js` would run beefy and pop open a window
17:19 < mikolalysenko> yeah
17:20 < chrisdickinson> and the verification bits would be "render into this offscreen canvas at a known h/w", perhaps, and compare
17:20 < mikolalysenko> right, though it might be fun to have it draw some stuff to the browser window
17:20 < mikolalysenko> so people could see the effects of their code
17:20 < chrisdickinson> oh yeah
17:20 < chrisdickinson> maybe have it mirror the commands to both somehow?
17:20 < chrisdickinson> or only do the offscreen drawing on verify?
17:20 < mikolalysenko> that could be neat
17:21 < mikolalysenko> so I'm kind of two minds on the issue
17:21 < mikolalysenko> on the one hand, editing text files in a browser sucks
17:21 < mikolalysenko> and so it is better to let people just do that stuff using whatever system they like on their local computer
17:21 < mikolalysenko> especially so they can save and review their progress
17:22 < mikolalysenko> on the other hand though, it would be nice to have an in browser tutorial of some form
17:22 < mikolalysenko> that could also work as a way to introduce people to glslify etc.
17:22  * chrisdickinson nods
17:22 < mikolalysenko> since you could just run some of the early examples in a page
17:22 -!- phated [~phated@72.44.240.228] has joined #stackvm
17:22 < chrisdickinson> what about using something like exterminate?
17:22 < mikolalysenko> hmm, how does that work?
17:23 < chrisdickinson> where the workshopper runs entirely in browser, but the default interface is just a shell
17:23 < chrisdickinson> that way verify could just plop iframes into the current window running the code
17:23 < mikolalysenko> ah, I see
17:23 < mikolalysenko> that could be really cool
17:24 < chrisdickinson> the one downside i can see is that it distances folks from "how do i run this code"
17:24 < mikolalysenko> yeah...
17:24 < mikolalysenko> maybe simpler is better here
17:24 < mikolalysenko> just have them run the workshopper, it pops up a window and draws some stuff
17:24 < mikolalysenko> the results get read back from a local server
17:25 < mikolalysenko> at least it gives us something to work from
17:25  * chrisdickinson nods
17:25 < mikolalysenko> and if the test cases are written against a generic interface, the rest of the details shouldn't matter too much if we change them
17:25 < mikolalysenko> the other issue is the order in which to present the material
17:25 < chrisdickinson> the bit that would be neat is to have (at the end of this) a way to test glslify modules
17:26 < mikolalysenko> yeah
17:26 < mikolalysenko> exactly what I was thinking
17:26 < mikolalysenko> basically first do a set of lessons that just introduce glsl/glslify
17:26 < mikolalysenko> starting from basic syntax and types, etc.
17:26 < mikolalysenko> then writing fragment -> vertex shaders -> using modules
17:27 < mikolalysenko> once that is done, then introduce the webgl modules
17:27  * chrisdickinson nods
17:27 < chrisdickinson> "here's how you draw a triangle"
17:27 < chrisdickinson> should we grab prior art from nehe, perhaps?
17:28 < mikolalysenko> nah, not sure if nehe is a great idea
17:28 < chrisdickinson> well, to rephrase: borrow the progression of lessons from nehe
17:28 < mikolalysenko> not really a huge fan of that, I think nehe follows gl1.0 too closely and goes off into the weeds pretty quickly
17:29 < mikolalysenko> probably a saner progression is to start with shaders and related syntax, introduce buffers and basic drawing commands, then move onto textures, fbos, etc.
17:29 < mikolalysenko> just focus on explaining the capabilities of the drawing api before getting into 3d matrix math
17:29 -!- maksimlin [~chatzilla@168.186.239.130] has joined #stackvm
17:29 < chrisdickinson> interesting
17:29 -!- collypops [~collypops@202.6.74.6] has joined #stackvm
17:30 -!- wolfeida_ [~wolfeidau@59.167.66.148] has joined #stackvm
17:30 < chrisdickinson> i.e., start with fragment shaders, then vertex, then drawing commands?
17:30 < mikolalysenko> yep
17:30 -!- ednapiranha [~ednapiran@206.169.237.178] has quit [Remote host closed the connection]
17:30 < chrisdickinson> sounds good
17:30 < chrisdickinson> gets people drawing things immediately
17:30 < mikolalysenko> make sure everyone understands basic 2d drawing 100% before introducing 3d concepts
17:30 < mikolalysenko> yeah
17:30 < mikolalysenko> since really before you can understand 3d you need to understand all the basics first
17:30 < chrisdickinson> and sets up fragment shaders as "this is how you draw onto a surface"
17:31 < mikolalysenko> yeah, or more to the point think of fragment shader as tiny programs that run on the gpu
17:31  * chrisdickinson nods
17:31 < mikolalysenko> it is also good to get used to the weirdness of shaders right away
17:31 < mikolalysenko> the main sticking point is that all computations in shaders are finite
17:31 < mikolalysenko> so no loops and no dynamic memory
17:31 < chrisdickinson> it might be good to have a glsl linter module by then
17:31 < chrisdickinson> so we can give folks intelligent feedback
17:31 < mikolalysenko> once you understand that and get used to the syntax it is easy to compute with them
17:32 < mikolalysenko> a linter could be nice, but maybe lower priority
17:32 < chrisdickinson> (since you can loop, but you have to be looping up to a constant)
17:32 < mikolalysenko> right
17:32 < mikolalysenko> all loops must terminate in glsl
17:33 < mikolalysenko> same with recursion and so on
17:33 -!- wolfeidau [~wolfeidau@59.167.66.200] has quit [Ping timeout: 240 seconds]
17:34 < mikolalysenko> I think if you just stick to glsl you can introduce all the basic stuff, like the different types, texture memory, and possibly even basic gpgpu stuff

17:34 < substack> I think agda or coq is the same way
17:34 < mikolalysenko> like the final exercise for glslify could be to implement a gpu based game of life or similar cellular automata
17:34 < substack> enforcing non-halting behavior
17:35 -!- phated [~phated@72.44.240.228] has quit [Remote host closed the connection]
17:35 < chrisdickinson> hmm
17:36 < chrisdickinson> i think a lot of it should be in glsl, but it'd be desirable to move out of it after about 2-3 lessons and show how things are wired up at the js level
17:36 < mikolalysenko> eventually yes
17:36 < chrisdickinson> it'd be cool for the final lesson to be wiring up your own voxel clone :)
17:36 < mikolalysenko> but I think learning how to use things before learning how to wire them up might be easier
17:37 < mikolalysenko> since you only have to learn one thing at a time instead of two
17:38 -!- phated [~phated@72.44.240.228] has joined #stackvm
17:38 < mikolalysenko> by the end of the glslify workshop, they should have a basic enough understanding to create stuff on shader toy for example
17:38 < mikolalysenko> or at least get some crude examples working
17:41  * substack built an implicit surface solver once in glsl using macros >:D
17:41 < substack> still on github but I would be hard-pressed to find it
17:43 < substack> mikolalysenko: hah when I search "implicit surface" something you made is #1 in the results
17:44 < mikolalysenko> substack: haha
17:44 -!- wolfeida_ [~wolfeidau@59.167.66.148] has quit [Remote host closed the connection]
17:45 < mikolalysenko> I just tried it, but #1 is some irrelevant thing
17:45 -!- wolfeidau [~wolfeidau@59.167.66.148] has joined #stackvm
17:46 -!- toddself [~toddself@69.2.120.65] has joined #stackvm
17:46 -!- wolfeidau [~wolfeidau@59.167.66.148] has quit [Remote host closed the connection]
17:47 < rowbit1> Hourly usage stats: [free: 31]
17:53 -!- phated [~phated@72.44.240.228] has quit [Remote host closed the connection]
17:54 -!- wolfeidau [~wolfeidau@59.167.66.200] has joined #stackvm
17:56 < mikolalysenko> chrisdickinson: so thinking about glslify from the perspective of glsl first, it might be fun to have students first do a full set of glsl activities, then in the second part go through and hook up their solutions
                       to handle all the webgl plumbing
17:56 < mikolalysenko> like part 1 = glslify tutorial, just write shaders
17:56 < mikolalysenko> and part 2 = take stuff from part 1 and glue it all together
17:56 -!- ednapiranha [~ednapiran@c-50-139-70-246.hsd1.or.comcast.net] has joined #stackvm
17:57 < chrisdickinson> that would be neat
17:57 < mikolalysenko> that way they would only have to debug one thing at a time as they are writing their code
17:58 < chrisdickinson> i think one thing i liked about nehe (from way, way, *way* back) was that often the lessons were springboards for things i wanted to build anyway
17:58 < chrisdickinson> in particular "here's how you do fps controls" was pretty rad
17:58 < chrisdickinson> but having a few of those mixed into the latter workshop would be grand, and i think it would get people excited to take what they learned and build on it
17:58 < mikolalysenko> yeah
17:58 < mikolalysenko> I think somewhere in there we have to talk about clip coordinates
17:58 < chrisdickinson> re: the glslify tutorial, how would you go about integrating the vertex shader?
17:59 < mikolalysenko> just have them write two shaders
17:59 < chrisdickinson> ah, cool
17:59 < mikolalysenko> it might also be the right time to bring in clipping/transformations
17:59 < mikolalysenko> vertex shaders also introduce the concept of attributes and varying variables
17:59 < chrisdickinson> yep
18:00 -!- ircretary [~ircretary@165.225.132.207] has quit [Remote host closed the connection]
18:00 < mikolalysenko> so they should come *after* fragment shaders
18:00 -!- ircretary [~ircretary@165.225.132.207] has joined #stackvm
18:00 < chrisdickinson> i haven't really done a lot of interesting things with vertex shaders, tbh
18:00 < mikolalysenko> well, you can use them reduce some computations in fragment shaders
18:00  * chrisdickinson nods
18:01 < mikolalysenko> like a quantity varies linearly over a face it is better to do it in a vertex shader
18:01 < chrisdickinson> and that's useful to touch on
18:01 < mikolalysenko> also you can do skinning/animation stuff in vertex shaders
18:01 < mikolalysenko> so maybe having them do something like create a wavy surface or whatever could be fun
18:01  * chrisdickinson nods
18:01 < chrisdickinson> a tweening lesson might be useful
18:02 < mikolalysenko> if we do feedback effects, we could also have a little blurb on water shading
18:03 < mikolalysenko> since you can do a kind of simplistic laplacian wave solver with feedback effects
18:03 < mikolalysenko> and then use vertex shaders to render the displacements
18:04 < mikolalysenko> another trick with vertex shaders is you can use them to do "scatter" operations
18:04 < mikolalysenko> like particle effects and so on
18:04 < mikolalysenko> for example, have a feedback effect for particle animation and have a vertex shader render the positions
18:05 < chrisdickinson> oh yeah
18:05 < chrisdickinson> + using gl_PointSize, etc
18:05 < mikolalysenko> yep
18:05 < mikolalysenko> so a particle demo could be kind of a fun project too
18:06 < mikolalysenko> you can also adapt that trick to do stuff like crowd rendering /swarming/etc.
18:06 < chrisdickinson> (it'd be really cool to do a multipass render thing as a penultimate lesson, though that might be out of scope)
18:06 < mikolalysenko> yeah, shadows are a great topic for that
18:06 -!- dominictarr [~dominicta@119.224.43.39] has quit [Ping timeout: 240 seconds]
18:06 < mikolalysenko> since it is a pretty complicated but also useful effect
18:06  * chrisdickinson nods
18:07 < chrisdickinson> that + SSAO?
18:07 < mikolalysenko> however, I think we would run out of time pretty quickly just covering the basics
18:07 < mikolalysenko> ssao might be easier
18:07 < mikolalysenko> but it is hard to do reliably in webgl due to lack of floating point support and multiple render targets
18:07 < mikolalysenko> maybe we could try some kind of full screen blur/hdr effect?
18:07 < chrisdickinson> yeah
18:08 < mikolalysenko> those are easier to code than ssao, and generally more useful
18:08 -!- ceejbot [~ceejbot@50-1-57-179.static.sonic.net] has quit [Remote host closed the connection]
18:08 < chrisdickinson> sidenote, multiple render targets are hitting soon i think: https://hacks.mozilla.org/2014/01/webgl-deferred-shading/
18:09 < chrisdickinson> (also http://www.dartgamedevs.org/2013/07/multiple-render-targets-and-deferred.html)
18:09 < mikolalysenko> I can't wait, it will make gpu programming a lot more powerful
18:09 -!- ceejbot [~ceejbot@50-1-57-179.static.sonic.net] has joined #stackvm
18:09 < mikolalysenko> the only thing after that is then to get better async read from gpus
18:10 < chrisdickinson> actually, doing something like that hacks.mozilla blog post might be really cool
18:10 < mikolalysenko> and also the capability to read floats...
18:10 < mikolalysenko> hmm
18:10 < mikolalysenko> it might be pretty fun
18:11 -!- toddself [~toddself@69.2.120.65] has quit [Ping timeout: 240 seconds]
18:12 < mikolalysenko> I think that the projects ought to introduce specific features of glsl though
18:12 < mikolalysenko> or concepts that are generally useful

Breaking this down, I think there could be two workshoppers, one for glslify and one for the rest of the plumbing stuff.

What do you guys think? @chrisdickinson @hughsk