Yep, that was easy. on the fly shader compilation done:Refactored all my code into a class with better methods and less global vars, now it'll be easier to dynamically compile shaders and change uniforms during execution!Holy crap I finally got it working! GPU conversion of the thing I finished the other day. am gonna tidy up then do a proper post later tonight.Well, that was a nightmare.
I have spent the last hour and a half debugging what turned out to be a single line of code, but other than that, today i have started work on the gpu conversion of my walkers thingy.
Basic rundown of how it works.
I store the data for each walker in a texture, I keep their position and time alive, but not much else. In my case, I store the x position in the top left of an image, (see below), encoded as a 32 bit float (using all four channels because webgl 1.0 only supports 8 bit color channels), the top right keeps the y position. In the bottom left, I keep the time alive (in frames) in the r channel, and whether to render or not (as a bool, 0 or 1) in the g channel. The bottom right is at this point unused.
Each frame, I take the previous's frames texture, and render over top of it, updating using a fragment shader (which is not yet written
)
Then, I pass that texture to another vertex shader, which generates a bunch of points based of of each pixel in the texture.
In theory, its super easy, but in practice... not so much.
Encoding the float over the four color channels was not fun, as I kept getting a normal distribution of points even when the initial texture was completely random (and uniform, I checked). I spent a couple hours trying to work that one out only to discover I hadn't unbound one of the webgl globals, so that was fun. Calculating the uv coordinates based only on the point index was ok, but implementing a ping pong frame buffer for the texture update frag shader was a bit tricky. Tomorrow I'll try and get this working, so I've got them functional and moving.
Below:
Computed texture
Rendered walkers (from computed texture)
Colored renderered walkers (r: posx, g:posy, b:index)
Welp, now its 1 am, but I have made my above demo tidy, did what I wanted with it being user defined, and I think it looks pretty sick. This is the first project for my portfolio site (which itself is not yet built, but oh well)
cookiemonsternz.github.io
Passing up on the webgl stuff, today, ported my blot submission to use p5js, and reworked it so it actually does what I wanted it to. Might convert this to run on gpu with webgl for journeybook, who knows
You'll never believe this!
I have made two more rotating donuts!
One renders using points instead of triangles, and the other uses a stencil buffer to create an outline.Just a quick update before I have dinner.
Just been working on some more quaternion stuff - this time: Spherical Linear Interpolation. If you know standard interpolation, its just that, but for quaternions. Who would've guessed. I'm pretty sure the "spherical" part comes from the fact it's about angles or something, but tbh I'm not really sure.
Anyway, it lets you interpolate between two different quaternions, which is pretty neat. I set my code up so there's two rotating torus (toroids? tori? toruses?? who knows...) off axis from each other, and a third which interpolates between them depending on an input.
More coming after dinner, but probs not until tmmrw because I'm not writing one of these at midnight lol.
- Blue slerps between red and green.I have reworked the code! Now its neatly commented and actually way more tidy.Done a bunch of stuff since last scrapbook! I have:
• made a torus (from triangles, programmatically)
• implemented lighting. Specular, diffuse, and ambient.
• Moved lighting to frag shader (phong shading method)
• Culling (not rendering back faces) and depth testing (further away objects are drawn behind closer ones)
• Point lights and directional lights
• Texture mapping!
• Made a sphere as well lol
Next steps:
• Multiple textures
• Rework code so I don't have to rewrite like 100 lines every time I want to change a model / the scene.
• Quaternions (of some description, just what the tuto website says lol)
• Mayb get a better setup so I don't have to run like 5 cmds whenever I open vscode
Started work on some web gpu stuff, first time using typescript, so that was fun to set up lol. I found this really good tutorial series for webgl 1.0, but its in japanese
. I forgot to scrapbook it, but I did do triangles and colored triangles first, but now i've set up indexed buffers so rectangles! Overall pretty fun, would reccomend. Tuto series for those who want it: wgld.org/sitemap.htmldeep neural network doing pattern generation for launchpad. Trained on like twelve different handmade patterns with tons of augmented color changes and rotations, etc..Hosting setup / ui finally done, nearly feature complete for full official release but u can try it out if u want ig
cookiemonsternz.github.io/music-visualisergithub.com/cookiemonsternz/music-visualiser
started adding audio responsiveness, needs more tweaks and stuff but getting thereupdate on particles: 8.3 million now, with attractors. No idea how to do multiple attractors though, been a bit of a pain so i gave up lol. My next limitation is gpu buffer size, but for now i think its enough for my usecase. Once again apoligies for compression lol.first step to a hundred million real time particles maybe: 1 million at 60 fps (webgl limited)
