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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

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

JavaScript

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

Q&A

0回答

211閲覧

CardboardEffectでカスタムシェーダーを表示させる方法が解りません。

gemfighter

総合スコア38

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

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

JavaScript

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

0グッド

1クリップ

投稿2023/05/14 16:40

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • CardboardEffectのインスタンスでEffectComposerみたいにカスタムシェーダーを表示させたいのですが、どうしたらできますか?

もしくは使用上不可能ですか?
文字数の関係でぐらいスケールシェーダーの書いてあるファイルは省略しています。

該当のソースコード

Three.js

1ソースコード 2<!DOCTYPE html> 3<html> 4 5<head> 6 <title>test vr</title> 7 <script type="text/javascript" src="../libs/three.js"></script> 8 9 <script type="text/javascript" src="../libs/stats.js"></script> 10 <script type="text/javascript" src="../libs/dat.gui.js"></script> 11 <script type="text/javascript" src="../libs/controls/OrbitControls.js"></script> 12 <script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script> 13 <script type="text/javascript" src="../libs/shaders/CopyShader.js"></script> 14 15 <script type="text/javascript" src="../libs/postprocessing/EffectComposer.js"></script> 16 17 <script type="text/javascript" src="../libs/postprocessing/MaskPass.js"></script> 18 <script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script> 19 <script type="text/javascript" src="custom-shader.js"></script> 20 21 <script type="text/javascript" src="../libs/postprocessing/RenderPass.js"></script> 22 23 <script type="text/javascript" src="../libs/postprocessing/GlitchPass.js"></script> 24 <script type="text/javascript" src="../libs/shaders/DigitalGlitch.js"></script> 25 26 27 <!-- vr --> 28 <script type="text/javascript" src="../libs/WebVR.js"></script> 29 <script type="text/javascript" src="../libs/effects/VREffect.js"></script> 30 <script type="text/javascript" src="../libs/controls/VRControls.js"></script> 31 <!-- for cardboard--> 32 <script type="text/javascript" src="../libs/effects/CardboardEffect.js"></script> 33 <script type="text/javascript" src="../libs/controls/DeviceOrientationControls.js"></script> 34 35 <style> 36 body { 37 /* set margin to 0 and overflow to hidden, to go fullscreen */ 38 margin: 0; 39 overflow: hidden; 40 } 41 </style> 42</head> 43<body> 44 45<div id="Stats-output"> 46</div> 47<!-- Div which will hold the Output --> 48<div id="WebGL-output"> 49</div> 50 51<!-- Javascript code that runs our Three.js examples --> 52<script type="text/javascript"> 53 // for webvr 54 //if (WEBVR.isLatestAvailable() === false) { 55 // document.body.appendChild(WEBVR.getMessage()); 56 //} 57 58 // once everything is loaded, we run our Three.js stuff. 59 function init() { 60 61 var stats = initStats(); 62 63 // create a scene, that will hold all our elements such as objects, cameras and lights. 64 var scene = new THREE.Scene(); 65 66 // create a camera, which defines where we're looking at. 67 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); 68 69 // create a render and set the size 70 var webGLRenderer = new THREE.WebGLRenderer(); 71 webGLRenderer.setClearColor(new THREE.Color(0x000)); 72 webGLRenderer.setSize(window.innerWidth, window.innerHeight); 73 webGLRenderer.shadowMap.enabled = true; 74 75 var raycaster = new THREE.Raycaster(); 76 77 //地球 78 var earth = createEarthMesh(new THREE.SphereGeometry(10, 80, 80)); 79 earth.position.y = -10; 80 scene.add(earth); 81 82 var selectedDebri; 83 84 // position and point the camera to the center of the scene 85 86 camera.position.y = 15; 87 88 //camera.lookAt(new THREE.Vector3(0, 0, 0)); 89 90 //camera.position.x = -30; 91 //camera.position.y = 40; 92 //camera.position.z = 30; 93 camera.lookAt(scene.position); 94 95 // vr 96 // for webvr 97 //var controls = new THREE.VRControls(camera); 98 //var effect = new THREE.VREffect(webGLRenderer); 99 var clock = new THREE.Clock(); 100 if (WEBVR.isAvailable() === true) { 101 document.body.appendChild(WEBVR.getButton(effect)); 102 } 103 // for cardboard 104 var controls = new THREE.DeviceOrientationControls(camera); 105 var effect = new THREE.CardboardEffect(webGLRenderer); 106 107 var orbitControls = new THREE.OrbitControls(camera); 108 orbitControls.autoRotate = false; 109 110 //基本の光 111 var ambi = new THREE.AmbientLight(0x181818); 112 scene.add(ambi); 113 114 //無限遠光源 115 var directionalLight = new THREE.DirectionalLight(0xffffff); 116 directionalLight.position.set(100, 0, 150); 117 earth.add(directionalLight); 118 119 //無限遠光源(反対) 120 var directionalBackLight = new THREE.DirectionalLight(0xffffff); 121 directionalBackLight.position.copy(directionalLight.position.clone().negate()); 122 directionalBackLight.intensity = 0.7; 123 earth.add(directionalBackLight); 124 125 var spotLight = new THREE.DirectionalLight(0xffffff); 126 spotLight.position.set(550, 100, 550); 127 spotLight.intensity = 0.6; 128 129 scene.add(spotLight); 130 131 //html属性を出力 132 document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); 133 134 var renderPass = new THREE.RenderPass(scene, camera); 135 136 var effectGlitch = new THREE.GlitchPass(64); 137 effectGlitch.renderToScreen = true; 138 139 var effectCopy = new THREE.ShaderPass(THREE.CopyShader); 140 effectCopy.renderToScreen = true; 141 var shaderPass = new THREE.ShaderPass(THREE.CustomGrayScaleShader); 142 shaderPass.enabled = true; 143 var bitPass = new THREE.ShaderPass(THREE.CustomBitShader); 144 bitPass.enabled = true; 145 146 var composer = new THREE.EffectComposer(webGLRenderer); 147 composer.addPass(renderPass); 148 composer.addPass(shaderPass); 149 composer.addPass(bitPass); 150 composer.addPass(effectCopy); 151 composer.addPass(effectGlitch); 152 153 154 webGLRenderer.domElement.addEventListener('click', function() { 155 if (!document.mozFullScreen && !document.webkitIsFullScreen) { 156 var canvas = webGLRenderer.domElement; 157 var requestFullScreen = canvas.mozRequestFullScreen || canvas.webkitRequestFullScreen; 158 requestFullScreen.bind(canvas)(); 159 } 160 }.bind(this)); 161 window.addEventListener('resize', onWindowResize, false); 162 function onWindowResize() { 163 camera.aspect = window.innerWidth / window.innerHeight; 164 camera.updateProjectionMatrix(); 165 effect.setSize(window.innerWidth, window.innerHeight); 166 } 167 168 169 170 var step = 0; 171 172 render(); 173 174 //地球 175 function createEarthMesh(geom) { 176 var textureLoader = new THREE.TextureLoader(); 177 var planetTexture = textureLoader.load("../assets/textures/planets/Earth.png"); 178 var specularTexture = textureLoader.load("../assets/textures/planets/EarthSpec.png"); 179 var normalTexture = textureLoader.load("../assets/textures/planets/EarthNormal.png"); 180 181 182 var planetMaterial = new THREE.MeshPhongMaterial(); 183 planetMaterial.map = planetTexture; 184 planetMaterial.specularMap = specularTexture; 185 planetMaterial.normalMap = normalTexture; 186 187 planetMaterial.normalScale = new THREE.Vector2(5, 5); 188 planetMaterial.shininess = 100; 189 planetMaterial.specular = new THREE.Color(0x4444aa); 190 planetMaterial.emissive = new THREE.Color(0x181818); 191 192 // create a multimaterial 193 var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]); 194 195 return mesh; 196 } 197 198 199 function render() { 200 201 var delta = clock.getDelta(); 202 //orbitControls.update(delta); 203 controls.update(delta); 204 //controls.update(); 205 206 earth.rotation.z -= 0.001; 207 208 // render using requestAnimationFrame 209 requestAnimationFrame(render); 210 // vr 211 //webGLRenderer.render(scene, camera); 212 effect.render(scene, camera); 213 //composer.render(delta); 214 215 } 216 217 function initStats() { 218 219 var stats = new Stats(); 220 stats.setMode(0); // 0: fps, 1: ms 221 222 // Align top-left 223 stats.domElement.style.position = 'absolute'; 224 stats.domElement.style.left = '0px'; 225 stats.domElement.style.top = '0px'; 226 227 document.getElementById("Stats-output").appendChild(stats.domElement); 228 229 return stats; 230 } 231 } 232 window.onload = init; 233</script> 234</body> 235</html>

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

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

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

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

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

