blocks|key|1028891|text|你想把黑白版本和彩色版本混在一起|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1028892|vec4+bw+=+vec4(vec3(color0.r+%2B+color0.g+%2B+color0.b)+/+3.,+color.a);
gl_FragColor+=+mix(bw,+color0,+mixAmount);|code-block|syntax|javascript|1028893|其中mix定义为|offset|length|style|CODE|1028894|mix(a,+b,+l)+=+a+%2B+(b+-+a)+*+l|1028895|换句话说，如果mixAmount是0，你会得到bw，如果mixAmount是1，你会得到color0。对于介于0和1之间的值，您将得到2的混合。|1028896|所以现在你只需要一些setting+mixAmount的公式|1028897|例如，假设您在画布相对坐标中传入鼠标，则可以计算到该坐标的距离|1028898|uniform+vec2+mousePos;++//+in+pixels+where+0,0+is+bottom+left

...

++float+dist+=+distance(mousePos,+gl_FragCoord.xy);|1028899|然后您可以使用它来计算mixAmount，例如|1028900|uniform+float+mixRadius;

++float+mixAmount+=+clamp(dist+/+mixRadius,+0.,+1.);|1028901|你会得到一个淡入淡出的圆圈，中间的颜色在边缘逐渐变黑和变白。|1028902|如果你想让中心的更大的区域是彩色的，那么可以传入一个minRadius和maxRadius|1028903|uniform+float+minRadius;
uniform+float+maxRadius;

++float+range+=+maxRadius+-+minRadius
++float+mixAmount+=+clamp((dist+-+minRadius)+/+range,+0.,+1.);|1028904|或者类似的东西|1028905|下面是一个有效的示例|1028906|​|1028907|"use+strict";
const+vs+=+`
attribute+vec4+position;
attribute+vec2+texcoord;

uniform+mat4+matrix;

varying+vec2+v_texcoord;

void+main()+{
++gl_Position+=+matrix+*+position;
++v_texcoord+=+texcoord;
}
`;
const+fs+=+`
precision+mediump+float;

varying+vec2+v_texcoord;

uniform+sampler2D+tex;
uniform+vec2+mousePos;
uniform+float+minRadius;
uniform+float+maxRadius;

void+main()+{
++vec4+color0+=+texture2D(tex,+v_texcoord);
++vec4+bw+=+vec4(vec3(color0.r+%2B+color0.g+%2B+color0.b)+/+3.,+color0.a);
++
++float+dist+=+distance(mousePos,+gl_FragCoord.xy);
++float+range+=+maxRadius+-+minRadius;
++float+mixAmount+=+clamp((dist+-+minRadius)+/+range,+0.,+1.);
++
++gl_FragColor+=+mix(color0,+bw,+mixAmount);
}
`;
const+m4+=+twgl.m4;
const+gl+=+document.querySelector("canvas").getContext("webgl");
const+info+=+document.querySelector("#info");

//+compiles+shaders,+link+program,+looks+up+locations
const+programInfo+=+twgl.createProgramInfo(gl,+[vs,+fs]);

//+calls+gl.createBuffer,+gl.bindBuffer,+gl.bufferData+for+each+array
const+bufferInfo+=+twgl.primitives.createXYQuadBufferInfo(gl);

const+textureInfo+=+{
++width:+1,
++height:+1,
};
const+texture+=+twgl.createTexture(gl,+{
++src:+"http://i.imgur.com/NzBzAdN.jpg",
++crossOrigin:+'',
++flipY:+true,
},+(err,+tex,+img)+=>+{
++textureInfo.width+=+img.width;
++textureInfo.height+=+img.height;
++render();
});

const+mousePos+=+[0,+0];

function+render()+{
++twgl.resizeCanvasToDisplaySize(gl.canvas);
++gl.viewport(0,+0,+gl.canvas.width,+gl.canvas.height);
++
++gl.useProgram(programInfo.program);
++
++//+calls+gl.bindBuffer,+gl.enableVertexAttribArray,+gl.vertexAttribPointer
++twgl.setBuffersAndAttributes(gl,+programInfo,+bufferInfo);
++
++//+cover+canvas+with+image++
++const+canvasAspect+=+gl.canvas.clientWidth+/+gl.canvas.clientHeight;
++const+imageAspect+=+textureInfo.width+/+textureInfo.height;

++//+this+assumes+we+want+to+fill+vertically
++let+horizontalDrawAspect+=+imageAspect+/+canvasAspect;
++let+verticalDrawAspect+=+1;
++//+does+it+fill+horizontally?
++if+(horizontalDrawAspect+<+1)+{
++++//+no+it+does+not+so+scale+so+we+fill+horizontally+and
++++//+adjust+vertical+to+match
++++verticalDrawAspect+/=+horizontalDrawAspect;
++++horizontalDrawAspect+=+1;
++}
++const+mat+=+m4.scaling([horizontalDrawAspect,+verticalDrawAspect,+1]);
++
++//+calls+gl.activeTexture,+gl.bindTexture,+gl.uniform
++twgl.setUniforms(programInfo,+{
++++minRadius:+25,
++++maxRadius:+100,
++++tex:+texture,
++++matrix:+mat,
++++mousePos:+mousePos,
++});
++
++twgl.drawBufferInfo(gl,+bufferInfo);
}
render();

gl.canvas.addEventListener('mousemove',+e+=>+{
++const+canvas+=+e.target;
++const+rect+=+canvas.getBoundingClientRect();

++const+x+=+(e.clientX+-+rect.left)+*+canvas.width+/+rect.width;
++const+y+=+(e.clientY+-+rect.top)++*+canvas.height+/+rect.height;
++mousePos[0]+=+x;
++mousePos[1]+=+canvas.height+-+y+-+1;
++
++render();
});

window.addEventListener('resize',+render);|1028908|body+{+margin:+0;+}
canvas+{+display:+block;+width:+100vw;+height:+100vh;+}|1028909|<canvas></canvas>++
<script+src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>|1028910|1028911|就像你提到的，你也可以传入一个遮罩纹理。这将允许您轻松地制作其他形状。同样，您只需要为mixAmount指定一个值|1028912|所以，就像这样|1028913|uniform+mat4+maskMatrix;

...

vec2+maskUV+=+(maskMatrix+*+vec4(v_texcoord,+0,+1)).xy;
float+mixAmount+=+texture2D(mask,+maskUV).a;|1028914|你可以看到how+to+set+that+matrix+using+2d+or+3d+matrices+by+following+these+articles|1028915|1028916|"use+strict";
const+vs+=+`
attribute+vec4+position;
attribute+vec2+texcoord;

uniform+mat4+matrix;

varying+vec2+v_texcoord;

void+main()+{
++gl_Position+=+matrix+*+position;
++v_texcoord+=+texcoord;
}
`;
const+fs+=+`
precision+mediump+float;

varying+vec2+v_texcoord;

uniform+sampler2D+tex;
uniform+mat4+maskMatrix;
uniform+sampler2D+maskTex;

void+main()+{
++vec4+color0+=+texture2D(tex,+v_texcoord);
++vec4+bw+=+vec4(vec3(color0.r+%2B+color0.g+%2B+color0.b)+/+3.,+color0.a);

++vec2+maskUV+=+(maskMatrix+*+vec4(v_texcoord,+0,+1)).xy;
++float+mixAmount+=+texture2D(maskTex,+maskUV).a;
++
++gl_FragColor+=+mix(bw,+color0,+mixAmount);
}
`;
const+m4+=+twgl.m4;
const+gl+=+document.querySelector("canvas").getContext("webgl");
const+info+=+document.querySelector("#info");

//+compiles+shaders,+link+program,+looks+up+locations
const+programInfo+=+twgl.createProgramInfo(gl,+[vs,+fs]);

//+calls+gl.createBuffer,+gl.bindBuffer,+gl.bufferData+for+each+array
const+bufferInfo+=+twgl.primitives.createXYQuadBufferInfo(gl);

const+textureInfo+=+{
++width:+1,
++height:+1,
};
//+calls+gl.createTexture,+gl.bindTexture,+gl.texImage2D,+gl.texParameteri
const+texture+=+twgl.createTexture(gl,+{
++src:+"http://i.imgur.com/NzBzAdN.jpg",
++crossOrigin:+'',
++flipY:+true,
},+(err,+tex,+img)+=>+{
++textureInfo.width+=+img.width;
++textureInfo.height+=+img.height;
++render();
});

//+we+could+load+a+mask+from+an+image+but+let's+just+make+one+from+a+canvas
//+We'll+use+the+letter+F
const+maskWidth+=+128;
const+maskHeight+=+128;
const+ctx+=+document.createElement("canvas").getContext("2d");
ctx.canvas.width+=+maskWidth;
ctx.canvas.height+=+maskHeight;
ctx.font+=+"bold+120px+sans-serif";
ctx.textAlign+=+"center";
ctx.textBaseline+=+"middle";

ctx.strokeStyle+=+"white";
ctx.strokeRect(2,+2,+124,+124);

ctx.translate(64,+64);
ctx.fillStyle+=+"white";
ctx.fillText("F",+0,+0);

//+calls+gl.createTexture,+gl.bindTexture,+gl.texImage2D,+gl.texParameteri
const+maskTexture+=+twgl.createTexture(gl,+{
++src:+ctx.canvas,
++minMag:+gl.LINEAR,
++wrap:+gl.CLAMP_TO_EDGE,
++flipY:+true,
});


const+mousePos+=+[0,+0];

function+render()+{
++twgl.resizeCanvasToDisplaySize(gl.canvas);
++gl.viewport(0,+0,+gl.canvas.width,+gl.canvas.height);
++
++gl.useProgram(programInfo.program);
++
++//+calls+gl.bindBuffer,+gl.enableVertexAttribArray,+gl.vertexAttribPointer
++twgl.setBuffersAndAttributes(gl,+programInfo,+bufferInfo);
++
++//+cover+canvas+with+image++
++const+canvasAspect+=+gl.canvas.clientWidth+/+gl.canvas.clientHeight;
++const+imageAspect+=+textureInfo.width+/+textureInfo.height;

++//+this+assumes+we+want+to+fill+vertically
++let+horizontalDrawAspect+=+imageAspect+/+canvasAspect;
++let+verticalDrawAspect+=+1;
++//+does+it+fill+horizontally?
++if+(horizontalDrawAspect+<+1)+{
++++//+no+it+does+not+so+scale+so+we+fill+horizontally+and
++++//+adjust+vertical+to+match
++++verticalDrawAspect+/=+horizontalDrawAspect;
++++horizontalDrawAspect+=+1;
++}
++const+mat+=+m4.scaling([horizontalDrawAspect,+verticalDrawAspect,+1]);
++
++//+Our+texcoord+represent+a+unit+square+from+0,0+to+1,1.+We+want+that+center
++//+centered+around+the+mouse+move+scale+by+2+and+subtract+1
++
++//+compute+how+large+the+image+is+(note+it's+larger+than+the+canvas
++//+because+we+computed+a+`cover`+style+above)
++const+imageDisplayWidth+=+gl.canvas.width+*+horizontalDrawAspect;
++const+imageDisplayHeight+=+gl.canvas.height+*+verticalDrawAspect;
++
++//+compute+how+many+pixels+off+the+screen+it+is
++const+xOff+=+gl.canvas.width+*+(horizontalDrawAspect+-+1)+/+2;
++const+yOff+=+gl.canvas.height+*+(verticalDrawAspect+-+1)+/+2;

++//+decide+a+size+to+draw+the+mask+in+pixel
++const+maskDrawWidth+=+maskWidth;
++const+maskDrawHeight+=+maskHeight;

++let+maskMat+=+m4.identity();
++//+translate+the+UV+coords+so+they+are+centered
++maskMat+=+m4.translate(maskMat,+[.5,+.5,+0]);
++//+scale+the+uvCoords+to+the+mask
++maskMat+=+m4.scale(maskMat,+[
++++1+/+(maskDrawWidth+/+imageDisplayWidth),+
++++1+/+(maskDrawHeight/+imageDisplayHeight),+
++++1,
++]);
++//+move+the+UV+coords+so+the+origin+is+at+th+emouse
++maskMat+=+m4.translate(maskMat,+[
++++-(mousePos[0]+%2B+xOff)+/+imageDisplayWidth,
++++-(mousePos[1]+%2B+yOff)+/+imageDisplayHeight,+
++++0,
++]);

++//+calls+gl.activeTexture,+gl.bindTexture,+gl.uniform
++twgl.setUniforms(programInfo,+{
++++tex:+texture,
++++matrix:+mat,
++++maskTex:+maskTexture,
++++maskMatrix:+maskMat,
++});
++
++twgl.drawBufferInfo(gl,+bufferInfo);
}
render();

gl.canvas.addEventListener('mousemove',+e+=>+{
++const+canvas+=+e.target;
++const+rect+=+canvas.getBoundingClientRect();

++const+x+=+(e.clientX+-+rect.left)+*+canvas.width+/+rect.width;
++const+y+=+(e.clientY+-+rect.top)++*+canvas.height+/+rect.height;
++mousePos[0]+=+x;
++mousePos[1]+=+canvas.height+-+y+-+1;
++
++render();
});

window.addEventListener('resize',+render);|1028917|body+{+margin:+0;+}
canvas+{+display:+block;+width:+100vw;+height:+100vh;+}|1028918|<canvas></canvas>++
<script+src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>|1028919|1028920|请注意，我使用了一个带有框架的F来清晰地显示蒙版。还请注意，您必须保持掩码0的边缘，因为边缘像素将重复超过掩码的边界。或者，当遮罩使用的纹理坐标为<0或>1时，需要修改着色器以使用0。|1028921|我还使用了一个矩阵来操纵UV坐标。因为它是一个矩阵，所以很容易缩放、偏移和/或旋转遮罩，而不必更改着色器。|1028922|至于动画，还不清楚你想要什么样的动画。如果你想要颜色随着时间的推移而淡出的东西，你可以使用use+a+techinque+like+the+one+in+this+answer。您可以在另一对纹理中绘制蒙版。您可以使用这对纹理作为mixAmount遮罩。通过将一个纹理绘制到另一个纹理中，每帧减去一定量，将这些纹理淡入淡出到0|1028923|gl_FragColor+=+texture2D(mixTexture,+uv).rgba+-+vec4(0.01);|1028924|例如。|1028925|entityMap|0|LINK|mutability|MUTABLE|url|https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html|1|https://stackoverflow.com/a/42059618/128511^0|0|0|2|3|0|0|7|9|N|2|S|9|18|6|0|A|H|0|0|0|B|9|0|0|0|Q|9|10|9|0|0|0|0|0|0|0|0|0|17|9|0|0|0|5|22|0|0|0|0|0|0|0|F|1|0|0|37|9|19|17|1|0|0|0^^$0|@$1|2|3|4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|2K|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|2L|8|@$I|2M|J|2N|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|2O|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|2P|8|@$I|2Q|J|2R|K|L]|$I|2S|J|2T|K|L]|$I|2U|J|2V|K|L]|$I|2W|J|2X|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|2Y|8|@$I|2Z|J|30|K|L]]|9|@]|A|$]]|$1|S|3|T|5|6|7|31|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|32|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|33|8|@$I|34|J|35|K|L]]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|36|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|37|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|38|8|@$I|39|J|3A|K|L]|$I|3B|J|3C|K|L]]|9|@]|A|$]]|$1|14|3|15|5|D|7|3D|8|@]|9|@]|A|$E|F]]|$1|16|3|17|5|6|7|3E|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|3F|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|3G|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|D|7|3H|8|@]|9|@]|A|$E|F]]|$1|1E|3|1F|5|D|7|3I|8|@]|9|@]|A|$E|F]]|$1|1G|3|1H|5|D|7|3J|8|@]|9|@]|A|$E|F]]|$1|1I|3|1B|5|6|7|3K|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|3L|8|@$I|3M|J|3N|K|L]]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|3O|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|D|7|3P|8|@]|9|@]|A|$E|F]]|$1|1P|3|1Q|5|6|7|3Q|8|@]|9|@$I|3R|J|3S|1|3T]]|A|$]]|$1|1R|3|1B|5|6|7|3U|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|D|7|3V|8|@]|9|@]|A|$E|F]]|$1|1U|3|1V|5|D|7|3W|8|@]|9|@]|A|$E|F]]|$1|1W|3|1X|5|D|7|3X|8|@]|9|@]|A|$E|F]]|$1|1Y|3|1B|5|6|7|3Y|8|@]|9|@]|A|$]]|$1|1Z|3|20|5|6|7|3Z|8|@$I|40|J|41|K|L]]|9|@]|A|$]]|$1|21|3|22|5|6|7|42|8|@]|9|@]|A|$]]|$1|23|3|24|5|6|7|43|8|@$I|44|J|45|K|L]]|9|@$I|46|J|47|1|48]]|A|$]]|$1|25|3|26|5|D|7|49|8|@]|9|@]|A|$E|F]]|$1|27|3|28|5|6|7|4A|8|@]|9|@]|A|$]]|$1|29|3|-4|5|6|7|4B|8|@]|9|@]|A|$]]]|2A|$2B|$5|2C|2D|2E|A|$2F|2G]]|2H|$5|2C|2D|2E|A|$2F|2I]]]]

