WebGLを描写しているcanvasを、canvasの2D Contextのfilterでぼかす
AR的なツールで遊んでいる際に、ツール側はCanvasにWebGLを用いて描写をしており、この場合canvasのfilterは使えない
- canvasには2d、webgl、webgl2、bitmaprendererなどがある模様
- 下記の通りCanvasRenderingContext2Dにはfilterが存在するが、
- webglには存在しない
WebGLなんて5年以上前にThree.js触ったとき以来で全く覚えておらず、「ぼかし」を入れたいだけなのにWebGLを学び直す気もしないという感じだったので困っていた。
2Dに転写してからぼかせばよい感じらしい
<canvas id="canvas-webgl" style="display:none"></canvas>
<canvas id="canvas-2d"></canvas>
const canvas = document.getElementById('canvas-webgl'); // これはツールで指定しててよしなに変更されている
const canvas2d = document.getElementById("canvas-2d"); // これは上で記載しただけで何もしていない
const ctx = canvas2d.getContext('2d');
// const ctx = canvas.getContext('2d'); // これは取れない
// const ctx = canvas.getContext('webgl'); // これなら取れる場合
ctx.filter = 'blur(5px)'; // 数値はテキトー
ctx.shadowBlur = 5;
draw2DCanvas(); // webglの描写前に実行すると動かない
// canvasはVideoが動いているのでよしなに描写し続ける
function draw2DCanvas(){
ctx.clearRect(0,0, canvas2d.width, canvas2d.height);
ctx.drawImage(canvas, 0, 0); // ここで転写
requestAnimationFrame(draw2DCanvas); // videoなので繰り返し描写
}
Author And Source
この問題について(WebGLを描写しているcanvasを、canvasの2D Contextのfilterでぼかす), 我々は、より多くの情報をここで見つけました https://qiita.com/miyawa-tarou/items/204db69793ccf34481b4著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .