Holographic Effect with a ShaderMaterial

I’m trying to implement the holographic effect with the shader material.
Holographic Effect
I know how to implement this in CSS (something like this: https://codepen.io/artemkor/pen/jOLYexY)
But I need this as a part of ThreeJS scene animations. I’m stuck on creating a trapezoid (at least a triangle) with transparent edges. Is it possible for a single material without post-processing?

Please help me.
Thanks in advance.

1 Like

You can generate most shapes in shaders with SDF. iq has a great blog post that has functions for rendering most kind of 2d shapes here (including Trapezoid): Inigo Quilez :: fractals, computer graphics, mathematics, shaders, demoscene and more
Also, you can look around the blog if you want to go into 3d or other cool stuff.
Here’s his shadertoy for trapezoid: Shader - Shadertoy BETA

After drawing the shape you can fill it with any color with transparency based on the x and y coordinate of the pixel.