4

ビデオテクスチャを持つthree.jsオブジェクトにシェーダーを適用する方法がわかりません。

私はwebRTCとthree.jsで遊んでいて、標準のマテリアルを使用してビデオテクスチャをメッシュに正常にマッピングしました。

        var material    = new THREE.MeshBasicMaterial({
            color   : 0xffffff,
            map : videoTexture
        });

このテクスチャにシェーダー（この例ではsobelシェーダー）を適用して、さらに一歩進めたいと思います。私の試みはここにあります：http：//jsfiddle.net/xkpsE/1/

大量のINVALID_OPERATION警告を受け取りましたが、問題のデバッグ方法を理解するのに問題があります。私も他の誰もこれをしているのを見たことがないので、この知識が公開されることは有益だと思います:)

どんな助けでもいただければ幸いです。

4

1 に答える 1

5

あなたは近かった。ここにあります：http：//jsfiddle.net/82fJh/1/。少なくともOSXのChromeで動作します。

シェーダーユニフォームのフォーマットエラーがいくつかあり、UVを変化として渡す必要がありました。

var sobelShader = {
    uniforms: {
        'texture': {
            type: 't',
            value: videoTexture
        },
         'width': {
            type: 'f',
            value: 320.0
        },
         'height': {
            type: 'f',
            value: 240.0
        }
    },
    vertexShader: [
        'varying vec2 vUv;',
        'void main() {',
           'vUv = uv;',
           'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
        '}'
        ].join('\n'),
    fragmentShader: [
        'uniform sampler2D texture;',
        'uniform float width;',
        'uniform float height;',
        'varying vec2 vUv;',
        'void main(void) {',
            'float w = 1.0/width;',
            'float h = 1.0/height;',
            'vec2 texCoord = vUv;',
            'vec4 n[9];',
            'n[0] = texture2D(texture, texCoord + vec2( -w, -h));',
            'n[1] = texture2D(texture, texCoord + vec2(0.0, -h));',
            'n[2] = texture2D(texture, texCoord + vec2(  w, -h));',
            'n[3] = texture2D(texture, texCoord + vec2( -w, 0.0));',
            'n[4] = texture2D(texture, texCoord);',
            'n[5] = texture2D(texture, texCoord + vec2(  w, 0.0));',
            'n[6] = texture2D(texture, texCoord + vec2( -w, h));',
            'n[7] = texture2D(texture, texCoord + vec2(0.0, h));',
            'n[8] = texture2D(texture, texCoord + vec2(  w, h));',
            'vec4 sobel_horizEdge = n[2] + (2.0*n[5]) + n[8] - (n[0] + (2.0*n[3]) + n[6]);',
            'vec4 sobel_vertEdge  = n[0] + (2.0*n[1]) + n[2] - (n[6] + (2.0*n[7]) + n[8]);',
            'vec3 sobel = sqrt((sobel_horizEdge.rgb * sobel_horizEdge.rgb) + (sobel_vertEdge.rgb * sobel_vertEdge.rgb));',
            'gl_FragColor = vec4( sobel, 1.0 );',
        '}'
        ].join('\n')
}

three.js r.53

于 2012-12-24T07:26:08.220 に答える