<p>You want to mix the black and white version with the color version</p>

<pre><code>vec4 bw = vec4(vec3(color0.r + color0.g + color0.b) / 3., color.a);
gl_FragColor = mix(bw, color0, mixAmount);
</code></pre>

<p>Where <code>mix</code> is defined as</p>

<pre><code>mix(a, b, l) = a + (b - a) * l
</code></pre>

<p>In other words, if <code>mixAmount</code> is 0 you'll get <code>bw</code> and if <code>mixAmount</code> is 1 you'll get <code>color0</code>. For values in between 0 and 1 you'll get a mix of the 2.</p>

<p>So now you just need some formula for <code>setting mixAmount</code></p>

<p>As one example, assuming you pass in the mouse in canvas relative coordinates you could compute the distance from that coordinate</p>

<pre><code>uniform vec2 mousePos;  // in pixels where 0,0 is bottom left

...

  float dist = distance(mousePos, gl_FragCoord.xy);
</code></pre>

<p>You could then use that to compute a <code>mixAmount</code> for example</p>

<pre><code>uniform float mixRadius;

  float mixAmount = clamp(dist / mixRadius, 0., 1.);
</code></pre>

<p>And you'll get a fading circle with color in the center fading to black and white at the edge. </p>

<p>If you want a bigger area in the center to be color then maybe pass in a <code>minRadius</code> and <code>maxRadius</code></p>

<pre><code>uniform float minRadius;
uniform float maxRadius;

  float range = maxRadius - minRadius
  float mixAmount = clamp((dist - minRadius) / range, 0., 1.);
</code></pre>

<p>or something like that</p>

<p>Here's a working example</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
const vs = `
attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;
  v_texcoord = texcoord;
}
`;
const fs = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D tex;
uniform vec2 mousePos;
uniform float minRadius;
uniform float maxRadius;

void main() {
  vec4 color0 = texture2D(tex, v_texcoord);
  vec4 bw = vec4(vec3(color0.r + color0.g + color0.b) / 3., color0.a);
  
  float dist = distance(mousePos, gl_FragCoord.xy);
  float range = maxRadius - minRadius;
  float mixAmount = clamp((dist - minRadius) / range, 0., 1.);
  
  gl_FragColor = mix(color0, bw, mixAmount);
}
`;
const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
const info = document.querySelector("#info");

// compiles shaders, link program, looks up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);

const textureInfo = {
  width: 1,
  height: 1,
};
const texture = twgl.createTexture(gl, {
  src: "http://i.imgur.com/NzBzAdN.jpg",
  crossOrigin: '',
  flipY: true,
}, (err, tex, img) =&gt; {
  textureInfo.width = img.width;
  textureInfo.height = img.height;
  render();
});

const mousePos = [0, 0];

function render() {
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  
  gl.useProgram(programInfo.program);
  
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // cover canvas with image  
  const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const imageAspect = textureInfo.width / textureInfo.height;

  // this assumes we want to fill vertically
  let horizontalDrawAspect = imageAspect / canvasAspect;
  let verticalDrawAspect = 1;
  // does it fill horizontally?
  if (horizontalDrawAspect &lt; 1) {
    // no it does not so scale so we fill horizontally and
    // adjust vertical to match
    verticalDrawAspect /= horizontalDrawAspect;
    horizontalDrawAspect = 1;
  }
  const mat = m4.scaling([horizontalDrawAspect, verticalDrawAspect, 1]);
  
  // calls gl.activeTexture, gl.bindTexture, gl.uniform
  twgl.setUniforms(programInfo, {
    minRadius: 25,
    maxRadius: 100,
    tex: texture,
    matrix: mat,
    mousePos: mousePos,
  });
  
  twgl.drawBufferInfo(gl, bufferInfo);
}
render();

gl.canvas.addEventListener('mousemove', e =&gt; {
  const canvas = e.target;
  const rect = canvas.getBoundingClientRect();

  const x = (e.clientX - rect.left) * canvas.width / rect.width;
  const y = (e.clientY - rect.top)  * canvas.height / rect.height;
  mousePos[0] = x;
  mousePos[1] = canvas.height - y - 1;
  
  render();
});

window.addEventListener('resize', render);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;  
&lt;script src="https://twgljs.org/dist/3.x/twgl-full.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Like you mentioned, you could also pass in a mask texture. This would allow you to easily make other shapes. Again, you just need a value for <code>mixAmount</code></p>

<p>So, something like</p>

<pre><code>uniform mat4 maskMatrix;

...

vec2 maskUV = (maskMatrix * vec4(v_texcoord, 0, 1)).xy;
float mixAmount = texture2D(mask, maskUV).a;
</code></pre>

<p>You can see <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html" rel="noreferrer">how to set that matrix using 2d or 3d matrices by following these articles</a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
const vs = `
attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = matrix * position;
  v_texcoord = texcoord;
}
`;
const fs = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D tex;
uniform mat4 maskMatrix;
uniform sampler2D maskTex;

void main() {
  vec4 color0 = texture2D(tex, v_texcoord);
  vec4 bw = vec4(vec3(color0.r + color0.g + color0.b) / 3., color0.a);

  vec2 maskUV = (maskMatrix * vec4(v_texcoord, 0, 1)).xy;
  float mixAmount = texture2D(maskTex, maskUV).a;
  
  gl_FragColor = mix(bw, color0, mixAmount);
}
`;
const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
const info = document.querySelector("#info");

// compiles shaders, link program, looks up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);

const textureInfo = {
  width: 1,
  height: 1,
};
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const texture = twgl.createTexture(gl, {
  src: "http://i.imgur.com/NzBzAdN.jpg",
  crossOrigin: '',
  flipY: true,
}, (err, tex, img) =&gt; {
  textureInfo.width = img.width;
  textureInfo.height = img.height;
  render();
});

// we could load a mask from an image but let's just make one from a canvas
// We'll use the letter F
const maskWidth = 128;
const maskHeight = 128;
const ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = maskWidth;
ctx.canvas.height = maskHeight;
ctx.font = "bold 120px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

ctx.strokeStyle = "white";
ctx.strokeRect(2, 2, 124, 124);

ctx.translate(64, 64);
ctx.fillStyle = "white";
ctx.fillText("F", 0, 0);

// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const maskTexture = twgl.createTexture(gl, {
  src: ctx.canvas,
  minMag: gl.LINEAR,
  wrap: gl.CLAMP_TO_EDGE,
  flipY: true,
});


const mousePos = [0, 0];

