Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 21.11.2019, 02:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,326

Посмотрите еще неплохую статью о масках https://css-live.ru/articles-css/bac...use-cases.html
Ответить с цитированием
  #22 (permalink)  
Старый 22.11.2019, 18:51
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 944

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

там пока только имитируется преломление
можно добавить эффект отражения бликами и добиться схожести с алмазным блеском

а можно вместо простой маски через цветовые каналы передать коэффициент смещения и добиться эффекта раскачивающихся зеркальных букв
или карту бамп маппинга в общем вариантов море была бы фантазия и запас знаний.
Ответить с цитированием
  #23 (permalink)  
Старый 25.11.2019, 23:19
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 944

С имитацией отражений бликами смотрится чуть лучше.
<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>

Последний раз редактировалось MallSerg, 01.12.2019 в 04:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как грамотно сделать большую таблицу или подобное? win32s (X)HTML/CSS 2 28.09.2019 16:59
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
Как сделать редирект или заблокировать кнопку в скрипте... allanmiln AJAX и COMET 5 16.02.2013 20:13
Как сделать анимацию элемента? Dimaz jQuery 6 24.01.2013 21:51
Как сделать непрерывную и плавную анимацию с jQuery в backgroundPosition? Isaac jQuery 2 21.01.2013 13:23