如何解决THREE.JS | GLSL使用画布作为着色器均匀纹理
我正在尝试使用画布作为均匀纹理:
false
也尝试过:
uniforms = {
canvasTexture: { type: "t",value: new THREE.Texture(canvas) }
};
但是我只看到黑屏。
我也试图通过animate()更新制服:
uniforms = {
canvasTexture: { type: "t",value: new THREE.CanvasTexture(canvas) }
};
没有成功。有任何怀疑吗?
mesh.material.uniforms.canvasTexture.needsUpdate = true;
var renderer,scene,camera,canvas,ctx,mesh,canvasTexture;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth,window.innerHeight );
camera = new THREE.OrthographicCamera( - 1,1,- 1,1 );
scene = new THREE.Scene();
var canvas = document.createElement("canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
ctx = canvas.getContext("2d");
var geometry = new THREE.PlaneBufferGeometry( 2,2 );
uniforms = {
canvasTexture: { type: "t",value: new THREE.Texture(canvas) }
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,vertexShader: document.getElementById( "vs-canvasTest" ).textContent,fragmentShader: document.getElementById( "fs-canvasTest" ).textContent,} );
mesh = new THREE.Mesh( geometry,material );
scene.add( mesh );
window.addEventListener("resize",onWindowResize,false);
animate();
function onWindowResize() {
renderer.setSize( window.innerWidth,window.innerHeight );
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene,camera );
ctx.fillRect(0,canvas.width,canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fill();
mesh.material.uniforms.canvasTexture.needsUpdate = true;
}
body { margin: 0; }
解决方法
这是一个小错误,我也一直犯错。这是您现在拥有的:
mesh.material.uniforms.canvasTexture.needsUpdate = true;
这是您需要的:
mesh.material.uniforms.canvasTexture.value.needsUpdate = true;
您只需要在.value
之前插入.needsUpdate
,就可以定位纹理而不是包含纹理的制服。
var renderer,scene,camera,canvas,ctx,mesh,tex;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth,window.innerHeight );
camera = new THREE.OrthographicCamera( - 1,1,- 1,1 );
scene = new THREE.Scene();
var canvas = document.createElement("canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
ctx = canvas.getContext("2d");
var geometry = new THREE.PlaneBufferGeometry( 2,2 );
uniforms = {
canvasTexture: { value: new THREE.Texture(canvas) }
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,vertexShader: document.getElementById( "vs-canvasTest" ).textContent,fragmentShader: document.getElementById( "fs-canvasTest" ).textContent,} );
mesh = new THREE.Mesh( geometry,material );
scene.add( mesh );
window.addEventListener("resize",onWindowResize,false);
animate();
function onWindowResize() {
renderer.setSize( window.innerWidth,window.innerHeight );
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene,camera );
ctx.fillRect(0,canvas.width,canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fill();
mesh.material.uniforms.canvasTexture.value.needsUpdate = true;
}
body { margin: 0; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<script src="https://unpkg.com/three@0.106.0/build/three.min.js"></script>
</head>
<body>
<script id="vs-canvasTest" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4( position,1.0 );
}
</script>
<script id="fs-canvasTest" type="x-shader/x-fragment">
varying vec2 vUv;
uniform sampler2D canvasTexture;
void main() {
gl_FragColor = texture2D(canvasTexture,vUv);
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。