Hello engineers!
I’m a newbie in three.js and I would like to ask for some help.
In this project, when the camera collides with the model, it produces this effect. I’m wondering how it can be implemented?
I have no idea how to achieve this, so I’d like to ask for advice.
Most likely it is a fragment shader that discards fragments (i.e. pixels) if they are too close. Which pixels to discard depends on the depth of a pixel and on its screen position – the screen position is used for the hexagonal pattern. Discarding should happen within the frustum volume in order to avoid frustum culling.
Oh!
So for this effect, I need to write a new shader?
Not necessarily.
It only means that I can not think of any non-shader way to make similar effect. Maybe someone else will come up with better idea? Or maybe someone has such effect implemented as post-effect? Maybe you only need to inject a line in the current fragment shader?
Fragment shader part of code:
float pixelRatio=0.83;
vec2 dpUV = (gl_FragCoord.xy*pixelRatio)*0.15;
dpUV.x += step(1., mod(dpUV.y, 2.))*0.5;
dpUV = fract(dpUV);
float dpLimit = smoothstep(0.3, 0.999, gl_FragCoord.w);
float dpMask = smoothstep(dpLimit-0.2, dpLimit, length(dpUV-vec2(0.5)));
if(dpMask<0.5) {
discard;
}
3 Likes
And here is my try with code injection in the current shader.
https://codepen.io/boytchev/full/bGQWqmQ
5 Likes
The code snippet you provided for the fragment shader is incredibly helpful!!!
I can’t thank you enough for taking the time to share your knowledge and expertise 
Wow! Thank you so much for sharing your code and providing the CodePen link.
This is such a cool approach and it has given me a whole new perspective.
Thank you so much for your contribution, it’s truly inspiring 
1 Like
I took code from “Coastal World” demo.
1 Like