gemfighter

2023/05/14 16:42

念のためグレイスケールシェーダーのコードはここに書きます。 THREE.CustomGrayScaleShader = { uniforms: { "tDiffuse": {type: "t", value: null}, "rPower": {type: "f", value: 1.0}, "gPower": {type: "f", value: 1.0}, "bPower": {type: "f", value: 0.0} }, // 0.2126 R + 0.7152 G + 0.0722 B // vertexshader is always the same for postprocessing steps vertexShader: [ "varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}" ].join("\n"), fragmentShader: [ // pass in our custom uniforms "uniform float rPower;", "uniform float gPower;", "uniform float bPower;", // pass in the image/texture we'll be modifying "uniform sampler2D tDiffuse;", // used to determine the correct texel we're working on "varying vec2 vUv;", // executed, in parallel, for each pixel "void main() {", // get the pixel from the texture we're working with (called a texel) "vec4 texel = texture2D( tDiffuse, vUv );", // calculate the new color "float gray = texel.r*rPower + texel.g*gPower + texel.b*bPower;", // return this new color "gl_FragColor = vec4( vec3(gray), texel.w );", "}" ].join("\n") }; THREE.CustomBitShader = { uniforms: { "tDiffuse": {type: "t", value: null}, "bitSize": {type: "i", value: 4} }, vertexShader: [ "varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}" ].join("\n"), fragmentShader: [ "uniform int bitSize;", "uniform sampler2D tDiffuse;", "varying vec2 vUv;", "void main() {", "vec4 texel = texture2D( tDiffuse, vUv );", "float n = pow(float(bitSize),2.0);", "float newR = floor(texel.r*n)/n;", "float newG = floor(texel.g*n)/n;", "float newB = floor(texel.b*n)/n;", "gl_FragColor = vec4( vec3(newR,newG,newB), 1.0);", "}" ].join("\n") };
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問