Весь вечер вчера убил на написание шейдера
https://www.shadertoy.com/view/3dyXRG - водить по картинке зажатой мышкой.
получилась вот такая заготовка
<html><head><meta charset="utf-8"><style></style></head><body style="background-color: #f6f9d7">
<canvas id="shaderCanvas" width="1000" height="150" style="background-color: #26082f"></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 6.0
// koficent vremeni
#define KV 0.0170
// Коф преломления
#define KP 0.0210
// Коф дифракции цветовое смещение
#define KS 0.0030
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;
//vec2 ki = vec2(0.5,0.5);
float kj = distance(normalPointXY.x,mouse.x+(normalPointXY.y-.5)*RB); // наклон волны
color = vec3( m_point.x,kj/.6,m_dist);//m_point);
return color;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec4 outcol;
vec2 xy = fragCoord/iResolution.xy; // вектор текущей точки в координатах -1 1
vec2 mascxy = fragCoord/iResolution.xy; // вектор текущей точки в координатах -1 1
vec2 mouse = iMouse.xy/iResolution.xy; // вектор мыши в координатах -1 1
xy.y /= 3.; xy.y += mouse.y*.5; // Масштабирование текстуры фона
vec4 texColor=texture(iChannel0,mascxy); // точка из текстуры маски
vec3 map=gmain(fragCoord); // получитьт карту для точки
// Взять цвета по каналам (*.5)-уменьшает контраст (-.2) затемняет яркость (texture(iChannel1,xy)[0])-цвет из текстуры
float r = texture(iChannel1,xy)[0]*.5+.2;
float g = texture(iChannel1,xy)[1]*.5+.2;
float b = texture(iChannel1,xy)[2]*.5+.2;
if ( map.y < .3){ // map.y-волна map.x-грань map.z-растояние до ближайшей точки фрактального шума
r =texture(iChannel1,xy +map.x*KP)[0]; //смещает координату преломление
g =texture(iChannel1,xy +map.x*(KP+KS))[1];
b =texture(iChannel1,xy +map.x*(KP+KS+KS))[2];
r = mix(texture(iChannel1,xy)[0],r,1.-map.y) ;//map.y/43.;
g = mix(texture(iChannel1,xy)[0],g,1.-map.y);
b = mix(texture(iChannel1,xy)[0],b,1.-map.y);//+= map.y/43.;
};
outcol = vec4(vec3(r,g,b) ,.5);
if ((texColor.x+texColor.y+texColor.z) < 2.9 ) { // все что не белое
//outcol = vec4(map ,1.); // покажет карту вместо текстуры по маске
}
else{ // тут рисует по белому цвету маски
outcol=texture(iChannel1,xy)*.15; // уменьшает яркость вместе с альфа каналом(outcol[3])
};
//outcol=texture(iChannel1,xy)*1.15;
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 = 1;};
_.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 = 50;app.mouseDownLeft = 1;app.mouseDownRicth = 0;
let Im = new Image();
Im.crossOrigin = "";
Im.src = "https://ic.pics.livejournal.com/medius/77322658/5145070/5145070_original.jpg";
Im.onload = ()=> app.LoadTexture2(Im);
setInterval(app.rendersh,16);
</script>
</body></html>
там пока только имитируется преломление
можно добавить эффект отражения бликами и добиться схожести с алмазным блеском
а можно вместо простой маски через цветовые каналы передать коэффициент смещения и добиться эффекта раскачивающихся зеркальных букв
или карту бамп маппинга в общем вариантов море была бы фантазия и запас знаний.