non vorrei lavorare

2020年度からの小学校プログラミング教育の必修化を親として迎えるブロガーの書く、子供との日常

オフスクリーンでWebGLを描画して、それをCanvasにコピーする

この記事は@kjunichiの2017年パーソナルアドベントカレンダーの17日目の記事です 。

背景

WindowsでElectronで透明ウインドウを使ってWebGLを使うと頻繁に異常に動きが遅くなる。 そこで、直接WebGLを描画せず、オフスクリーンで描画して、Canvasに転送すれば解消しないかと思いつきやってみた。

WebGLの描画結果をCanvasにコピーする

以下のようにwebglのコンテキストをreadPixelsで描画結果を読み出せて、 それをImageDataに書き込むことでCanvasにコピー出来た。

どうやら、WebGLのバッファとCanvasのImageDataは上下が逆の模様。

      const sctx = renderer.domElement.getContext("webgl");
      const pdata =  new Uint8Array(4*cs3.width*cs3.height);
      sctx.readPixels(0,0,sctx.drawingBufferWidth,sctx.drawingBufferHeight,sctx.RGBA,sctx.UNSIGNED_BYTE,pdata);
      const dctx = cs3.getContext("2d");
      const image = dctx.getImageData(0,0,sctx.drawingBufferWidth,sctx.drawingBufferHeight);
      for(let y=0;y < sctx.drawingBufferHeight;y++){
        for(let x=0; x < sctx.drawingBufferWidth;x++) {
          image.data[4*((cs3.height-y)*cs3.width+x)+0] = pdata[4*(y*cs3.width+x)+0];
          image.data[4*((cs3.height-y)*cs3.width+x)+1] = pdata[4*(y*cs3.width+x)+1];
          image.data[4*((cs3.height-y)*cs3.width+x)+2] = pdata[4*(y*cs3.width+x)+2];
          image.data[4*((cs3.height-y)*cs3.width+x)+3] = pdata[4*(y*cs3.width+x)+3];
        }
      }
      dctx.putImageData(image,0,0);

改善したか

余計遅くなってしまったw

関連記事

5年前の記事

3年前の記事

1年前の記事