JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
JavaScript
// Shader
const lensflareShader = {
vertex: `
precision highp float;
varying vec2 vUv;
uniform vec3 sunPosition;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragment: `
precision highp float;
varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform vec2 resolution;
uniform vec3 sunPosition;
uniform float time;
float noise(float t) {
return texture(tDiffuse, vec2(t, .0) / resolution.xy).x;
}
float noise(vec2 t) {
return texture(tDiffuse, t / resolution.xy).x;
}
vec3 lensflare(vec2 uv, vec2 pos) {
vec2 main = uv-pos;
vec2 uvd = uv*(length(uv));
float ang = atan(main.y, main.x);
float dist=length(main); dist = pow(dist,.1);
float n = noise(vec2((ang-time/9.0)*16.0,dist*32.0));
float f0 = 1.0/(length(uv-pos)*16.0+1.0);
f0 = f0+f0*(sin((ang+time/18.0 + noise(abs(ang)+n/2.0)*2.0)*12.0)*.1+dist*.1+.8);
float f2 = max(1.0/(1.0+32.0*pow(length(uvd+0.8*pos),2.0)),.0)*00.25;
float f22 = max(1.0/(1.0+32.0*pow(length(uvd+0.85*pos),2.0)),.0)*00.23;
float f23 = max(1.0/(1.0+32.0*pow(length(uvd+0.9*pos),2.0)),.0)*00.21;
vec2 uvx = mix(uv,uvd,-0.5);
float f4 = max(0.01-pow(length(uvx+0.4*pos),2.4),.0)*6.0;
float f42 = max(0.01-pow(length(uvx+0.45*pos),2.4),.0)*5.0;
float f43 = max(0.01-pow(length(uvx+0.5*pos),2.4),.0)*3.0;
uvx = mix(uv,uvd,-.4);
float f5 = max(0.01-pow(length(uvx+0.2*pos),5.5),.0)*2.0;
float f52 = max(0.01-pow(length(uvx+0.4*pos),5.5),.0)*2.0;
float f53 = max(0.01-pow(length(uvx+0.6*pos),5.5),.0)*2.0;
uvx = mix(uv,uvd,-0.5);
float f6 = max(0.01-pow(length(uvx-0.3*pos),1.6),.0)*6.0;
float f62 = max(0.01-pow(length(uvx-0.325*pos),1.6),.0)*3.0;
float f63 = max(0.01-pow(length(uvx-0.35*pos),1.6),.0)*5.0;
vec3...