質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WebVR

WebVRは、WebでVR(Virtual Reality)体験を実現可能にする技術。Oculus RiftといったVRデバイスをブラウザで直接使用できるAPIです。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

0回答

2632閲覧

JavascriptライブラリThree.jsを使用してVRコンテンツを作りたいのですが・・・・

cat_web

総合スコア14

WebVR

WebVRは、WebでVR(Virtual Reality)体験を実現可能にする技術。Oculus RiftといったVRデバイスをブラウザで直接使用できるAPIです。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2016/10/30 10:58

###前提・実現したいこと
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をはぶいたら正しく画面分割されます(ただし、ポストプロセスがかからない状態)

###現在の状況
![イメーイメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問