function render() {
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  
  gl.useProgram(programInfo.program);
  
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // cover canvas with image  
  const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const imageAspect = textureInfo.width / textureInfo.height;

  // this assumes we want to fill vertically
  let horizontalDrawAspect = imageAspect / canvasAspect;
  let verticalDrawAspect = 1;
  // does it fill horizontally?
  if (horizontalDrawAspect &lt; 1) {
    // no it does not so scale so we fill horizontally and
    // adjust vertical to match
    verticalDrawAspect /= horizontalDrawAspect;
    horizontalDrawAspect = 1;
  }
  const mat = m4.scaling([horizontalDrawAspect, verticalDrawAspect, 1]);
  
  // Our texcoord represent a unit square from 0,0 to 1,1. We want that center
  // centered around the mouse move scale by 2 and subtract 1
  
  // compute how large the image is (note it's larger than the canvas
  // because we computed a `cover` style above)
  const imageDisplayWidth = gl.canvas.width * horizontalDrawAspect;
  const imageDisplayHeight = gl.canvas.height * verticalDrawAspect;
  
  // compute how many pixels off the screen it is
  const xOff = gl.canvas.width * (horizontalDrawAspect - 1) / 2;
  const yOff = gl.canvas.height * (verticalDrawAspect - 1) / 2;

  // decide a size to draw the mask in pixel
  const maskDrawWidth = maskWidth;
  const maskDrawHeight = maskHeight;

  let maskMat = m4.identity();
  // translate the UV coords so they are centered
  maskMat = m4.translate(maskMat, [.5, .5, 0]);
  // scale the uvCoords to the mask
  maskMat = m4.scale(maskMat, [
    1 / (maskDrawWidth / imageDisplayWidth), 
    1 / (maskDrawHeight/ imageDisplayHeight), 
    1,
  ]);
  // move the UV coords so the origin is at th emouse
  maskMat = m4.translate(maskMat, [
    -(mousePos[0] + xOff) / imageDisplayWidth,
    -(mousePos[1] + yOff) / imageDisplayHeight, 
    0,
  ]);

  // calls gl.activeTexture, gl.bindTexture, gl.uniform
  twgl.setUniforms(programInfo, {
    tex: texture,
    matrix: mat,
    maskTex: maskTexture,
    maskMatrix: maskMat,
  });
  
  twgl.drawBufferInfo(gl, bufferInfo);
}
render();

gl.canvas.addEventListener('mousemove', e =&gt; {
  const canvas = e.target;
  const rect = canvas.getBoundingClientRect();

  const x = (e.clientX - rect.left) * canvas.width / rect.width;
  const y = (e.clientY - rect.top)  * canvas.height / rect.height;
  mousePos[0] = x;
  mousePos[1] = canvas.height - y - 1;
  
  render();
});

