(sim) Vegas Sphere के लिए shader लिखना

 (whenistheweekend.com)
1 पॉइंट द्वारा GN⁺ 2023-12-01 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • The Sphere पेज 5 उदाहरणों और GLSL shader fragments के ज़रिए दिखाता है कि sphere surface का रंग कैसे calculate किया जाता है
  • shader input time, vUv, vNormal से बना है, और समय तथा UV coordinates रंग परिवर्तन के केंद्र में हैं
  • main() gl_FragColor में vec4(...) डालकर हर pixel का अंतिम रंग calculate करता है
  • RGB values cos(time + vUv.xyx + vec3(0., 2., 4.)) के आधार पर बनती हैं, जो time-based बदलाव को दर्शाती हैं
  • घोषित vNormal दिए गए code fragment के भीतर इस्तेमाल नहीं होता, इसलिए अभी के color calculation पर इसका असर नहीं पड़ता

The Sphere पेज की संरचना

  • शीर्षक The Sphere है
  • मुख्य भाग में example 1 से example 5 तक उदाहरण चिह्नित हैं
  • इसके बाद GLSL जैसा दिखने वाला shader code रखा गया है

GLSL shader code का flow

  • input variables तीन हैं: time, vUv, vNormal
    • time एक uniform float है
    • vUv एक varying vec2 है
    • vNormal एक varying vec3 है
  • main() function gl_FragColor सेट करता है
  • रंग 0.5 + 0.5 * cos(...) के रूप में calculate होता है
  • cos() के input में time value, vUv.xyx, vec3(0., 2., 4.) साथ में जाते हैं
  • alpha value 1. पर fix है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-12-01
Hacker News टिप्पणियाँ

  • मैंने Matrix effect को काम करते हुए बना लिया
    गोले के ऊपरी हिस्से को दिखाने के लिए UV को adjust करने की कोशिश की, लेकिन छोड़ दिया; हालांकि three.js के uniforms projectionMatrix और modelViewMatrix को GLSL के ऊपर declare कर देने पर उन्हें refer किया जा सकता था

  • मैंने static Penrose tiling बनाई: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    गोला अनंत नहीं है, इसलिए aperiodic tiling का कोई खास practical मतलब नहीं है, लेकिन यह फिर भी अच्छा दिखता है
    अभी तक नहीं पता कि अनंत cone को tile करने के लिए कोई similar tile set या single tile मौजूद है या नहीं

    • अगर ये physical tiles हों, तो curvature मेल नहीं खाएगी, इसलिए यह संभव नहीं लगता
      सवाल दिलचस्प बना रहता है, लेकिन कौन-सा projection meaningful होगा यह पर्याप्त साफ नहीं है, इसलिए इसमें और गहराई तक जाना मुश्किल है
    • गोले को अनंत aperiodic tiled plane के बीच धीरे-धीरे move करते हुए दिखाना भी मजेदार हो सकता है

  • थोड़ा off-topic है, लेकिन The Sphere वास्तव में कितना बड़ा engineering project है, यह आकर्षक है
    खुद structure से लेकर गोले के अंदर-बाहर लगे हजारों LED panels की synchronization, Las Vegas की गर्मी में cooling, और अंदर की 18,000 seats को पर्याप्त ठंडा और ventilated बनाए रखने तक सब कुछ इसमें शामिल है
    कई साधारण office buildings भी सही तरह ventilate नहीं हो पातीं

    • इतनी मेहनत और resources लगाकर आखिरकार बस और ज़्यादा नज़रें ads पर टिकाए रखना ही मकसद है
    • Sphere के अंदर special effects के लिए ठंडी हवा भी बनाई जा सकती है, यह सच में कमाल है

  • मैंने एक simple smiley.frag बनाया: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • प्रोजेक्ट बहुत अच्छा है
    अगर हर code के लिए अलग URL हो, तो share करना आसान होगा। URL के अंदर code embed करना भी ठीक लग रहा है

  • मैंने एक बड़ा smiley face shader बनाया
    यह GLSL code है जो sdRing से मुंह बनाता है, left-right symmetry का इस्तेमाल करके आंखों को एक साथ handle करता है, और फिर पीले रंग में output देता है

  • मैंने पहली बार shader के साथ काम किया और एक घूमता हुआ तरबूज बनाया
    इतना समझ आता है कि RGB tuple के साथ काम हो रहा है और fract() remainder operation जैसा दिखता है, फिर उन values को square करके और जोड़कर smooth bands बनाई जाती हैं; लेकिन shader ठीक-ठीक कैसे काम करता है, vUv क्या है, और gl_FragColor कहां assign होता है, यह अभी भी साफ नहीं है

    • GPU को model space में object मिलता है, यानी triangle vertices की सूची और camera position, साथ ही उसे screen space में बदलने वाला vertex shader
      फिर वह triangles को fragments, यानी pixels, में बांटता है और हर fragment पर fragment shader चलाता है
      यहां inputs हैं time uniform, जो हर fragment के लिए एक जैसा है, और vUv, जो vertex से output होकर triangle के अंदर linear interpolation से आता है; vUv गोले पर pixel coordinates के बराबर है
      gl_FragColor उस fragment पर लागू होने वाला RGBA color output है
      किसी सामान्य game या Google Earth shader में इसमें texturing और lighting भी जुड़ती है, और GPU execution model ऐसा लगता है जैसे हर pixel को अलग-अलग code किया जा रहा हो, लेकिन वास्तव में यह SIMT है, इसलिए NVIDIA 32 और AMD 64 pixels को एक साथ process करते हैं
      आम तौर पर conditionals को ऐसे conditional operations में बदल दिया जाता है जिनमें दोनों branches execute होती हैं
    • यह canvas के हर pixel पर code चलाने जैसा है
      https://www.shadertoy.com/ भी आपको पसंद आ सकता है

  • https://www.glslsandbox.com के shaders भी देखने लायक हैं
    बस ध्यान रहे कि वहां अपरिपक्व लोग अक्सर NSFW shaders पोस्ट करते हैं, और लगता नहीं कि admin बहुत बारीकी से moderation करता है

    • GLSL की सैकड़ों lines में शरीर बनाना भी प्रभावशाली है, लेकिन सिर्फ 11 lines में orgy scene बनाना बिल्कुल दूसरी ही बात है
      सोचने पर मजबूर करता है कि “NSFW GLSL content” की Kolmogorov complexity कितनी होगी
      https://www.glslsandbox.com/e#108133.0
    • यह शुद्ध प्रतिभा है
      NSFW: https://www.glslsandbox.com/e#108230.3
      code comments में ChatGPT के लिए prompts बचे हुए हैं, जैसे शरीर को और मोटा बनाओ, background scroll lines जोड़ो, colors बदलो, और कुछ खास body parts जोड़ो
    • यह वहां Hakenkreuz पोस्ट करने वालों की तुलना में कहीं बेहतर है

  • बहुत अच्छा
    मेरे isocity project में, किसी ने जो solution जोड़ा था, वह बनाई गई city को URL के जरिए share करने देता है
    लगता है ऐसा ही तरीका यहां भी implement किया जा सकता है: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere demo party आयोजित करने के लिए शानदार जगह होगी
    https://en.wikipedia.org/wiki/Demoscene#Parties