teratail 368646

https://teratail.com/questions/368646

by cx20

HTML

<script src="https://rawcdn.githack.com/bradley/Blotter/28a89fd0d5fd22ef46e01590df8cb3664c5a9ec2/build/blotter.js"></script>

<script id="fs" type="x-shader/x-fragment">
void mainImage( out vec4 mainImage, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / uResolution.xy;
    float d = distance(vec2(mouseX,mouseY), uv);
    float r = dot(fragCoord.xy, vec2(0.00005,0.00005))/d;
    vec2 tex = vec2(uv.x + r, uv.y + r);
    mainImage = textTexture(tex);
}
</script>

JavaScript

var text = new Blotter.Text("こんにちは", {
  family : "serif",
  size : 120,
  fill : "#171717"
});

var mainImageSource = document.getElementById("fs").textContent;
var material = new Blotter.ShaderMaterial(mainImageSource, {
  uniforms : {
    mouseX: {type :"1f", value : 0.0},
    mouseY: {type :"1f", value : 0.0}
  }
});

var blotter = new Blotter(material, { texts : text });
var scope = blotter.forText(text);
scope.appendTo(document.body);

scope.on("mousemove", function(mousePosition) {
  scope.material.uniforms.mouseX.value = mousePosition.x;
  scope.material.uniforms.mouseY.value = mousePosition.y;
});