window.addEventListener('resize', render);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin: 0; }
canvas { display: block; width: 100vw; height: 100vh; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;  
&lt;script src="https://twgljs.org/dist/3.x/twgl-full.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Note I used a <code>F</code> with a frame to clearly show the mask. Also note that you must keep the edges of the mask 0 because the edge pixel will be repeated past the border of the mask. Either that or you need to modify the shader to use 0 when the texture coordinates used with the mask are &lt; 0 or > 1.</p>

<p>I also used a matrix to manipulate the UV coords. Because it's a matrix it's easy to scale, offset, and/or rotate the mask without having to change the shader.</p>

<p>As for animating it's not clear what kind of animation you want. If you want something where the color fades out over time you can <a href="https://stackoverflow.com/a/42059618/128511">use a techinque like the one in this answer</a>. You'd draw the mask in another pair of textures. You use that pair of textures as your <code>mixAmount</code> mask. You fade those textures back to 0 by drawing one into the other subtracting a certain amount each frame</p>

<pre><code>gl_FragColor = texture2D(mixTexture, uv).rgba - vec4(0.01);
</code></pre>

<p>for example.</p>


blocks|key|1462735|text|您需要一个片段着色器，它会根据距离对图像进行着色。黑白颜色通常使用公式gray+=+0.2126+*+red+%2B+0.7152+*+green+%2B+0.0722+*+blue创建(在web上有不同的亮度公式和解释：Luma+(video)根据距离，您可以在原始颜色和黑白颜色之间进行插值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1462736|为此，您需要不同的统一变量：|1462737|uniform+vec2+u_mouse;
uniform+vec2+u_maxDistance;|code-block|syntax|javascript|1462738|这些是要着色区域的中心点(u_mouse)和要着色区域的最大半径(u_maxDistance)。|1462739|可以使用length计算当前片段与图像中心点之间的距离|1462740|vec2+fragmentPos+=+...;
float+distance+++=+length(+fragmentPos+-+u_mouse+);|1462741|通过将距离distance和最大距离u_maxDistance相除来计算混合比率|1462742|float+mixK+=+distance+/+u_maxDistance;|1462743|您还可以尝试使用非线性混合比率：|1462744|float+mixK+=+pow(+distance+/+u_maxDistance,+2.0+);|1462745|我们使用函数mix在颜色之间进行插值|1462746|vec3+texColor+++=+...;
vec3+grayColor++=+vec3(+0.2126+*+texColor.r+%2B+0.7152+*+texColor.g+%2B+0.0722+*+texColor.b+);
vec3+finalColor+=+mix(+texColor,+grayColor,+clamp(+mixK,+0.0,+1.0+)+);|1462747|如果要照亮受影响的区域，则必须将颜色乘以大于1.0的值：|1462748|vec3+finalColor+=+mix(+texColor+*+1.2,+grayColor,+clamp(+mixK,+0.0,+1.0+)+);|1462749|最终的顶点着色器和片段着色器：|1462750|顶点着色器|1462751|precision+mediump+float;

attribute+vec2+inPos;
varying+++vec2+vertPos;

void+main()
{
++++vertPos+++++=+inPos;
++++gl_Position+=+vec4(+inPos,+0.0,+1.0+);
}|1462752|片段着色器|1462753|precision+mediump+float;

varying+vec2++++++vertPos;
uniform+sampler2D+u_texture;
uniform+vec2++++++u_mouse;
uniform+float+++++u_maxDistance;

void+main()
{
++++float+distance++=+length(+vertPos+-+u_mouse);
++++float+mixK++++++=+pow(+distance+/+u_maxDistance,+2.0+);+
++++vec2+texCoord+++=+vertPos+*+0.5+%2B+0.5;
++++vec3+texColor+++=+texture2D(+u_texture,+texCoord.st+).rgb;
++++vec3+grayColor++=+vec3(+0.2126+*+texColor.r+%2B+0.7152+*+texColor.g+%2B+0.0722+*+texColor.b+);
++++vec3+finalColor+=+mix(+texColor+*+1.2,+grayColor,+clamp(+mixK,+0.0,+1.0+)+);+
++++gl_FragColor++++=+vec4(+finalColor.rgb,+1.0+);
}|1462754|遮罩|1462755|如果需要受影响区域的遮罩，则需要具有一个通道的遮罩纹理。通道指示该区域受影响的程度。此外，还必须计算与鼠标位置和受影响区域大小相关的遮罩的纹理坐标。|1462756|vec2+maskTexCoord+=+0.5+%2B+0.5+*+(vertPos+-+u_mouse)+/+u_maxDistance;+
float+mask++++++++=+texture2D(+u_maskTexture,+maskTexCoord+).x;
vec3+finalColor+++=+mix(+grayColor,+texColor+*+u_lightup,+mask+);|1462757|为了避免掩码重复，你必须实现一个rangecheck：|1462758|vec2+rangeTest++++=+step(+vec2(0.0),+maskTexCoord+)+*+step(+maskTexCoord,+vec2(1.0)+);+++
mask+++++++++++++*=+rangeTest.x+*+rangeTest.y;+|1462759|请参阅以下示例，其中混合了圆形区域和蒙版的实现：|1462760|​|1462761|(function+loadscene()+{++++

var+canvas,+gl,+prog,+bufObj+=+{},+textureObj,+maskTextureObj;
+++++++
function+render(deltaMS){

++++var+maxDist+=+document.getElementById(+"maxDist"+).value+/+100;
++++var+exponent+=+document.getElementById(+"exponent"+).value+/+100;
++++var+lightup+=+document.getElementById(+"lightup"+).value+/+100;

++++gl.viewport(+0,+0,+vp_size[0],+vp_size[1]+);
++++gl.enable(+gl.DEPTH_TEST+);
++++gl.clearColor(+0.0,+0.0,+0.0,+1.0+);
++++gl.clear(+gl.COLOR_BUFFER_BIT+%7C+gl.DEPTH_BUFFER_BIT+);
++++var+texUnit+=+0;
++++gl.activeTexture(+gl.TEXTURE0+%2B+texUnit+);
++++gl.bindTexture(+gl.TEXTURE_2D,+textureObj+);
++++var+maskTexUnit+=+1;
++++gl.activeTexture(+gl.TEXTURE0+%2B+maskTexUnit+);
++++gl.bindTexture(+gl.TEXTURE_2D,+maskTextureObj+);
++++ShProg.Use(+progDraw+);
++++var+pos+=+[+2.0,+2.0+];
++++if+(mousePos[0]+>+0+&&+mousePos[1]+>+0+)
++++++++pos+=+[2.0+*+mousePos[0]+/+vp_size[0]+-+1.0,+1.0+-+2.0+*+mousePos[1]+/+vp_size[1]];
++++ShProg.SetF2(+progDraw,+"u_vpsize",+vp_size+);
++++ShProg.SetF2(+progDraw,+"u_mouse",+pos+);
++++ShProg.SetF1(+progDraw,+"u_maxDistance",+maxDist+);
++++ShProg.SetF1(+progDraw,+"u_exponent",+exponent+);
++++ShProg.SetF1(+progDraw,+"u_lightup",+lightup+);
++++ShProg.SetI1(+progDraw,+"u_texture",+texUnit+);
++++ShProg.SetI1(+progDraw,+"u_maskTexture",+maskTexUnit+);
++++gl.enableVertexAttribArray(+progDraw.inPos+);
++++gl.bindBuffer(+gl.ARRAY_BUFFER,+bufObj.pos+);
++++gl.vertexAttribPointer(+progDraw.inPos,+2,+gl.FLOAT,+false,+0,+0+);+
++++gl.bindBuffer(+gl.ELEMENT_ARRAY_BUFFER,+bufObj.inx+);
++++gl.drawElements(+gl.TRIANGLES,+bufObj.inx.len,+gl.UNSIGNED_SHORT,+0+);
++++gl.disableVertexAttribArray(+progDraw.pos+);

++++requestAnimationFrame(render);
}++

function+initScene()+{

++++canvas+=+document.getElementById(+"scene-canvas");
++++gl+=+canvas.getContext(+"experimental-webgl"+);
++++if+(+!gl+)
++++++return;

++++textureObj+=+Texture.LoadTexture2D(+"https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/supermario.jpg",+true+);++
++++maskTextureObj+=+Texture.LoadTexture2D(+"https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/bat.png",+true+);++

++++
++++progDraw+=+ShProg.Create(+
++++++[+{+source+:+"draw-shader-vs",+stage+:+gl.VERTEX_SHADER+},
++++++++{+source+:+"draw-shader-fs",+stage+:+gl.FRAGMENT_SHADER+}
++++++]+);
++++progDraw.inPos+=+gl.getAttribLocation(+progDraw.progObj,+"inPos"+);
++++if+(+progDraw.progObj+==+0+)
++++++++return;

++++var+pos+=+[+-1,+-1,+1,+-1,+1,+1,+-1,+1+];
++++var+inx+=+[+0,+1,+2,+0,+2,+3+];
++++bufObj.pos+=+gl.createBuffer();
++++gl.bindBuffer(+gl.ARRAY_BUFFER,+bufObj.pos+);
++++gl.bufferData(+gl.ARRAY_BUFFER,+new+Float32Array(+pos+),+gl.STATIC_DRAW+);
++++bufObj.inx+=+gl.createBuffer();
++++bufObj.inx.len+=+inx.length;
++++gl.bindBuffer(+gl.ELEMENT_ARRAY_BUFFER,+bufObj.inx+);
++++gl.bufferData(+gl.ELEMENT_ARRAY_BUFFER,+new+Uint16Array(+inx+),+gl.STATIC_DRAW+);

++++window.onresize+=+resize;
++++resize();
++++requestAnimationFrame(render);
}

function+resize()+{
++++//vp_size+=+[gl.drawingBufferWidth,+gl.drawingBufferHeight];
++++vp_size+=+[window.innerWidth,+window.innerHeight]
++++//vp_size+=+[256,+256]
++++canvas.width+=+vp_size[0];
++++canvas.height+=+vp_size[1];
}

var+mousePos+=+[-1,+-1];
(function()+{
++++document.onmousemove+=+handleMouseMove;
++++function+handleMouseMove(event)+{
++++++++var+dot,+eventDoc,+doc,+body,+pageX,+pageY;

++++++++event+=+event+%7C%7C+window.event;+//+IE-ism

++++++++if+(event.pageX+==+null+&&+event.clientX+!=+null)+{
++++++++++++eventDoc+=+(event.target+&&+event.target.ownerDocument)+%7C%7C+document;
++++++++++++doc+=+eventDoc.documentElement;
++++++++++++body+=+eventDoc.body;

++++++++++++event.pageX+=+event.clientX+%2B
++++++++++++++(doc+&&+doc.scrollLeft+%7C%7C+body+&&+body.scrollLeft+%7C%7C+0)+-
++++++++++++++(doc+&&+doc.clientLeft+%7C%7C+body+&&+body.clientLeft+%7C%7C+0);
++++++++++++event.pageY+=+event.clientY+%2B
++++++++++++++(doc+&&+doc.scrollTop++%7C%7C+body+&&+body.scrollTop++%7C%7C+0)+-
++++++++++++++(doc+&&+doc.clientTop++%7C%7C+body+&&+body.clientTop++%7C%7C+0+);
++++++++}

++++++++var+x+=+event.pageX+-+canvas.offsetLeft;
++++++++var+y+=+event.pageY+-+canvas.offsetTop;
++++++++mousePos+=+[-1,+-1];
++++++++if+(+x+>=+0+&&+x+<+canvas.width+&&+y+>=+0+&&+y+<+canvas.height+)+{
++++++++++++mousePos+=+[x,+y];+
++++++++}
++++}
})();

var+ShProg+=+{
Create:+function+(shaderList)+{
++++var+shaderObjs+=+[];
++++for+(var+i_sh+=+0;+i_sh+<+shaderList.length;+%2B%2Bi_sh)+{
++++++++var+shderObj+=+this.Compile(shaderList[i_sh].source,+shaderList[i_sh].stage);
++++++++if+(shderObj)+shaderObjs.push(shderObj);
++++}
++++var+prog+=+{}
++++prog.progObj+=+this.Link(shaderObjs)
++++if+(prog.progObj)+{
++++++++prog.attrInx+=+{};
++++++++var+noOfAttributes+=+gl.getProgramParameter(prog.progObj,+gl.ACTIVE_ATTRIBUTES);
++++++++for+(var+i_n+=+0;+i_n+<+noOfAttributes;+%2B%2Bi_n)+{
++++++++++++var+name+=+gl.getActiveAttrib(prog.progObj,+i_n).name;
++++++++++++prog.attrInx[name]+=+gl.getAttribLocation(prog.progObj,+name);
++++++++}
++++++++prog.uniLoc+=+{};
++++++++var+noOfUniforms+=+gl.getProgramParameter(prog.progObj,+gl.ACTIVE_UNIFORMS);
++++++++for+(var+i_n+=+0;+i_n+<+noOfUniforms;+%2B%2Bi_n)+{
++++++++++++var+name+=+gl.getActiveUniform(prog.progObj,+i_n).name;
++++++++++++prog.uniLoc[name]+=+gl.getUniformLocation(prog.progObj,+name);
++++++++}
++++}
++++return+prog;
},
AttrI:+function+(prog,+name)+{+return+prog.attrInx[name];+},
UniformL:+function+(prog,+name)+{+return+prog.uniLoc[name];+},
Use:+function+(prog)+{+gl.useProgram(prog.progObj);+},
SetI1:+function+(prog,+name,+val)+{+if+(prog.uniLoc[name])+gl.uniform1i(prog.uniLoc[name],+val);+},
SetF1:+function+(prog,+name,+val)+{+if+(prog.uniLoc[name])+gl.uniform1f(prog.uniLoc[name],+val);+},
SetF2:+function+(prog,+name,+arr)+{+if+(prog.uniLoc[name])+gl.uniform2fv(prog.uniLoc[name],+arr);+},
SetF3:+function+(prog,+name,+arr)+{+if+(prog.uniLoc[name])+gl.uniform3fv(prog.uniLoc[name],+arr);+},
SetF4:+function+(prog,+name,+arr)+{+if+(prog.uniLoc[name])+gl.uniform4fv(prog.uniLoc[name],+arr);+},
SetM33:+function+(prog,+name,+mat)+{+if+(prog.uniLoc[name])+gl.uniformMatrix3fv(prog.uniLoc[name],+false,+mat);+},
SetM44:+function+(prog,+name,+mat)+{+if+(prog.uniLoc[name])+gl.uniformMatrix4fv(prog.uniLoc[name],+false,+mat);+},
Compile:+function+(source,+shaderStage)+{
++++var+shaderScript+=+document.getElementById(source);
++++if+(shaderScript)
++++++++source+=+shaderScript.text;
++++var+shaderObj+=+gl.createShader(shaderStage);
++++gl.shaderSource(shaderObj,+source);
++++gl.compileShader(shaderObj);
++++var+status+=+gl.getShaderParameter(shaderObj,+gl.COMPILE_STATUS);
++++if+(!status)+alert(gl.getShaderInfoLog(shaderObj));
++++return+status+?+shaderObj+:+null;
},
Link:+function+(shaderObjs)+{
++++var+prog+=+gl.createProgram();
++++for+(var+i_sh+=+0;+i_sh+<+shaderObjs.length;+%2B%2Bi_sh)
++++++++gl.attachShader(prog,+shaderObjs[i_sh]);
++++gl.linkProgram(prog);
++++status+=+gl.getProgramParameter(prog,+gl.LINK_STATUS);
++++if+(+!status+)+alert(gl.getProgramInfoLog(prog));
++++return+status+?+prog+:+null;
}+};

var+Texture+=+{};
Texture.HandleLoadedTexture2D+=+function(+image,+texture,+flipY+)+{
++++gl.activeTexture(+gl.TEXTURE0+);
++++gl.bindTexture(+gl.TEXTURE_2D,+texture+);
++++gl.pixelStorei(+gl.UNPACK_FLIP_Y_WEBGL,+flipY+!=+undefined+&&+flipY+==+true+);
++++gl.texImage2D(+gl.TEXTURE_2D,+0,+gl.RGBA,+gl.RGBA,+gl.UNSIGNED_BYTE,+image+);
++++gl.texParameteri(+gl.TEXTURE_2D,+gl.TEXTURE_MAG_FILTER,+gl.LINEAR+);
++++gl.texParameteri(+gl.TEXTURE_2D,+gl.TEXTURE_MIN_FILTER,+gl.LINEAR+);
++++gl.texParameteri(+gl.TEXTURE_2D,+gl.TEXTURE_WRAP_S,+gl.REPEAT+);
++	gl.texParameteri(+gl.TEXTURE_2D,+gl.TEXTURE_WRAP_T,+gl.REPEAT+);
++++gl.bindTexture(+gl.TEXTURE_2D,+null+);
++++return+texture;
}
Texture.LoadTexture2D+=+function(+name,+flip+)+{
++++var+texture+=+gl.createTexture();
++++texture.image+=+new+Image();
++++texture.image.setAttribute('crossorigin',+'anonymous');
++++texture.image.onload+=+function+()+{
++++++++Texture.HandleLoadedTexture2D(+texture.image,+texture,+flip+)
++++}
++++texture.image.src+=+name;
++++return+texture;
}

initScene();

})();|1462762|#gui+{+position+:+absolute;+top+:+0;+left+:+0;+}|1462763|<script+id="draw-shader-vs"+type="x-shader/x-vertex">
precision+mediump+float;

attribute+vec2+inPos;
varying+++vec2+vertPos;

void+main()
{
++++vertPos+++++=+inPos;
++++gl_Position+=+vec4(+inPos,+0.0,+1.0+);
}
</script>

<script+id="draw-shader-fs"+type="x-shader/x-fragment">
precision+mediump+float;

varying+vec2++++++vertPos;
uniform+sampler2D+u_texture;
uniform+sampler2D+u_maskTexture;
uniform+vec2++++++u_vpsize;
uniform+vec2++++++u_mouse;
uniform+float+++++u_maxDistance;
uniform+float+++++u_exponent;
uniform+float+++++u_lightup;

void+main()
{
++++float+aspect+++++++=+u_vpsize[0]/u_vpsize[1];
++++vec2++distVec++++++=+(vertPos+-+u_mouse)+*+vec2(max(1.0,aspect),+max(1.0,1.0/aspect));
++++float+distance+++++=+length(distVec);
++++float+mixK+++++++++=+pow(+distance+/+u_maxDistance,+u_exponent+);+
++++vec2++texCoord+++++=+vertPos+*+0.5+%2B+0.5;
++++vec3++texColor+++++=+texture2D(+u_texture,+texCoord.st+).rgb;
++++vec3++grayColor++++=+vec3(+0.2126+*+texColor.r+%2B+0.7152+*+texColor.g+%2B+0.0722+*+texColor.b+);
++++vec2++maskTexCoord+=+0.5+%2B+0.5+*+distVec+/+u_maxDistance;+
++++float+mask+++++++++=+texture2D(+u_maskTexture,+maskTexCoord+).a;
++++vec3++finalColor+++=+mix(+grayColor,+texColor+*+u_lightup,+(+1.0+-+clamp(+mixK,+0.0,+1.0+)+)+*+mask+);
++++gl_FragColor+++++++=+vec4(+finalColor.rgb,+1.0+);
}
</script>

<form+id="gui"+name="inputs">
<table>
++++<tr>+<td>+<font+color=+#CCF>max.+distance</font>+</td>+
++++++++++++<td>+<input+type="range"+id="maxDist"+min="1"+max="100"+value="33"/></td>+</tr>
++++<tr>+<td>+<font+color=+#CCF>exponent</font>+</td>+
++++++++++++<td>+<input+type="range"+id="exponent"+min="1"+max="300"+value="100"/></td>+</tr>
++++<tr>+<td>+<font+color=+#CCF>light+up</font>+</td>+
++++++++++++<td>+<input+type="range"+id="lightup"+min="50"+max="200"+value="150"/></td>+</tr>
</table>
</form>

<canvas+id="scene-canvas"+style="border:+none"></canvas>|1462764|1462765|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Luma_(video%2529),%2520[Seven%2520grayscale%2520conversion%2520algorithms](http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/).^0|Z|1G|2Z|C|0|0|0|0|D|7|X|D|0|4|6|0|0|5|8|I|D|0|0|0|0|6|3|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2B|8|@$9|2C|A|2D|B|C]]|D|@$9|2E|A|2F|1|2G]]|E|$]]|$1|F|3|G|5|6|7|2H|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|2I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|2J|8|@$9|2K|A|2L|B|C]|$9|2M|A|2N|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|2O|8|@$9|2P|A|2Q|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|2R|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|2S|8|@$9|2T|A|2U|B|C]|$9|2V|A|2W|B|C]]|D|@]|E|$]]|$1|U|3|V|5|J|7|2X|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|2Z|8|@]|D|@]|E|$K|L]]|$1|10|3|11|5|6|7|30|8|@$9|31|A|32|B|C]]|D|@]|E|$]]|$1|12|3|13|5|J|7|33|8|@]|D|@]|E|$K|L]]|$1|14|3|15|5|6|7|34|8|@]|D|@]|E|$]]|$1|16|3|17|5|J|7|35|8|@]|D|@]|E|$K|L]]|$1|18|3|19|5|6|7|36|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|6|7|37|8|@]|D|@]|E|$]]|$1|1C|3|1D|5|J|7|38|8|@]|D|@]|E|$K|L]]|$1|1E|3|1F|5|6|7|39|8|@]|D|@]|E|$]]|$1|1G|3|1H|5|J|7|3A|8|@]|D|@]|E|$K|L]]|$1|1I|3|1J|5|6|7|3B|8|@]|D|@]|E|$]]|$1|1K|3|1L|5|6|7|3C|8|@]|D|@]|E|$]]|$1|1M|3|1N|5|J|7|3D|8|@]|D|@]|E|$K|L]]|$1|1O|3|1P|5|6|7|3E|8|@]|D|@]|E|$]]|$1|1Q|3|1R|5|J|7|3F|8|@]|D|@]|E|$K|L]]|$1|1S|3|1T|5|6|7|3G|8|@]|D|@]|E|$]]|$1|1U|3|1V|5|6|7|3H|8|@]|D|@]|E|$]]|$1|1W|3|1X|5|J|7|3I|8|@]|D|@]|E|$K|L]]|$1|1Y|3|1Z|5|J|7|3J|8|@]|D|@]|E|$K|L]]|$1|20|3|21|5|J|7|3K|8|@]|D|@]|E|$K|L]]|$1|22|3|1V|5|6|7|3L|8|@]|D|@]|E|$]]|$1|23|3|-4|5|6|7|3M|8|@]|D|@]|E|$]]]|24|$25|$5|26|27|28|E|$29|2A]]]]

