С имитацией отражений бликами смотрится чуть лучше.
<html><head><meta charset="utf-8"><style></style></head><body>
<canvas id="shaderCanvas" width="1000" height="150" style="background-color: #2b0134"></canvas>
<canvas id="textureCanvas" width="1000" height="150" style="display: none"></canvas>
<!-- <canvas id="fonCanvas" width="1000" height="150"></canvas> -->
</body><b style="display:none"><vs id="vs">#version 300 es
#ifdef GL_ES
precision highp float;precision highp int;precision mediump sampler3D;
#endif
layout(location = 0) in vec2 pos;void main() { gl_Position = vec4(pos.xy,0.0,1.0);}</vs>
<fs id="fs">#version 300 es
#ifdef GL_ES
precision highp float;precision highp int;precision mediump sampler3D;
#endif
#define HW_PERFORMANCE 1
uniform vec3 iResolution;uniform float iTime;uniform vec4 iMouse;uniform sampler2D iChannel0;uniform sampler2D iChannel1;
#define PI 3.14159
#define RB 0.06
#define NG 8.0
#define KV 0.0170
#define KP 0.04
#define KS 0.01
vec2 rand( vec2 p ) { vec2 rnd = fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);return rnd;}
vec3 gmain(in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;st.x *= iResolution.x/iResolution.y;vec2 mouse = iMouse.xy/iResolution.xy;
vec3 color = vec3(.0);st *= NG; vec2 i_st = floor(st); vec2 f_st = fract(st);float m_dist = 1.;vec2 m_point;
for(int y=-1; y <=1; y++){for(int x=-1; x <= 1; x++){vec2 neighbor = vec2(float(x), float(y));
vec2 point = rand(i_st + neighbor);point = 0.5 + 0.5*sin((iMouse.x*.03+iTime*KV) + 6.2831*point);
vec2 diff = neighbor + point - f_st;float dist = length(diff)*0.43;if(dist < m_dist){m_dist = dist;m_point = point;}}}
vec2 normalPointXY = fragCoord.xy/iResolution.xy;float kj = distance(normalPointXY.x,mouse.x+(normalPointXY.y-.5)*RB);
color = vec3( m_point.x,kj/.6,m_dist);return color;}
void mainImage( out vec4 fragColor, in vec2 fragCoord ){vec4 outcol;vec2 xy = fragCoord/iResolution.xy;
vec2 mascxy = fragCoord/iResolution.xy;vec2 mouse = iMouse.xy/iResolution.xy;xy.y /= 3.; xy.y += mouse.y*.5 +.25;
vec4 texColor=texture(iChannel0,mascxy);vec3 map=gmain(fragCoord);float r = texture(iChannel1,xy)[0]*.5+.2;
float g = texture(iChannel1,xy)[1]*.5+.2;float b = texture(iChannel1,xy)[2]*.5+.2;float bs = (1.-map.x);
float ss;if ( map.y < .2){r =texture(iChannel1,xy +(map.x*0.5)*KP)[0];
g =texture(iChannel1,xy +(map.x*0.5)*(KP+KS))[1];b =texture(iChannel1,xy +(map.x*0.5)*(KP+KS+KS))[2];
if(map.x > 0.95){ bs *= 20.; if (map.y > .2) bs *= 0.2; r += (1.-r)*bs ;g += (1.-g)*bs; b += (1.-b)*bs;};
if(map.x < 0.2){r -= (r*.5)*(bs*0.5) ;g -= g*.5*(bs*0.5); b -= b*.5*(bs*0.5);}; }else{if (xy.y < 1.) {r = 1.;g= 0.4;b=0.;};
};outcol = vec4(vec3(r,g,b),1.0);if ((texColor.x+texColor.y+texColor.z) < 2.9 ){}else{ outcol=texture(iChannel1,xy)*.45;};
fragColor=outcol;}
out vec4 outColor;
void main( void ){vec4 color = vec4(0.0,0.0,0.0,1.0); mainImage(color, gl_FragCoord.xy ); outColor = color; }
</fs></b><script>
function shaderApp ( p_canvasName , p_vSader, p_fSader ){
let j = shaderApp;let gl;let _ ={};j.stop = false;j.canvas = document.getElementById("shaderCanvas");j.tcanv = document.getElementById("textureCanvas");
gl = j.canvas.getContext('webgl2');_.NoiseTexture = 0;_.buff = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, _.buff);
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1.0,-1.0,3.0,-1.0,-1.0,3.0]), gl.STATIC_DRAW );_.glProgram = gl.createProgram();
_.onShaderTextLoad=()=>{try{gl.shaderSource(_.vertShaderObj, p_vSader);gl.compileShader(_.vertShaderObj);gl.attachShader(_.glProgram, _.vertShaderObj);
gl.shaderSource(_.fragShaderObj, p_fSader);gl.compileShader(_.fragShaderObj);gl.attachShader(_.glProgram, _.fragShaderObj);gl.linkProgram(_.glProgram);
gl.useProgram(_.glProgram);if (!gl.getShaderParameter(_.vertShaderObj, gl.COMPILE_STATUS)) throw new Error("Could not compile Vshader: " + gl.getShaderInfoLog(_.vertShaderObj));
if (!gl.getShaderParameter(_.fragShaderObj, gl.COMPILE_STATUS)) throw new Error("Could not compile Fshader: " + gl.getShaderInfoLog(_.fragShaderObj));
} catch(e) {console.error(e && e.stack || e);}gl.viewport(0,0,j.canvas.clientHeight,j.canvas.clientWidth);gl.clearColor(1.0,1.0,0.07,0.9);j.rendersh();};
gl.bindBuffer(gl.ARRAY_BUFFER,null);_.vertShaderObj = gl.createShader(gl.VERTEX_SHADER);_.fragShaderObj = gl.createShader(gl.FRAGMENT_SHADER);
_.getRealTime = ()=> ("performance" in window ) ? window.performance.now(): (new Date()).getTime();j.LoadTexture = function(xc){let Im = new Image();
Im.src = j.tcanv.toDataURL();Im.onload = ()=>{_.NoiseTexture = gl.createTexture();gl.activeTexture(gl.TEXTURE0); // в первый текстурный регистр
gl.bindTexture(gl.TEXTURE_2D, _.NoiseTexture);gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE );gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA , gl.RGBA, gl.UNSIGNED_BYTE, Im);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);};};
j.LoadTexture2 = function(xc){_.NoiseTexture2 = gl.createTexture();gl.activeTexture(gl.TEXTURE1); // в первый текстурный регистр
gl.bindTexture(gl.TEXTURE_2D, _.NoiseTexture2);gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE );gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA , gl.RGBA, gl.UNSIGNED_BYTE, xc);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);};
j.rendersh = function(){if (j.stop) return ;gl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.useProgram(_.glProgram);
_.uniform_iMouse = gl.getUniformLocation( _.glProgram , "iMouse");_.uniform_iTime = gl.getUniformLocation( _.glProgram , "iTime");
_.uniform_iResolution = gl.getUniformLocation( _.glProgram , "iResolution");if ( _.NoiseTexture !== 0 ){gl.activeTexture(gl.TEXTURE0);
_.uniform_iChannel0 = gl.getUniformLocation( _.glProgram , "iChannel0");gl.bindTexture(gl.TEXTURE_2D, _.NoiseTexture);
gl.uniform1i(_.uniform_iChannel0, 0);};if ( _.NoiseTexture2 !== 0 ){_.uniform_iChannel1 = gl.getUniformLocation( _.glProgram , "iChannel1");
gl.activeTexture(gl.TEXTURE1);gl.bindTexture(gl.TEXTURE_2D, _.NoiseTexture2);gl.uniform1i(_.uniform_iChannel1, 1);};
gl.uniform4f(_.uniform_iMouse,j.mouseX,j.mouseY,j.mouseDownLeft,j.mouseDownRicth);gl.uniform3f(_.uniform_iResolution,j.canvas.clientWidth,j.canvas.clientHeight,1.0);
gl.uniform1f(_.uniform_iTime, _.getRealTime() /1000);gl.viewport(0,0,j.canvas.clientWidth,j.canvas.clientHeight);gl.bindBuffer( gl.ARRAY_BUFFER, _.buff );
gl.vertexAttribPointer( 0, 2, gl.FLOAT, false, 0, 0 );gl.enableVertexAttribArray( 0 );gl.drawArrays(gl.TRIANGLES, 0, 3);gl.disableVertexAttribArray( 0 );
gl.bindBuffer( gl.ARRAY_BUFFER, null );gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, null);if (j.mouseX++>1000)j.mouseX = 0.2;};
_.onShaderTextLoad();j._ = _;return j;};
const app = shaderApp("",vs.innerText,fs.innerText);shaderCanvas.onmousemove=function (event) {app.mouseX= event.clientX;app.mouseY=event.clientY};
const ctx = textureCanvas.getContext('2d');ctx.fillStyle = "#ffffff";ctx.fillRect(0,0,1000,150);ctx.font = "105px Arial";ctx.fillStyle = "#63171a";
ctx.fillText( "ТЕКСТ ТЕКСТ ТЕКСТ", 10, 115);app.LoadTexture();app.mouseX = 500;app.mouseY = 155;app.mouseDownLeft = 1;app.mouseDownRicth = 0;
let Im = new Image();Im.crossOrigin = "";Im.src = "https://img-cdn.tinkoffjournal.ru/cover-samara-inside.8vuijdvbtrl0.jpg";Im.onload = ()=> app.LoadTexture2(Im);
setInterval(app.rendersh,16);// https://ic.pics.livejournal.com/medius/77322658/5145070/5145070_original.jpg
</script>
</body></html>