Otano Studio (@OtanoStudio) profile picture

Creative web developer & Designer Web Director - AIGA Wichita GLSL Shader Adventurer

Kansas, USA
Joined February 2009
Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)Photo by Otano Studio (@OtanoStudio)
ported this cool iterative parallax occlusion mapping from 80lv and now I need to find the textures to recreate the roof on a plane.
1
112
linear depth, exp2 depth, hybrid...check. Height with optional noise clip? check. Not production ready just yet but the fog is foggy. lots of tricks to get this working and head banging on position reconstruction #threejsjourney #threej #glsl #r3f #vfx #otanostudio
3
148
Fire Watch stylized fog has now been added to the kitchen sink framework with linear, exp, & exp2 fog. Ported from unity, og author owns that version. #threejsjourney #threejs #glsl #vfx #r3f #otanostudio
1
4
223
Not tuned for the orange and blue gradients. Does require tuning for your own worlds credit is given to the unity code author with a link. I’m going to add some trees and rocks for this demo so really give it some scale.
116
So... grass using quad bezier deform, hemispheric lighting, diffuse lighting, faked subsurface scattering, alpha atlas, and gradient color maps has been born. just use the demo from the kitchen sink #threejsjourney #threejs #glsl #vfx #otanostudio
3
2
1
64
7,656
Demo: digi-grass.vercel.app/ Source: github.com/OtanoStudio/R3F-K… demo does not use the new windDeform.glsl and requires you to use negative normals testing gl_FrontFacing for false.
3
252
Been Slaving away at this port of minionsart's floor fog using a plane to fake volume. #threejsjourney #threejs #VFX #otanostudio #shader #glsl
1
19
1,899
Ever tried to sample a texture for grass and gotten that ugly line at the top? Well if you clamp the uv axis you sample from you can get rid of it. Even using clamp to edge wrapping, the uv is stretched and causes this issue. #threejs #r3f #glsl #shader
4
211
added random atlas lookup and diffuse lighting based on view. I wonder how tsl would handle this next... I smell a port incoming.
1
130
Whew...wind has been added to the kitchen sink. Per usually a demo of the addition in action. Source: github.com/OtanoStudio/R3F-K… Demo: digi-grass.vercel.app/ #threejs #threejsjourney #r3f #glsl #shader #VFX
2
10
715
Finished the preloader vfx. 2 planes, 3 image textures( I need to learn how to channel pack ), thousands of mg of caffeine. Now it’s just timing and triggering. #otanostudio #threejsjourney #threejs #r3f #vfx #glsl #shader #WebDesign
1
8
419
As an aside, using mix on 2 different values fo the pixel grid with the reveal progress looked cool but was kinda janky.
76
Some progress on my sites new loader, we're digitizing all the things. Planning for the 3D model, this is a plane, to be a hologram with a progress bar and a transition after the page is fully loaded plus a little padding. #threejsjourney #threejs #r3f #shader #glsl #VFX
2
1
12
1,004
Playable demo, still no mouse trail but the code is there to use for you to try. I couldn't get a good wireframe for that overlay. Code: github.com/OtanoStudio/Lando… demo: lando-demo.vercel.app/ #threejsjourney #threejs #r3f #glsl #shader #VFX
1
3
399
The magic is here. Swap 0.6 of the step with a progress value of a trail texture to create a better reveal. They use a wireframe image that flashes and has a highlight. You can mix that over the original final color if you can get a good wireframe image.
94
Progress recreating the effect that's taking webgl by storm in shaderland. Curious how? Check the first comment. #threejs #glsl #shader #r3f #VFX
1
2
254
Instead of using the same image except with the helmet, we used a helmet png and person png. All you have to do is send the fluid sim for the noise and use my faux depth to simulate that as well. If you have normals feed it to my diffuse lighting function.
117
Working on a new wireframe material that is the batteries included type. Includes front and back side color/gradient and is a full wireframe and doesn't include base color yet.
1
8
107
The nose knows, cover for explorations of how the nose dominates the center of the face #illustration #graphicdesign #otanostudio #affinitydesigner
200
Mr. Beeps appearing solo again. Happy Memorial Day to our fallen armed service men and women of the United States of America.
94
Cracking on with wawa sensei's course and I took the depth shader further. Really enjoying his course. Used the depth to mix between 2 colors, used a uv distorted by noise for fake caustics and a hard intersection. #threejs #r3f #threejsjourney #wawasensei #glsl #shader
1
23
720
I've been putting my vfx framework through the paces...and sometimes the texture for polar coords is the problem. Just need some particles now. No code because it's not done yet. demo: parallax-uv.vercel.app/ #threejs #threejsjourney #glsl #VFX #shader #portal #otanostudio
2
3
61
2,154
Quick put together but May the 4th be with you, the daemon lord himself in his first solo outing. #graphicdesign #affinitydesigner #illustration #MayThe4thBeWithYou
2
199
What’s your first Nintendo game? Ours was Duck Hunt and I can still hear that blasted dog laughing at me still. Need to standout, we can help you find your authentic voice.
2
8
390