<p>You need a fragment shader, which colors the image depending on a distance.
A black and white color is usually created with the formula <code>gray = 0.2126 * red + 0.7152 * green + 0.0722 * blue</code> (On the web there are different luminance formulas and explanations: <a href="https://en.wikipedia.org/wiki/Luma_(video)" rel="nofollow noreferrer">Luma (video)</a>, <a href="http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/" rel="nofollow noreferrer">Seven grayscale conversion algorithms</a>.)
Depending on the distance, you interpolate between the original color and the black and white color.</p>

<p>For this you need different uniform variables:</p>

<pre><code>uniform vec2 u_mouse;
uniform vec2 u_maxDistance;
</code></pre>

<p>These are the center point of the area to be colored (<code>u_mouse</code>) and the maximum radius of the area to be colored (<code>u_maxDistance</code>).</p>

<p>The distance between the current fragment and the center point of the image can be calculated with <code>length</code>:</p>

<pre><code>vec2 fragmentPos = ...;
float distance   = length( fragmentPos - u_mouse );
</code></pre>

<p>The mixing ratio is calculated by dividing the distance <code>distance</code> and the maximum distance <code>u_maxDistance</code>:</p>

<pre><code>float mixK = distance / u_maxDistance;
</code></pre>

<p>You can also experiment with a nonlinear mixing ratio:</p>

