見出し画像

第6回　クリエイティブ・コード・スケッチ　テーマ ロゴ

斎藤健二

画像1



はじめに

クリエイティブ・コード・スケッチ・クラブの第6回目でテーマは「ロゴ」でした。

「春夏秋冬」が回り続けるものを作りました。

RenderTargetでマスク

今回はrenderTargetを使用していきます。

renderTargetは描画をスクリーンではなく、テクスチャにすることができます。photoshopのレイヤーみたいに描画ができるので、ポストエファクトなど表現の幅が広がります。

画像2

今回のデモは6個ほどrenderTargetを使用したので、あまりパフォーマンスがよくないです。stencilでマスクすればよかったなと思っています。

1. renderTargetを作成する。

baseRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);

※webglだと、、(別途texture作成しますが。。)

// texture前もって作成しているものとします。

const framebuffer = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);


2. renderTargetを描画のターゲットにする

renderer.setRenderTarget(baseRenderTarget);

renderer.render(scene, camera);

ターゲットをデフォルトのcanvasにしたいときは以下のようにします。

renderer.setRenderTarget(null);


3. renderTargetをテクスチャーとして描画に使用する

renderTargetはtextureプロパティがあります。

var texture = baseRenderTarget.texture;

// raw shader material のuniformsとして設定
var mat = new THREE.RawShaderMaterial({
    fragmentShader: fragmentShaderSrc,
    vertexShader: vertexShaderSrc,
    uniforms: {
        uTexture: {value: texture}
    }
})


制作風景

20倍速にして制作風景を録画してみました。

実際の作成には3時間ぐらいかかりました。


この記事が気に入ったらサポートをしてみませんか？