Javascript 三个像素化渲染目标？
我试图得到一个基本的渲染目标，在这里我渲染到一个场景，然后使用它作为纹理在四边形上渲染。我有一个基本的演示，但当我运行它时，结果是全部像素化的，就好像它被渲染到一个小屏幕上，然后被拉伸到整个四边形 这是我的密码：Javascript 三个像素化渲染目标？,javascript,three.js,rendertarget,Javascript,Three.js,Rendertarget,我试图得到一个基本的渲染目标，在这里我渲染到一个场景，然后使用它作为纹理在四边形上渲染。我有一个基本的演示，但当我运行它时，结果是全部像素化的，就好像它被渲染到一个小屏幕上，然后被拉伸到整个四边形 这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="three.min.js" type="text/javascript"></script>
<style>
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #ffffff;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="vertex-shader-test" type="x-shader/x-vertex">
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}
</script>
<script id="fragment-shader-test" type="x-shader/x-vertex">
void main() {
gl_FragColor = vec4(1,1,1,1);
}
</script>
<script id="vertex-shader-screen" type="x-shader/x-vertex">
varying vec2 vertexUV;
void main() {
vertexUV = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragment-shader-screen" type="x-shader/x-fragment">
precision highp float;
varying vec2 vertexUV;
uniform sampler2D rtTexture;
void main() {
gl_FragColor = texture2D(rtTexture, vertexUV);
}
</script>
<script>
var scene = null,
rtScene = null,
camera = null,
cameraRTT = null,
renderer = null,
plane = null;
var rtTexture;
init();
render();
function init()
{
container = document.getElementById( 'container' );
scene = new THREE.Scene();
rtScene = new THREE.Scene();
rtTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat });
camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1;
rtCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
rtCamera.position.z = 100;
rtCamera.position.y = 10;
var material2 = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertex-shader-test').textContent,
fragmentShader: document.getElementById('fragment-shader-test').textContent,
});
var geometry = new THREE.PlaneBufferGeometry(100, 100, 200, 200);
plane = new THREE.Mesh(geometry, material2);
plane.rotateX(-Math.PI / 2);
rtScene.add(plane);
var geometry = new THREE.PlaneBufferGeometry(1, 1);
var material = new THREE.ShaderMaterial({
uniforms: {
rtTexture: { type: "t", value: rtTexture }
},
vertexShader: document.getElementById('vertex-shader-screen').textContent,
fragmentShader: document.getElementById('fragment-shader-screen').textContent,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
container.appendChild( renderer.domElement );
}
function render() {
requestAnimationFrame(render);
camera.lookAt(new THREE.Vector3(0,0,0));
rtCamera.lookAt(new THREE.Vector3(0,0,0));
renderer.render(rtScene, rtCamera, rtTexture, true);
renderer.render(scene, camera);
}
</script>
</body>
</html>
身体{
颜色：#ffffff；
字体系列：Monospace；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
背景色：#000000；
边际：0px；
溢出：隐藏；
}
#信息{
位置：绝对位置；
顶部：0px；宽度：100%；
填充物：5px；
}
a{
颜色：#ffffff；
}
void main（）{
gl_位置=投影矩阵*视图矩阵*模型矩阵*向量4（位置，1.0）；
}
void main（）{
gl_FragColor=vec4（1,1,1,1）；
}
可变的vec2椎体；
void main（）{
vertexUV=紫外线；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
高精度浮点；
可变的vec2椎体；
纹理均匀；
void main（）{
gl_FragColor=纹理2D（rtTexture，vertexUV）；
}
var scene=null，
rtScene=null，
摄像头=空，
cameraratt=null，
渲染器=空，
平面=零；
纹理；
init（）；
render（）；
函数init（）
{
container=document.getElementById（'container'）；
场景=新的三个。场景（）；
rtScene=new THREE.Scene（）；
rtTexture=new THREE.WebGLRenderTarget（window.innerWidth，window.innerHeight，{minFilter:THREE.LinearFilter，magFilter:THREE.NearestFilter，format:THREE.RGBFormat}）；
摄像头=新的三个透视摄像头（20，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=1；
rtCamera=新的三透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
rtCamera.position.z=100；
rtCamera.position.y=10；
var material2=新的3.SHADER材质({
vertexShader:document.getElementById（'vertex-shader-test'）.textContent，
fragmentShader:document.getElementById（'fragment-shader-test'）.textContent，
});
var geometry=新的三个.PlaneBufferGeometry（100100200200）；
平面=新的三个网格（几何体、材料2）；
平面旋转（-Math.PI/2）；
rtScene.add（平面）；
var几何=新的三个。平面缓冲几何（1，1）；
var material=新的3.ShaderMaterial({
制服：{
rtTexture:{类型：“t”，值：rtTexture}
},
vertexShader:document.getElementById（'vertex-shader-screen'）.textContent，
fragmentShader:document.getElementById（'fragment-shader-screen'）.textContent，
});
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.autoClear=false；
container.appendChild（renderer.doElement）；
}
函数render（）{
请求动画帧（渲染）；
摄像机。注视（新三个。矢量3（0,0,0））；
rtCamera.lookAt（新三向量3（0,0,0））；
render.render（rtScene、rtCamera、rtTexture、true）；
渲染器。渲染（场景、摄影机）；
}
有什么想法吗？在渲染渲染目标映射到的平面时，您正在使用透视摄影机。这将导致渲染输出的大小随视野的不同而变化 例如，如果将摄影机的视野从20缩小到10，摄影机将进一步放大，并且您将获得更明显的步进效果（因为图像已进一步放大）。类似地，增加视野将缩小并减少步进 但是，对于本例中的内容，我将对输出渲染目标的主场景使用正交投影