Three.js 使用 WebRTC 并应用着色器 [英] Three.js using WebRTC and applying a Shader
问题描述
我不知道如何将着色器应用于具有视频纹理的three.js 对象.
I can't figure out how to apply a shader to a three.js object that has a video texture.
我一直在玩 webRTC 和three.js,并成功地使用标准材质将视频纹理映射到网格上:
I've been playing around with webRTC and three.js and successfully mapped a video texture onto a mesh using a standard material:
var material = new THREE.MeshBasicMaterial({
color : 0xffffff,
map : videoTexture
});
我想更进一步,将着色器(在本例中为 sobel 着色器)应用到该纹理.我的尝试在这里:http://jsfiddle.net/xkpsE/1/
I want to take it one step further by applying a shader (for this example a sobel shader) to this texture. My attempt is here: http://jsfiddle.net/xkpsE/1/
我收到了一堆 INVALID_OPERATION 警告,但我无法理解如何调试问题.我也没有看到其他人这样做,所以我认为将这些知识公开是有益的:)
I'm receiving a bunch of INVALID_OPERATION warnings, but am having trouble understanding how to debug the issue. I also haven't seen anyone else do this so I think it would be beneficial for this knowledge to be public :)
任何帮助将不胜感激.
推荐答案
你已经接近了.这是:http://jsfiddle.net/82fJh/1/.它至少可以在 OS X 上的 Chrome 下运行.
You were close. Here it is: http://jsfiddle.net/82fJh/1/. It works under Chrome on OS X, at least.
您有一些着色器统一格式错误,您需要将 uv 作为变量传递.
You had some shader uniforms formatting errors, and you needed to pass the uv's as a varying.
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
three.js r.53
这篇关于Three.js 使用 WebRTC 并应用着色器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!