<pre><code>float mixK = pow( distance / u_maxDistance, 2.0 );
</code></pre>

<p>We interpolate between the colors with the function <code>mix</code>:</p>

<pre><code>vec3 texColor   = ...;
vec3 grayColor  = vec3( 0.2126 * texColor.r + 0.7152 * texColor.g + 0.0722 * texColor.b );
vec3 finalColor = mix( texColor, grayColor, clamp( mixK, 0.0, 1.0 ) );
</code></pre>

<p>If you want to light up the affected area you have to multiply the color with a value greater than 1.0:</p>

<pre><code>vec3 finalColor = mix( texColor * 1.2, grayColor, clamp( mixK, 0.0, 1.0 ) );
</code></pre>

<p>The final vertex shader and fragment shader:</p>

<h2>Vertex Shader</h2>

<pre><code>precision mediump float;

attribute vec2 inPos;
varying   vec2 vertPos;

void main()
{
    vertPos     = inPos;
    gl_Position = vec4( inPos, 0.0, 1.0 );
}
</code></pre>

<h2>Fragment Shader</h2>

<pre><code>precision mediump float;

varying vec2      vertPos;
uniform sampler2D u_texture;
uniform vec2      u_mouse;
uniform float     u_maxDistance;

void main()
{
    float distance  = length( vertPos - u_mouse);
    float mixK      = pow( distance / u_maxDistance, 2.0 ); 
    vec2 texCoord   = vertPos * 0.5 + 0.5;
    vec3 texColor   = texture2D( u_texture, texCoord.st ).rgb;
    vec3 grayColor  = vec3( 0.2126 * texColor.r + 0.7152 * texColor.g + 0.0722 * texColor.b );
    vec3 finalColor = mix( texColor * 1.2, grayColor, clamp( mixK, 0.0, 1.0 ) ); 
    gl_FragColor    = vec4( finalColor.rgb, 1.0 );
}
</code></pre>

<h2>Mask</h2>

<p>If you want a mask for the affected area you need a mask texture with one channel. The channel indicates how much the area is affected. You further have to calculate the texture coordinates for the mask in relation to the mouse position and the size of the effected area.</p>

<pre><code>vec2 maskTexCoord = 0.5 + 0.5 * (vertPos - u_mouse) / u_maxDistance; 
float mask        = texture2D( u_maskTexture, maskTexCoord ).x;
vec3 finalColor   = mix( grayColor, texColor * u_lightup, mask );
</code></pre>

<p>To avoid that the mask repeats, you have to implement a rangecheck:</p>

<pre><code>vec2 rangeTest    = step( vec2(0.0), maskTexCoord ) * step( maskTexCoord, vec2(1.0) );   
mask             *= rangeTest.x * rangeTest.y; 
</code></pre>

<p>See the following example, where the implementation for a circular area and mask is mixed:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function loadscene() {    

var canvas, gl, prog, bufObj = {}, textureObj, maskTextureObj;
       
function render(deltaMS){

    var maxDist = document.getElementById( "maxDist" ).value / 100;
    var exponent = document.getElementById( "exponent" ).value / 100;
    var lightup = document.getElementById( "lightup" ).value / 100;

    gl.viewport( 0, 0, vp_size[0], vp_size[1] );
    gl.enable( gl.DEPTH_TEST );
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
    var texUnit = 0;
    gl.activeTexture( gl.TEXTURE0 + texUnit );
    gl.bindTexture( gl.TEXTURE_2D, textureObj );
    var maskTexUnit = 1;
    gl.activeTexture( gl.TEXTURE0 + maskTexUnit );
    gl.bindTexture( gl.TEXTURE_2D, maskTextureObj );
    ShProg.Use( progDraw );
    var pos = [ 2.0, 2.0 ];
    if (mousePos[0] &gt; 0 &amp;&amp; mousePos[1] &gt; 0 )
        pos = [2.0 * mousePos[0] / vp_size[0] - 1.0, 1.0 - 2.0 * mousePos[1] / vp_size[1]];
    ShProg.SetF2( progDraw, "u_vpsize", vp_size );
    ShProg.SetF2( progDraw, "u_mouse", pos );
    ShProg.SetF1( progDraw, "u_maxDistance", maxDist );
    ShProg.SetF1( progDraw, "u_exponent", exponent );
    ShProg.SetF1( progDraw, "u_lightup", lightup );
    ShProg.SetI1( progDraw, "u_texture", texUnit );
    ShProg.SetI1( progDraw, "u_maskTexture", maskTexUnit );
    gl.enableVertexAttribArray( progDraw.inPos );
    gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
    gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 ); 
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
    gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
    gl.disableVertexAttribArray( progDraw.pos );

    requestAnimationFrame(render);
}  

function initScene() {

    canvas = document.getElementById( "scene-canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if ( !gl )
      return;

    textureObj = Texture.LoadTexture2D( "https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/supermario.jpg", true );  
    maskTextureObj = Texture.LoadTexture2D( "https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/bat.png", true );  

    
    progDraw = ShProg.Create( 
      [ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
        { source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
      ] );
    progDraw.inPos = gl.getAttribLocation( progDraw.progObj, "inPos" );
    if ( progDraw.progObj == 0 )
        return;

    var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
    var inx = [ 0, 1, 2, 0, 2, 3 ];
    bufObj.pos = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
    bufObj.inx = gl.createBuffer();
    bufObj.inx.len = inx.length;
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );

    window.onresize = resize;
    resize();
    requestAnimationFrame(render);
}

function resize() {
    //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
    vp_size = [window.innerWidth, window.innerHeight]
    //vp_size = [256, 256]
    canvas.width = vp_size[0];
    canvas.height = vp_size[1];
}

var mousePos = [-1, -1];
(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        if (event.pageX == null &amp;&amp; event.clientX != null) {
            eventDoc = (event.target &amp;&amp; event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc &amp;&amp; doc.scrollLeft || body &amp;&amp; body.scrollLeft || 0) -
              (doc &amp;&amp; doc.clientLeft || body &amp;&amp; body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc &amp;&amp; doc.scrollTop  || body &amp;&amp; body.scrollTop  || 0) -
              (doc &amp;&amp; doc.clientTop  || body &amp;&amp; body.clientTop  || 0 );
        }

        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;
        mousePos = [-1, -1];
        if ( x &gt;= 0 &amp;&amp; x &lt; canvas.width &amp;&amp; y &gt;= 0 &amp;&amp; y &lt; canvas.height ) {
            mousePos = [x, y]; 
        }
    }
})();

