हमें एक ब्राउज़र में एक 3D चित्र का एहसास होता है

इस लेख में मैं एक 3D मॉनिटर के साथ अपने प्रयोगों की कहानी जारी रखना चाहता हूं। पहले लेख में एक वीडियो स्ट्रीम से (वीएलसी प्लेयर में) स्टीरियो इमेज को आउटपुट करने का वर्णन किया गया है। अब मैं आपको बताऊंगा कि आप अपने ब्राउज़र में सीधे स्टीरियो इमेज कैसे प्राप्त करें। डेमो के लिए, मैंने अद्भुत थ्रीजेज लाइब्रेरी को लिया, इसके बारे में पहले से ही हैबे पर बहुत कुछ लिखा गया है, यह वेबजीएल पर सुंदर वेब अनुप्रयोगों को जल्दी और सरल रूप से बनाने की अनुमति देता है। नीचे मैं दिखाऊंगा कि कैसे उपयोगकर्ता को एक गहरी 3 डी तस्वीर दिखाई देती है और एक फ्लैट प्रक्षेपण नहीं।



हम स्रोत डेटा के रूप में Three.js से सबसे सरल उदाहरण लेते हैं।
- यह एक घूमने वाला घन होगा । 3D इफ़ेक्ट को उज्जवल बनाने के लिए - मैंने पर्यवेक्षक की ओर एक और आगे की गति को रोटेशन में जोड़ा।

हमारी त्रि-आयामी छवि के लिए 2 foreshortenings प्राप्त करने के लिए - हम ऐसी चाल करते हैं
प्रत्येक फ्रेम के रेंडर लूप में:
- कैमरे से दृश्य को स्क्रीन पर नहीं बल्कि बनावट से खींचे
- कैमरा ले जाएँ (जैसे कि दूसरी आँख की स्थिति में)
- दृश्य को एक अलग बनावट में आकर्षित करें
- अब हमारे पास बाईं और दाईं आंखों के लिए चित्र हैं - हमें बस उन्हें मिश्रण करने की आवश्यकता है ताकि बाईं आंख बाईं तस्वीर और दाईं आंख को देख सके - 3 डी मॉनिटर पर दाईं ओर।

अब इसे कोड में वर्णित करें
(webgl_geometry_cube उदाहरण के मूल कोड का कोई मतलब नहीं है; मैं केवल वही जोड़ूंगा जो मैंने जोड़ा है)

अपडेट: डेमो में एनाग्लिफ़ जोड़ने के लिए धन्यवाद, अब आप इसे लाल-नीले चश्मे के साथ किसी भी मॉनिटर पर आज़मा सकते हैं।

//        function initORTscene() { //projection to screen rtTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }); ltTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }); //      -       materialScreen = new THREE.ShaderMaterial({ uniforms: { lRacurs: { type: "t", value: ltTexture }, rRacurs: { type: "t", value: rtTexture }, height: { type: "f", value: window.innerHeight } }, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent, depthWrite: false }); //        var plane = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight); var offscreenMesh = new THREE.Mesh(plane, materialScreen); offscreenMesh.position.z = -1; //a little behind sceneORT = new THREE.Scene(); //    ,         cameraORT = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10000, 10000); sceneORT.add(offscreenMesh); } 

shaders
उनमें हम स्क्रीन के पिक्सल में 2 बनावट और फ्रेम की ऊँचाई को पार करते हैं
शीर्ष shader बिंदु की स्थिति की गणना करता है और इसे पिक्सेल shader को पास करता है
वहां हम गणना करते हैं कि हमारे पास एक ऊर्ध्वाधर रेखा है या नहीं, यहां तक ​​कि लाइनों के लिए भी हम एक बनावट लेते हैं - विषम रेखाओं के लिए एक और ( इस लेख में मैंने लिखा है कि यह दृष्टिकोण आपको 3 डी चित्र बनाने की अनुमति कैसे देता है)

 <script id="fragmentShader" type="x-shader/x-fragment"> varying vec2 vUv; uniform sampler2D rRacurs; uniform sampler2D lRacurs; uniform float height; void main() { //odd from left racurs, even from right float d = mod((floor(height*(vUv.y+1.0))),2.0); //odd or even, height - is new uniform to get viewport height if(d > 0.1) { gl_FragColor = texture2D( rRacurs, vUv ); } else { gl_FragColor = texture2D( lRacurs, vUv ); } } </script> <script id="vertexShader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> 

अब हमारे दृश्य को ड्रा करें

  var x = camera.position.x; var faceWidth = 5; //   //   camera.position.x = x + faceWidth / 2; renderer.render(scene, camera, rtTexture, true); //   camera.position.x = x - faceWidth / 2; renderer.render(scene, camera, ltTexture, true); camera.position.x = x; //           renderer.render(sceneORT, cameraORT); 

वह सब है।
निष्क्रिय 3 डी मॉनिटर के खुश मालिक डेमो देख सकते हैं (एक नियमित मॉनिटर पर, यह निश्चित रूप से इतना सुंदर नहीं है)। कोड जीथब पर पाया जा सकता है

मैं यह नोट करना चाहता हूं कि कोड की ३० पंक्तियाँ निश्चित रूप से नहीं हैं, लेकिन and० से अधिक नहीं हैं - और आपको ३ डी चित्र लागू करने की आवश्यकता है।

फेसवाइट पैरामीटर को बदला जा सकता है - जितना बड़ा यह है - 3 डी जितना मजबूत, लेकिन ज्यामितीय विकृतियां महत्वपूर्ण हैं।

इस कोड का उपयोग तीन .js (WebGL) में लिखे गए किसी भी दृश्य के लिए वास्तविक 3D को जोड़ने के लिए किया जा सकता है, उदाहरण के लिए, यहां उस गेम का लिंक दिया गया है जिसे मैंने जावास्क्रिप्ट के अध्ययन के हिस्से के रूप में लिखा था - 3 डी में यह बहुत अच्छा लगता है।

अपडेट: इस डेमो में एनाफिफ़ इफेक्ट जोड़ने के लिए KOLANICH का धन्यवाद - अब आप इसे लाल-नीले चश्मे के साथ किसी भी मॉनिटर पर देखने की कोशिश कर सकते हैं। मेरे पास ऐसा नहीं है, इसलिए मैं जाँच नहीं कर सकता, लेकिन अगर कोई जाँच करता है और बग पाता है, तो मैं पुल-अनुरोध स्वीकार करूँगा।