0
私は、1つのシーンにレンダリングする場所で働く基本的なレンダリングターゲットを取得しようとしています。次に、クォードをレンダリングするためにテクスチャとして使用します。私は基本的なデモを持っていますが、実行すると小さな画面にレンダリングされているかのように結果がすべてピクセル化され、次にクワッド全体に伸びていきます。THREE JSピクセルレンダリングターゲット？
ここに私のコードです：
<!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>
任意のアイデア？