以前お知らせしていて、レスポンシブ実装のサンプル集サイトを公開しました。 responsive-samples.unshift.co.jp

raymarched teardrop glass #glsl #threejs #webgl

📝 New Blog Post 📝 Over the past few month I experimented building beautiful shaders of cloudscapes with Volumetric Raymarching This article covers what I learned and worked on, from the basics to advanced techniques to render physically based clouds ⛅ blog.maximeheckel.com/posts/real-tim…

$=[],t=0,draw=_=>t++?background(0,14)+($=[...$.slice(-5e3),...[...'#つぶやきProcessing'].map(p5.Vector.random3D)]).map(_=>stroke(255,96).point((_.x+=sin(r=((_.x*2*(k=_.x*4+2^_.y*4|2+_.z*4)^_.y*k+t/299)&1)*2-1)/99*_.z)*109+270,(_.y+=cos(r)/99*_.z)*109+270)):createCanvas(540,540)

#つぶやきProcessing f=0 draw=_=>{f++||createCanvas(W=600,W) colorMode(HSB,9) noStroke(B=blendMode) B(BLEND) background(a=TAU/W) B(ADD) for(j=2;j--;filter(BLUR))for(x=W;x--;circle(x,W+9-((n+f)%W)*(z=n%9+4)/4,z))fill((n=noise(x)*9e5)%1+5,5,1+sin(a*3*f+n%9)+sin(a*2*f+n%7))}

I was experimenting with a lot of different effects and techniques today. This is one of my prettiest effects so far. #aftereffects

//#Processing int n=400,i,s; float a[]=new float[n*4],d,x,y,t; void setup(){ size(800,800); for(i=0;i<n*2;i++){a[i]=400-random(800);a[i+n*2]=random(-1,1);}} void draw(){ translate(400,400);background(0);stroke(-1); for(i=0;i<n;i++)for(s=0;s<n;s++){ if(i!=s){ d=dist(a[i], //cont.

The beginnings of an audio visualizer or a really cool landing page. Parallax effect with a generated depthmap looks a lot better than I expected. journal.imjin.dev/003 #webgl #threejs #react #r3f

Decided to implement this as a compute shader. Looks very nice with millions of points! I've also made the beta parameter parametrize the color by a spectrum function. compute.toys/view/736

The XOR of two SDFs, is also an SDFs; always: iquilezles.org/articles/sdfxo…

Audio/music visualizer in the browser. Not completely happy with the audio analysis implantation but I'll circle round to it one day. Live link : journal.imjin.dev/003 #threejs #r3f #reactjs #glsl

I'm trying out the custom HLSL node feature of VFX Graph (available from Unity 2023.2). Now I can extend VFX Graph with custom shader code. github.com/keijiro/VFXCus…

Created a cool demo for anyone to create shaders 😀You can write your code and see it live on the Las Vegas Sphere! whenistheweekend.com/theSphere.html Three.js

#inerciaparty #GLSL #Shader #LiveCoding

過去案件で作ったLOTTIEたち。一部タイポデザインも含む。せっかくポートフォリオつくったのに、下層ページあまり見られないので、下層もちょいちょいXで強制紹介していこ。 shinyaokano.jp/project-type/l…

Glass transition scene. Very much so inspired from Iso's agent trailer from valorant. journal.imjin.dev/004 #threejs #r3f #webgl

Hypnosis, 233 chars #つぶやきGLSL for (O *= m; m < 170.;O += .0007 / (abs(length( a + abs(sin(m* mix(.02,.07, sin(f)*.5 + .5) - f)) * vec2(cos(x = m*.05-f), sin(x)))-.5) + .02) * (1.+cos(m++*.1 + length(a)*6. - f + vec4(0,1,2,0))));

This is the Unity project I used in Masaya Matsuura's mini-concert yesterday. It's just a small one-off project, but you can reuse it if you find it useful in any way. github.com/keijiro/Xola

New Project VFX #UE5 #Niagara #VFXFriday #realtimevfx #UE5Study #Substance3D

vec3 p,q=vec3(-.1,.65,-.6);for(float j,i,e,v,u;i++<130.;o+=.007/exp(3e3/(v*vec4(9,5,4,4)+e*4e6))){p=q+=vec3((FC.xy-.5*r)/r.y,1)*e;for(j=e=v=7.;j++<21.;e=min(e,max(length(p.xz=abs(p.xz*rotate2D(j+sin(1./u+t)/v))-.53)-.02/u,p.y=1.8-p.y)/v))v/=u=dot(p,p),p/=u+.01;} #つぶやきGLSL