कुछ दिन पहले मैंने यह बनाया था
शुरुआत में इसे CSS में depth of field को ‘fake’ तरीके से लागू करके देखने के लिए बनाया था, और demo video व shuding_ से मिली inspiration साइट के नीचे दिए links में आखिरी से दूसरे tweet में है
लेकिन कल रात मुझे याद आया कि ThreeJS मौजूद है, इसलिए इसे react-three-fiber में दोबारा लिखा। पहली बार इस्तेमाल किया, और यह काफी ergonomic लगा—impressive था
डॉक्युमेंट नहीं किया है, लेकिन right-click drag से screen को move किया जा सकता है
UI की interactivity पसंद आई। अच्छा बनाया है
undocumented feature भी दिखा। macOS पर ctrl+left click से भी move क्यों नहीं होता, यह थोड़ा अजीब लगा
मुझे उम्मीद थी कि यह OS के साथ integrate होकर window compositor से पहले के stage की 3D screenshot लेगा, और हर window को Z-depth देकर उन्हें desktop और एक-दूसरे के ऊपर तैरता हुआ दिखाएगा
ऐसी “3D screenshot” को orthographic projection में देखने पर वह सामान्य screenshot जैसी ही लगेगी, लेकिन depth of field effect डालते ही अंतर दिखने लगेगा
बेशक, इसे किसी दूसरे projection में देखना, यहाँ की तरह 3D space में tilt करना, दूर की windows पर fog apply करना, या point light से windows को एक-दूसरे पर वास्तविक shadows डालते दिखाना भी संभव लगता है। translucent areas से ज़्यादा light pass करवाई जा सकती है, और ideal तौर पर HTML5 में embed हो सकने वाला viewer ये सब features दे तो अच्छा होगा
ऐसे format और viewer का visionOS की depth-mapped AR window placement को static “explorable” snapshot के रूप में recreate करने में काफी स्पष्ट उपयोग दिखता है। अगर 2D desktop OS की windows पर arbitrary depth map जोड़ा जा सके, तो वह bonus होगा
इससे सबसे मिलता-जुलता जो मैंने देखा है वह Xcode का UI debug viewer है। उसमें सभी UI elements को exploded view की तरह 3D space में rotate करके देखा जा सकता है
हालांकि lighting या shadows नहीं हैं, और यह debug access वाली apps तक सीमित है
Amazon Fire Phone ने भी शायद कई front eye-tracking cameras और gyro+accelerometer का इस्तेमाल करके phone UI को move कराया और parallax वाली 3D view को real time में simulate करने की कोशिश की थी। पुराने mobile Safari tab view में भी device orientation के हिसाब से tabs move होते थे
कभी global illumination UI देखना चाहूँगा। practical न भी हो, तो भी Microsoft Design team जो Windows rendering दिखाती थी उसे real time में देखने जैसा हो तो अच्छा लगेगा। बिजली की बर्बादी बहुत होगी, लेकिन path-traced soft shadows शानदार लगेंगी
यह लगभग VisionOS की motivation, यानी 3D space-oriented operating system के करीब जा रहा है
मैं अक्सर सोचता था कि आजकल screenshots पर्याप्त blur नहीं होते, यह बिल्कुल सही है
depth of field को सीमित करना photography में किसी specific element को highlight करने के लिए बहुत उपयोगी है, इसलिए portrait photos में लगभग हमेशा इस्तेमाल होता है
साथ ही portraits को telephoto lens से थोड़ी दूरी पर लेना बेहतर होता है, क्योंकि वह असल में दिखने वाला चेहरा नहीं बल्कि लोगों की याद में रहने वाला चेहरा capture करता है। correction की जरूरत इसलिए पड़ती है कि उसी lens setup में पास से शूट करने पर depth of field बहुत shallow हो जाती है, और दूर से शूट करने पर बहुत deep
यह अनावश्यक रूप से sarcastic बात है। bug report में attachment के रूप में ऐसे depth of field screenshots इस्तेमाल करना मुझे पसंद नहीं आएगा
लेकिन marketing site पर screenshot के किसी खास हिस्से को highlight करके बताई जाने वाली बात दिखाने के visual effect के रूप में यह अच्छा लगता है
सही है, पहले screenshot को blur करें और फिर HiDPI display से उसे फिर sharp बना दें /s
क्या ऐसा कोई मिलता-जुलता tool है जो screenshots और captions के bundle से depth of field और slow rotation वाला video montage बना दे?
दूसरे comments में दिख रहे सवाल का जवाब दूँ तो, यह three.js से बना है
इसे ऐसे समझें कि यह 2D plane पर image render करने वाला 3D scene है, और camera उसके कुछ हिस्सों पर specific Gaussian blur apply करता है। zoom in/out और image rotation के लिए orbit controls इस्तेमाल हो रहे हैं
क्या यह screenshot में “बाकी सब blur कर दो” कहने का fancy तरीका भर है? निजी तौर पर मैं गैर-ज़रूरी content को crop कर देना पसंद करता हूँ
complex UI में कहाँ जाना है यह दिखाते समय screenshot में बाकी UI को भी रहने देना उपयोगी हो सकता है
crop करने से navigation cues गायब हो जाते हैं, लेकिन सब कुछ sharp छोड़ देने पर यह असली UI जितना ही देखने में मुश्किल हो सकता है, इसलिए blur एक compromise हो सकता है
दिलचस्प लग रहा है। पहले मुझे लगा था कि screenshot में मुझसे सबसे दूर वाला हिस्सा blur होगा और सबसे पास वाले हिस्से पर focus होगा, लेकिन असल behavior ऐसा नहीं था
अगर important part mark किया जा सके, तो screenshot के किसी खास हिस्से पर focus करने के लिए इस्तेमाल हो सकता है
image के किसी हिस्से पर click करने से focus वहीं चला जाता है
shallow depth of field का इस्तेमाल photography या कभी-कभी movies में ठीक इसी उद्देश्य से होता है—viewer का ध्यान किसी specific element पर लाने के लिए
हालांकि demo देखने के बाद, मुझे पक्का नहीं है कि मैं इसे कहाँ इस्तेमाल करना चाहूँगा
YouTube video thumbnails जैसी चीज़ों के background में इस्तेमाल करना मज़ेदार हो सकता है
वास्तविक जानकारी देने के लिए मैं इसे इस्तेमाल नहीं करना चाहूँगा, लेकिन किस application का इस्तेमाल हो रहा है यह पहचानने लायक जानकारी तो मिलती दिखती है
कृपया image paste support जोड़ दें
paste buffer इस्तेमाल करने के बजाय file system से file चुनने वाला input field इस्तेमाल करने पर friction महसूस में करीब 5 गुना बढ़ जाता है। अब तक इस्तेमाल किए हर image upload button पर यह लागू होता है
1 टिप्पणियां
Hacker News की राय
कुछ दिन पहले मैंने यह बनाया था
शुरुआत में इसे CSS में depth of field को ‘fake’ तरीके से लागू करके देखने के लिए बनाया था, और demo video व shuding_ से मिली inspiration साइट के नीचे दिए links में आखिरी से दूसरे tweet में है
लेकिन कल रात मुझे याद आया कि ThreeJS मौजूद है, इसलिए इसे react-three-fiber में दोबारा लिखा। पहली बार इस्तेमाल किया, और यह काफी ergonomic लगा—impressive था
डॉक्युमेंट नहीं किया है, लेकिन right-click drag से screen को move किया जा सकता है
https://depth-of-field.vercel.app/
undocumented feature भी दिखा। macOS पर ctrl+left click से भी move क्यों नहीं होता, यह थोड़ा अजीब लगा
मुझे उम्मीद थी कि यह OS के साथ integrate होकर window compositor से पहले के stage की 3D screenshot लेगा, और हर window को Z-depth देकर उन्हें desktop और एक-दूसरे के ऊपर तैरता हुआ दिखाएगा
ऐसी “3D screenshot” को orthographic projection में देखने पर वह सामान्य screenshot जैसी ही लगेगी, लेकिन depth of field effect डालते ही अंतर दिखने लगेगा
बेशक, इसे किसी दूसरे projection में देखना, यहाँ की तरह 3D space में tilt करना, दूर की windows पर fog apply करना, या point light से windows को एक-दूसरे पर वास्तविक shadows डालते दिखाना भी संभव लगता है। translucent areas से ज़्यादा light pass करवाई जा सकती है, और ideal तौर पर HTML5 में embed हो सकने वाला viewer ये सब features दे तो अच्छा होगा
ऐसे format और viewer का visionOS की depth-mapped AR window placement को static “explorable” snapshot के रूप में recreate करने में काफी स्पष्ट उपयोग दिखता है। अगर 2D desktop OS की windows पर arbitrary depth map जोड़ा जा सके, तो वह bonus होगा
हालांकि lighting या shadows नहीं हैं, और यह debug access वाली apps तक सीमित है
Amazon Fire Phone ने भी शायद कई front eye-tracking cameras और gyro+accelerometer का इस्तेमाल करके phone UI को move कराया और parallax वाली 3D view को real time में simulate करने की कोशिश की थी। पुराने mobile Safari tab view में भी device orientation के हिसाब से tabs move होते थे
कभी global illumination UI देखना चाहूँगा। practical न भी हो, तो भी Microsoft Design team जो Windows rendering दिखाती थी उसे real time में देखने जैसा हो तो अच्छा लगेगा। बिजली की बर्बादी बहुत होगी, लेकिन path-traced soft shadows शानदार लगेंगी
मैं अक्सर सोचता था कि आजकल screenshots पर्याप्त blur नहीं होते, यह बिल्कुल सही है
साथ ही portraits को telephoto lens से थोड़ी दूरी पर लेना बेहतर होता है, क्योंकि वह असल में दिखने वाला चेहरा नहीं बल्कि लोगों की याद में रहने वाला चेहरा capture करता है। correction की जरूरत इसलिए पड़ती है कि उसी lens setup में पास से शूट करने पर depth of field बहुत shallow हो जाती है, और दूर से शूट करने पर बहुत deep
लेकिन marketing site पर screenshot के किसी खास हिस्से को highlight करके बताई जाने वाली बात दिखाने के visual effect के रूप में यह अच्छा लगता है
यह पुराने Show HN Screenstab [0] जैसा दिखता है
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
दूसरे comments में दिख रहे सवाल का जवाब दूँ तो, यह three.js से बना है
इसे ऐसे समझें कि यह 2D plane पर image render करने वाला 3D scene है, और camera उसके कुछ हिस्सों पर specific Gaussian blur apply करता है। zoom in/out और image rotation के लिए orbit controls इस्तेमाल हो रहे हैं
क्या यह screenshot में “बाकी सब blur कर दो” कहने का fancy तरीका भर है? निजी तौर पर मैं गैर-ज़रूरी content को crop कर देना पसंद करता हूँ
crop करने से navigation cues गायब हो जाते हैं, लेकिन सब कुछ sharp छोड़ देने पर यह असली UI जितना ही देखने में मुश्किल हो सकता है, इसलिए blur एक compromise हो सकता है
दिलचस्प लग रहा है। पहले मुझे लगा था कि screenshot में मुझसे सबसे दूर वाला हिस्सा blur होगा और सबसे पास वाले हिस्से पर focus होगा, लेकिन असल behavior ऐसा नहीं था
अगर important part mark किया जा सके, तो screenshot के किसी खास हिस्से पर focus करने के लिए इस्तेमाल हो सकता है
हालांकि demo देखने के बाद, मुझे पक्का नहीं है कि मैं इसे कहाँ इस्तेमाल करना चाहूँगा
जैसा मैंने कुछ साल पहले Blender में किया था, इसे ज़्यादा realistic दिखाने के लिए RGB pixels जोड़ना भी अच्छा हो सकता है
https://blenderartists.org/t/rgb-display-shader/684533
YouTube video thumbnails जैसी चीज़ों के background में इस्तेमाल करना मज़ेदार हो सकता है
वास्तविक जानकारी देने के लिए मैं इसे इस्तेमाल नहीं करना चाहूँगा, लेकिन किस application का इस्तेमाल हो रहा है यह पहचानने लायक जानकारी तो मिलती दिखती है
कृपया image paste support जोड़ दें
paste buffer इस्तेमाल करने के बजाय file system से file चुनने वाला input field इस्तेमाल करने पर friction महसूस में करीब 5 गुना बढ़ जाता है। अब तक इस्तेमाल किए हर image upload button पर यह लागू होता है