Rubber Vector
category: code [glöplog]
Hello!
I'm very interested about the rubber vector effect, like in Octorubber, Natsu no Gomu or Dubzilla. But I have some questions, maybe you can help me.
Is the twisting effect made only on one axis or on the three? (in the linked demos above, it seems the twisting effect is made vertically, maybe I'm wrong?)
How the lines of the cube can be curved when moving the vertexes? (when I move my vertexes, the lines of my cube remain straight)
Your help will be appreciated as I really love this effect and want to try it!
I'm very interested about the rubber vector effect, like in Octorubber, Natsu no Gomu or Dubzilla. But I have some questions, maybe you can help me.
Is the twisting effect made only on one axis or on the three? (in the linked demos above, it seems the twisting effect is made vertically, maybe I'm wrong?)
How the lines of the cube can be curved when moving the vertexes? (when I move my vertexes, the lines of my cube remain straight)
Your help will be appreciated as I really love this effect and want to try it!
My understanding of the effect is that it's actually done in screen-space as a post-effect; you split the image up into lines, and each successive line is rendered one frame later than the other.
It's not the most spectacular illustration but I accidentally reproduced a crude version of this effect in Median: https://youtu.be/i4vf8kpQ3hA?t=35 - note how the motion of the cube seems to "rubber" through the image once image gets split into sections.
It's not the most spectacular illustration but I accidentally reproduced a crude version of this effect in Median: https://youtu.be/i4vf8kpQ3hA?t=35 - note how the motion of the cube seems to "rubber" through the image once image gets split into sections.
The main idea here is that you have several frames of a regular cube rendered in memory. This is often done by presenting the cube normally, at which time you can populate the render buffers while displaying them normally. Once there are enough of these "history buffers", the effect is achieved by displaying different scanlines from different history buffers (usually selected by a sinus or some other periodic thing). I believe it's also common to continue rendering the object normally and cycling history buffers to keep it more dynamic.
Quote:
displaying different scanlines
Now that I think about it and have taken a look at the vectorslime in Crystal Dream 2, I'm now wondering if indeed they have to be scanlines, or you can just do a lookup based on any texture to make the rubber less aligned to the horizontal lines.
Per-scanline is the traditional approach, probably because that mapped nicely to the display architecture of the old platforms. (Note that on those machines a naive "have a large enough array of historical framebuffers" quickly runs into memory issues ).
Anyway, doing non-scanline-based rubbering is a nice evolution of the original effect, as proven by some old vector slime effects on PC, a few of my own old AGA prods (such as the screenshot effect here), and Excess' recent (and very pretty) Aurora
Anyway, doing non-scanline-based rubbering is a nice evolution of the original effect, as proven by some old vector slime effects on PC, a few of my own old AGA prods (such as the screenshot effect here), and Excess' recent (and very pretty) Aurora
So if understand well, the twist effect is done on the already rendered cube.
I need to:
- render different cube rotation steps in memory
- when displaying a frame, I select, with a sin function, lines among the rendered cubes in memory
Something like that?
Gargaj: I love Median's design! Thanks for the link, I didn't know it!
I need to:
- render different cube rotation steps in memory
- when displaying a frame, I select, with a sin function, lines among the rendered cubes in memory
Something like that?
Gargaj: I love Median's design! Thanks for the link, I didn't know it!
Blitz Basic has example of rubber
I believe the vectorslime in CD2 uses diagonal lines (45 degrees), not scanlines.
Not to get too off topic, but I wonder if there's distance function to recreate the "rubber" style effects in shader? I've always wanted to use the "bending cube" style effects in a shader, but I don't know how you'd make it happen.
Offset your time variable based on the fragment's position?
I guess in raymarching you're probably better off just distorting the space.
Quote:
I guess in raymarching you're probably better off just distorting the space.
Yeah I could see that, but I can't imagine how that would look for a "bend" rather than a straight translation. Someone must have done something like that before.
Code:
rotY()
{
...
angle = iTime + r.y;
...
}
better use some sinus/cosinus to make it look sexy! ;)
Code:
rotate(p.xz, sin(p.y+time));
return cube(p, float3(1,10,1);
Quote:
Offset your time variable based on the fragment's position?
Yup, that's how we used to do it in 3D space back in the early 2000s:
That's per-vertex, though, not per fragment :-) (FWIW, the offset is based on distance from the origin of the object.)
…also, per-vertex envmapping sure is ugly.
…also, per-vertex envmapping sure is ugly.
In case someone still didn't get the idea, it's to take any effect like this one
http://glslsandbox.com/e#46977.0
and then change it so that stuff is distorted according to the scanline position
http://glslsandbox.com/e#47051.0
Rubber/jelly anything.
http://glslsandbox.com/e#46977.0
and then change it so that stuff is distorted according to the scanline position
http://glslsandbox.com/e#47051.0
Rubber/jelly anything.
In the end of Anataus 4 it was done by keeping multiple frames of the effect in a frame buffer and showing stuff from different frames
https://www.youtube.com/watch?v=3jJqsP7W-ec&t=3m28s
https://www.youtube.com/watch?v=3jJqsP7W-ec&t=3m28s
http://www.pouet.net/prod.php?which=3008
Back in 1994 i did a Rubber-Logo in
gimme alcohol by BONZAI BROS. and as it was fullscreen on VanillaA1200 i also prerendered all the frames for a 90°-Rotation (on y-axis) of a Textured Cube into Memory...in the Demo you´ll see a Graphic being shown for a very long time while it prerenders those...and then via Sinus-Table-Lookup showed different Rotations per Scanline. That´s how everyone did it i think, as realtime wasn´t possible at 14MHz.
Nowadays i would do that with raymarching, as i posted above!
Here´s what Sesse described, something i used in my last TextMode-Demo TMDC20 Compothriller by Genesis Project & Tristar & Red Sector Inc., which is what i would call modern-rubber-vectors:
This needs the rotation to be applied before you translate the object in space of course.
gimme alcohol by BONZAI BROS. and as it was fullscreen on VanillaA1200 i also prerendered all the frames for a 90°-Rotation (on y-axis) of a Textured Cube into Memory...in the Demo you´ll see a Graphic being shown for a very long time while it prerenders those...and then via Sinus-Table-Lookup showed different Rotations per Scanline. That´s how everyone did it i think, as realtime wasn´t possible at 14MHz.
Nowadays i would do that with raymarching, as i posted above!
Here´s what Sesse described, something i used in my last TextMode-Demo TMDC20 Compothriller by Genesis Project & Tristar & Red Sector Inc., which is what i would call modern-rubber-vectors:
Code:
rotate(p, length(p)+time);
This needs the rotation to be applied before you translate the object in space of course.
The original rubbercompo thread on ADA also contains some info about different Amiga implementations.
my attempt should be possible with a scanline approach. basically you keep several buffers in memory and do the lookup from there. the lookupvalues is done via a buffer, you could use some kind of color-cycling as well, which i think the vectorslime in cd2 does, but it might also have one or more feedbackbuffers (most likely scanline-spans).
here is the result i got:
here is the result i got:
for a more detailed explanation.
1. you have either a flat-shaded cube rotating in realtime, or an animation of a cube rotating, by maybe RLE-compression or some fast computation to render it to some backbuffer.
2. you do a realtime-plasma or color-cycling of some image with sines, or perhaps keep these as separate spans.
3. you keep history buffers or horisontal-spans. In my example, i used 24. this might be too much for slow cpu's, or lack of memory, which is the reason I mentioned feedback buffers (there might be a trick there i haven't discovered yet).
4. For the "history-buffers" in punkt 3, the plasma/sine-offscreen buffer from punkt 2 is used as lookup-value for the same pixel-position as the "history-buffers". This finally this is rendered to the screenmem.
1. you have either a flat-shaded cube rotating in realtime, or an animation of a cube rotating, by maybe RLE-compression or some fast computation to render it to some backbuffer.
2. you do a realtime-plasma or color-cycling of some image with sines, or perhaps keep these as separate spans.
3. you keep history buffers or horisontal-spans. In my example, i used 24. this might be too much for slow cpu's, or lack of memory, which is the reason I mentioned feedback buffers (there might be a trick there i haven't discovered yet).
4. For the "history-buffers" in punkt 3, the plasma/sine-offscreen buffer from punkt 2 is used as lookup-value for the same pixel-position as the "history-buffers". This finally this is rendered to the screenmem.
http://g0blinish.ucoz.ru/forblog/jellocube.zip
For raymarching, i created this a longtime ago.
https://www.shadertoy.com/view/XdGSRz
it just offset the rotation per scanline.
https://www.shadertoy.com/view/XdGSRz
it just offset the rotation per scanline.