var ShProg = {
Create: function (shaderList) {
    var shaderObjs = [];
    for (var i_sh = 0; i_sh &lt; shaderList.length; ++i_sh) {
        var shderObj = this.Compile(shaderList[i_sh].source, shaderList[i_sh].stage);
        if (shderObj) shaderObjs.push(shderObj);
    }
    var prog = {}
    prog.progObj = this.Link(shaderObjs)
    if (prog.progObj) {
        prog.attrInx = {};
        var noOfAttributes = gl.getProgramParameter(prog.progObj, gl.ACTIVE_ATTRIBUTES);
        for (var i_n = 0; i_n &lt; noOfAttributes; ++i_n) {
            var name = gl.getActiveAttrib(prog.progObj, i_n).name;
            prog.attrInx[name] = gl.getAttribLocation(prog.progObj, name);
        }
        prog.uniLoc = {};
        var noOfUniforms = gl.getProgramParameter(prog.progObj, gl.ACTIVE_UNIFORMS);
        for (var i_n = 0; i_n &lt; noOfUniforms; ++i_n) {
            var name = gl.getActiveUniform(prog.progObj, i_n).name;
            prog.uniLoc[name] = gl.getUniformLocation(prog.progObj, name);
        }
    }
    return prog;
},
AttrI: function (prog, name) { return prog.attrInx[name]; },
UniformL: function (prog, name) { return prog.uniLoc[name]; },
Use: function (prog) { gl.useProgram(prog.progObj); },
SetI1: function (prog, name, val) { if (prog.uniLoc[name]) gl.uniform1i(prog.uniLoc[name], val); },
SetF1: function (prog, name, val) { if (prog.uniLoc[name]) gl.uniform1f(prog.uniLoc[name], val); },
SetF2: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform2fv(prog.uniLoc[name], arr); },
SetF3: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform3fv(prog.uniLoc[name], arr); },
SetF4: function (prog, name, arr) { if (prog.uniLoc[name]) gl.uniform4fv(prog.uniLoc[name], arr); },
SetM33: function (prog, name, mat) { if (prog.uniLoc[name]) gl.uniformMatrix3fv(prog.uniLoc[name], false, mat); },
SetM44: function (prog, name, mat) { if (prog.uniLoc[name]) gl.uniformMatrix4fv(prog.uniLoc[name], false, mat); },
Compile: function (source, shaderStage) {
    var shaderScript = document.getElementById(source);
    if (shaderScript)
        source = shaderScript.text;
    var shaderObj = gl.createShader(shaderStage);
    gl.shaderSource(shaderObj, source);
    gl.compileShader(shaderObj);
    var status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
    if (!status) alert(gl.getShaderInfoLog(shaderObj));
    return status ? shaderObj : null;
},
Link: function (shaderObjs) {
    var prog = gl.createProgram();
    for (var i_sh = 0; i_sh &lt; shaderObjs.length; ++i_sh)
        gl.attachShader(prog, shaderObjs[i_sh]);
    gl.linkProgram(prog);
    status = gl.getProgramParameter(prog, gl.LINK_STATUS);
    if ( !status ) alert(gl.getProgramInfoLog(prog));
    return status ? prog : null;
} };

var Texture = {};
Texture.HandleLoadedTexture2D = function( image, texture, flipY ) {
    gl.activeTexture( gl.TEXTURE0 );
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, flipY != undefined &amp;&amp; flipY == true );
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
  	gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT );
    gl.bindTexture( gl.TEXTURE_2D, null );
    return texture;
}
Texture.LoadTexture2D = function( name, flip ) {
    var texture = gl.createTexture();
    texture.image = new Image();
    texture.image.setAttribute('crossorigin', 'anonymous');
    texture.image.onload = function () {
        Texture.HandleLoadedTexture2D( texture.image, texture, flip )
    }
    texture.image.src = name;
    return texture;
}

initScene();

})();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#gui { position : absolute; top : 0; left : 0; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script id="draw-shader-vs" type="x-shader/x-vertex"&gt;
precision mediump float;

attribute vec2 inPos;
varying   vec2 vertPos;

void main()
{
    vertPos     = inPos;
    gl_Position = vec4( inPos, 0.0, 1.0 );
}
&lt;/script&gt;

&lt;script id="draw-shader-fs" type="x-shader/x-fragment"&gt;
precision mediump float;

varying vec2      vertPos;
uniform sampler2D u_texture;
uniform sampler2D u_maskTexture;
uniform vec2      u_vpsize;
uniform vec2      u_mouse;
uniform float     u_maxDistance;
uniform float     u_exponent;
uniform float     u_lightup;

void main()
{
    float aspect       = u_vpsize[0]/u_vpsize[1];
    vec2  distVec      = (vertPos - u_mouse) * vec2(max(1.0,aspect), max(1.0,1.0/aspect));
    float distance     = length(distVec);
    float mixK         = pow( distance / u_maxDistance, u_exponent ); 
    vec2  texCoord     = vertPos * 0.5 + 0.5;
    vec3  texColor     = texture2D( u_texture, texCoord.st ).rgb;
    vec3  grayColor    = vec3( 0.2126 * texColor.r + 0.7152 * texColor.g + 0.0722 * texColor.b );
    vec2  maskTexCoord = 0.5 + 0.5 * distVec / u_maxDistance; 
    float mask         = texture2D( u_maskTexture, maskTexCoord ).a;
    vec3  finalColor   = mix( grayColor, texColor * u_lightup, ( 1.0 - clamp( mixK, 0.0, 1.0 ) ) * mask );
    gl_FragColor       = vec4( finalColor.rgb, 1.0 );
}
&lt;/script&gt;

&lt;form id="gui" name="inputs"&gt;
&lt;table&gt;
    &lt;tr&gt; &lt;td&gt; &lt;font color= #CCF&gt;max. distance&lt;/font&gt; &lt;/td&gt; 
            &lt;td&gt; &lt;input type="range" id="maxDist" min="1" max="100" value="33"/&gt;&lt;/td&gt; &lt;/tr&gt;
    &lt;tr&gt; &lt;td&gt; &lt;font color= #CCF&gt;exponent&lt;/font&gt; &lt;/td&gt; 
            &lt;td&gt; &lt;input type="range" id="exponent" min="1" max="300" value="100"/&gt;&lt;/td&gt; &lt;/tr&gt;
    &lt;tr&gt; &lt;td&gt; &lt;font color= #CCF&gt;light up&lt;/font&gt; &lt;/td&gt; 
            &lt;td&gt; &lt;input type="range" id="lightup" min="50" max="200" value="150"/&gt;&lt;/td&gt; &lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;

&lt;canvas id="scene-canvas" style="border: none"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


<p>I am trying to make an interesting effect using WebGL.
In my fragment shader I have the following line which draws my texture in black and white:</p>

<pre><code>gl_FragColor = vec4(vec3(color0.r+color0.g+color0.b)/3.0, color0.a);
</code></pre>

<p>Where <code>color0</code> is the color of the texture.
In the shader I also have a <code>uniform vec2 u_mouse</code> which is passed in from my javascript code as the mouse coordinates on the screen.
Now what I want is to be able to move the mouse, and part of the image would colorize inside the given radius like in the picture:</p>

<p><a href="https://i.stack.imgur.com/S0Ojk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S0Ojk.jpg" alt="Picture of effect"></a></p>

<p>My idea is to have a mask, which has a white circle on it, which will move with the mouse, but I have no idea how to do the image processing afterwards...
I also would like for the animation no be smooth, like an interpolation between the mouse values.</p>

<p>Thanks!</p>


WebGL shader to color the texture according to mouse position

图像处理

我正试着用WebGL做一个有趣的效果。在我的片段着色器中，我有下面的线，它用黑白绘制我的纹理：gl_FragColor = vec4(vec3(color0.r+color0.g+color0.b)/3.0, color0.a);其中color0是纹理的颜色。在着色器中，我还有一个uniform vec2 u_mous...

问根据鼠标位置为纹理着色的WebGL着色器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据鼠标位置为纹理着色的WebGL着色器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据鼠标位置为纹理着色的WebGL着色器
EN