Javascript-форум - Как сделать анимацию блика с помощью SVG или GIF

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как сделать анимацию блика с помощью SVG или GIF (https://javascript.ru/forum/dom-window/78893-kak-sdelat-animaciyu-blika-s-pomoshhyu-svg-ili-gif.html)

Как сделать анимацию блика с помощью SVG или GIF

Всем привет.
В общем стоит задача, хотим сделать логотип без заднего фона, с анимацией блика.

В svg не шарим, но есть пример Того что мы хотим:
http://pr-demo.96.lt/demo/animate/123.html

Мы пробовали на gif но качество ужасное получается..
А если использовать метод движения полосы то полоса накладывается и на фон.. А нам нужно чтобы блик проходил только по логотипу.. Как в примере..
Можете посоветовать подходящее решение?

А на css? В сети уже готовых примеров эффектов с текстом на css много.

Если оптика то нужно что то навроде такого ставить
https://stemkoski.github.io/Three.js/Bubble.html

Цитата:

Сообщение от laimas (Сообщение 515742)

А на css? В сети уже готовых примеров эффектов с текстом на css много.

на css не получится.. так как полоса блика будет обтекать и сам фон.. а для задуманного эффекта нужно чтобы он обтекался по логотипу а не по фону..
Пример: http://pr-demo.96.lt/demo/animate/index.html

Цитата:

Сообщение от WebMachine

на css не получится.. так как полоса блика будет обтекать и сам фон..

С чего вдруг:

<style>
.a {
  position: relative;
  font: 32px Arial;
  font-weight: bold;
  color: #AA0101;
}
.a:after {
  content: "";
  position: absolute; top: 0; left: -2em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%;
  background-size: 2em 100%;
  animation-duration: 3s;
  animation-name: slide;
  animation-iteration-count: infinite;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}
</style>

<div class="a">TEXT</div>

PS. Проблема с подбором градиента к фону, но можно же скомбинировать с маской.

Цитата:

Сообщение от laimas (Сообщение 515760)

С чего вдруг

https://jsfiddle.net/Georka/bxy3kae6/1/
Дело в том что логотип должен быть прозрачным а значит полоса блика должна проходить исключительно по самому логотипу не выходя за них. Иначе полоса будет видна на фоне и сама суть в этом уже теряется.

Прозрачный, в смысле видна подложка под ним?

laimas, тут: http://pr-demo.96.lt/demo/animate/123.html

Во время проигрывания анимации всех изображений (а их 17) они будто частично на милисекунды исчезают и снова появляются.. как сделать чтобы до окончательной загрузки всех 17 изображений показывался первый png рисунок.. чтобы далее пошла гладкая анимация?

Тоесть код, в начале загружает 1 png рисунок и отображает его до тех пор пока не загрузятся все остальные а далее начинает показывать их по дорожке.. И важно чтобы можно было цикличность задавать, т.е скорость проигрывания к примеру 10 мсек после каждого изображения и общую паузу, т.е после последнего изображения должно стоять 5 сек задержка до начала очередного проигрывания..

Нужно сначала загрузить изображения (кешировать), и только потом запускать анимацию.

И все таки, что значит логотип прозрачный? Не видно по ссылке такого. Может все таки background-clip: text и анимация градиента подложки?

Логотип лежит на фоновом изображении. поэтому фон логотипа должен быть прозрачным.. png

Цитата:

Сообщение от laimas (Сообщение 515800)

что значит логотип прозрачный?

Вот что на данный момент: http://pr-demo.96.lt/demo/dearoptika/home.html

Нужно сначала загрузить изображения (кешировать), и только потом запускать анимацию.

Подскажите как это сделать?
И чтобы не было мерцания во время проигрывания изображений.

До окончательной загрузки хотелось бы чтобы отображалось первое изображение из списка: http://pr-demo.96.lt/demo/animate/1.png

Цитата:

Сообщение от WebMachine

поэтому фон логотипа должен быть прозрачным

Что тут не так?

<style>
.anm {
    height: 160px;
    padding: 20px;
    background: url(https://img-cdn.tinkoffjournal.ru/cover-samara-inside.8vuijdvbtrl0.jpg);
}

.masc {
    font: 120px Arial;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    font-weight: 800;
    color: transparent;
    background: linear-gradient(115deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 44%, rgba(255,255,255,1) 48%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%);
    background-size: 6em 100%;
    animation-duration: 2s;
    animation-name: slide;
    animation-iteration-count: infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
}

@keyframes slide {
  from {
    background-position: 100% 0;
  }
 
  to {
    background-position: 0 0;
  }
}
</style>


<div class="anm">
<h1 class="masc">Text</h1>
</div>

Цитата:

Сообщение от WebMachine

чтобы не было мерцания во время проигрывания изображений

Мы видим фильм как 24 кадра в секунду, то есть каждый мы наблюдаем 2.5 сек. Если точнее, для кино, то немного меньше, за вычетом времени на смену кадра, но в это время обтюратор киноаппарата перекрывает световой поток.

Цитата:

Сообщение от Rise

это на каждый около 0.041666 сек.

:) да, это я не то разделил.

animation-delay задает задержку до начала первого проигрывания.
А как сделать задержку после каждого проигрывания?

Цитата:

Сообщение от WebMachine

А как сделать задержку после каждого проигрывания?

@keyframes slide {
  0% {
    background-position: 100% 0;
  }
  20% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

animation-duration: 4.5s;

WebMachine,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<style>
.anm {
    height: 160px;
    padding: 20px;
    background: url(https://img-cdn.tinkoffjournal.ru/cover-samara-inside.8vuijdvbtrl0.jpg);
}

.masc {
    font: 120px Arial;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    font-weight: 800;
    color: transparent;
    background: linear-gradient(115deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 44%, rgba(255,255,255,1) 48%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%);
    background-size: 6em 100%;
    animation-duration: 4.5s;
    animation-name: slide;
    animation-iteration-count: infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
}

@keyframes slide {
  0% {
    background-position: 100% 0;
  }
  40% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
</style>


<div class="anm">
<h1 class="masc">Text</h1>
</div>

</body>
</html>

Спасибо вам ребят) вы лучшие!

Посмотрите еще неплохую статью о масках https://css-live.ru/articles-css/bac...use-cases.html

Весь вечер вчера убил на написание шейдера
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>