Весь вечер вчера убил на написание шейдера
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> там пока только имитируется преломление можно добавить эффект отражения бликами и добиться схожести с алмазным блеском а можно вместо простой маски через цветовые каналы передать коэффициент смещения и добиться эффекта раскачивающихся зеркальных букв или карту бамп маппинга в общем вариантов море была бы фантазия и запас знаний. |
С имитацией отражений бликами смотрится чуть лучше.
<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> |
Часовой пояс GMT +3, время: 16:54. |