###前提・実現したいこと
WebGLライブラリのthreeJSを使用してVRコンテンツを開発しているのですが、ポストプロセスをかけた状態でVR用に画面分割できないのですが何か対処法はないでしょうか?
###該当のソースコード
(function() { var canvasWidth , canvasHeight; var renderer , scene , composer; var camera , light; var spriteGroup , sprite ,spriteMaterial; var meshLength , meshGroup , geometry , material , mesh , wireGeometry , wireMaterial , wireMesh; var vignette , flim , effectCopy; var controls; var vr; var degree = 0 , rad = 0; //初期設定関数 function init() { canvasWidth = window.innerWidth; canvasHeight = window.innerHeight; mainWord = document.getElementById("main-word"); mainWord.style.width = canvasWidth + "px"; createScene_Renderer("canvas-wrapper"); //scene,renderer createCamera(0 , 200 , 0); //camera setOrientationControls(); //orientationControls createSprite(); //sprite(particle) createObject(); //object filtering(); //filter cameraRotationAnimation(); rendering(); //rendering //デバッグ用 console.log(); } //シーンとレンダラー作成関数 function createScene_Renderer() { scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x224444 , 1 , 200); //フォグ renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x224444); renderer.setSize(canvasWidth , canvasHeight); //デフォルトではbody下にcanvasを追加、引数を取った場合そのid名の付いたelement下に追加 if(arguments.length == 1) { var element = document.getElementById(arguments[0]); element.appendChild(renderer.domElement); } else if(arguments.length == 0) { document.body.appendChild(renderer.domElement); } } //////////////////// //フィルター関数 //////////////////// function filtering() { //ビネット vignette = new THREE.ShaderPass(THREE.VignetteShader); vignette.uniforms["darkness"].value = 1.5; //フィルム film = new THREE.ShaderPass(THREE.FilmShader); film.uniforms["sCount"].value = 2.5; film.uniforms["sIntensity"].value = 1.5; film.uniforms["nIntensity"].value = 1.5; film.uniforms["grayscale"].value = false; //エフェクト effectCopy = new THREE.ShaderPass(THREE.CopyShader); effectCopy.renderToScreen = true; //コンポーザー composer = new THREE.EffectComposer(renderer); composer.addPass(new THREE.RenderPass(scene , camera)); composer.addPass(vignette); composer.addPass(film); composer.addPass(effectCopy); } //カメラ作成関数 function createCamera(positionX , positionY , positionZ) { camera = new THREE.PerspectiveCamera(70 , canvasWidth / canvasHeight , 0.1 , 1000); camera.position.set(positionX , positionY , positionZ); camera.lookAt({x: 0 , y: 0 , z: 0}); camera.rotation.y = Math.PI * 1.5; camera.rotation.z = Math.PI * 1.5; } //モバイル判別用関数 function setOrientationControls() { var device = (function() { var user = navigator.userAgent if(user.indexOf("iPhone") > 0 || user.indexOf("iPod") > 0 || user.indexOf("Android") > 0 && user.indexOf("Mobile") > 0){ return "mobile"; } else { return; } })(); if(device == "mobile") { controls = new THREE.DeviceOrientationControls(camera); controlsUpdate(); //setVR(); } else { return; } } //////////////////// //VR用関数 //////////////////// function setVR() { vr = new THREE.StereoEffect(renderer); vrRendering(); } //スプライト作成用関数 function createSprite(positionX , positionY , positionZ) { var loader = new THREE.TextureLoader(); var spriteTexture = loader.load("./images/particle.png"); spriteGroup = new THREE.Object3D(); spriteMaterial = new THREE.SpriteMaterial({ map: spriteTexture , color: 0xffffff , opacity: 0.8 , transparent: true , blending: THREE.AdditiveBlending }); for(var i = 0; i < 500; i++) { sprite = new THREE.Sprite(spriteMaterial); sprite.position.set(Math.random() * 1000 - 500 , Math.random() * 1000 - 500 , Math.random() * 1000 - 500); sprite.scale.x = sprite.scale.y = sprite.scale.z = Math.random() * 10; spriteGroup.add(sprite); scene.add(spriteGroup); } } //オブジェクト作成用関数 function createObject() { meshLength = 5; meshGroup = new THREE.Object3D(); geometry = new THREE.IcosahedronGeometry(1); material = new THREE.MeshBasicMaterial({ color: 0xffffff , fog: true }); for(var i = 0; i < meshLength; i++) { mesh = new THREE.Mesh(geometry , material); mesh.position.set(0 , 0 , 0); meshGroup.add(mesh); scene.add(meshGroup); } wireGeometry = new THREE.TorusGeometry(200 , 20 , 50 , 200 , Math.PI * 2); wireMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff99 , opacity: 0.5, transparent: true , wireframe: true , fog: true }); wireMesh = new THREE.Mesh(wireGeometry , wireMaterial); wireMesh.rotation.z = Math.PI * 1.5; scene.add(wireMesh); }; //ジャイロスコープ用アニメーション関数 function controlsUpdate() { window.cancelAnimationFrame(cameraRotationAnimation); window.requestAnimationFrame(controlsUpdate); controls.connect(); controls.update(); } //カメラの回転アニメーション関数 function cameraRotationAnimation() { window.requestAnimationFrame(cameraRotationAnimation); camera.rotation.z += 0.005; } //////////////////// //VR用レンダリング関数 //////////////////// function vrRendering() { window.requestAnimationFrame(vrRendering); vr.render(scene , camera); } //////////////////// //レンダリング用関数 //////////////////// function rendering() { window.requestAnimationFrame(rendering); degree -= 0.5; rad = degree * Math.PI / 180; for(var i = 0; i < meshLength; i++) { rad = i + degree * Math.PI / 180; meshGroup.children[i].position.set(200 * Math.cos(rad) , 200 * Math.sin(rad) , 0); meshGroup.children[i].rotation.x += 0.1; meshGroup.children[i].rotation.y += 0.1; } wireMesh.rotation.z += 0.01; spriteGroup.rotation.z += 0.01; composer.render(); } //サイズ調節関数 function sizeRegulation() { canvasWidth = window.innerWidth; canvasHeight = window.innerHeight; mainWord.style.width = canvasWidth + "px"; camera.aspect = canvasWidth / canvasHeight; //アスペクト比を調節 camera.updateProjectionMatrix(); //画角の調節 renderer.setSize(canvasWidth , canvasHeight); composer.setSize(canvasWidth , canvasHeight); } //各windowイベント window.addEventListener("load" , init); window.addEventListener("resize" , sizeRegulation); })();
###試したこと
一応、composer.renderをはぶいたら正しく画面分割されます(ただし、ポストプロセスがかからない状態)
あなたの回答
tips
プレビュー