Three.js使用WebRTC並應用着色器

Question

我無法弄清楚如何將着色器應用於具有視頻紋理的three.js對象。

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

我希望把它一步通過應用着色器（：

我一直使用的標準材料玩弄的WebRTC和three.js所和成功繪製視頻紋理到網對於這個例子是一個sobel着色器）。我的嘗試是在這裏：http://jsfiddle.net/xkpsE/1/

我收到一堆INVALID_OPERATION警告，但無法理解如何調試問題。我還沒有看到任何人這樣做，所以我認爲這將是有益的這些知識是公共:)

任何幫助，將不勝感激。

Answer 1

你很近。這裏是：http://jsfiddle.net/82fJh/1/。它至少可以在OS X的Chrome上運行。

你有一些着色器制服格式錯誤，你需要通過紫外光作爲一個變。

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