😷 👨‍👩‍👦 🏔️ बचपन में केलीडोस्कोप 🤦🏾 🥤 🦄

कभी-कभी दर्पण में प्रतिबिंब वस्तु से अधिक वास्तविक होता है ...
- लुईस कैरोल (एलिस इन द लुकिंग ग्लास)

कम उम्र में मेरे पास एक अजीब खिलौना था - एक बहुरूपदर्शक। घंटों तक, मैंने टूटे हुए कांच के बहु-रंगीन टुकड़ों से बने सही पैटर्न की जांच की। इस ध्यान चिंतन में कुछ अटपटा था। अब, एक पिता के रूप में, मैं अपने बच्चों को अराजकता के सही निर्माण की सुंदरता दिखाना चाहता था।

बच्चे अब आधुनिक हैं, साधारण खिलौने उनके लिए बहुत कम रुचि रखते हैं, उन्हें कंप्यूटर या टैबलेट दें। इसलिए, मैं एक बहुरूपदर्शक के एक संस्करण के एक डिजिटल प्रोटोटाइप को फिर से बनाना चाहता था, और साथ ही अपने ग्राफिक्स ग्राफिक्स कौशल का अभ्यास करने के लिए।

मैं आपको प्रतिबिंब की दुनिया में मेरे साथ आने के लिए आमंत्रित करता हूं।

मूल विचार एक बहुरूपदर्शक के पूर्ण भौतिक मॉडल का निर्माण करना था। इस उपकरण में कई दर्पण होते हैं जो एक नली में एक दूसरे से कोण पर स्थित होते हैं। मेरे बचपन के बहुरूपदर्शक में तीन दर्पण शामिल थे, और मैंने इस डिजाइन को फिर से बनाने का फैसला किया।

मेरे लिए सबसे स्पष्ट समाधान किरण अनुरेखण का उपयोग करना था। 3 दर्पण विमानों को एक दूसरे से 120 डिग्री के कोण पर बनाया गया था।

दर्पण के दूर के किनारे से परे वस्तुओं को रखने और किरणों के कई पुन: प्रतिबिंब का उपयोग करके (लगभग 20 प्रतिबिंब) हमें काफी काम करने वाला बहुरूपदर्शक मिलता है।

रूटिंग बनाने के लिए, एक कंप्यूटिंग शेडर का उपयोग किया जाता है। छवि एक बनावट में आउटपुट है, जिसे बाद में स्क्रीन पर प्रदर्शित किया जाता है। क्षेत्रों को आरेखण की वस्तुओं के रूप में सरल आकृतियों के रूप में उपयोग किया जाता है। रीयलटाइम रेंडरिंग मोड में मेरे वीडियो कार्ड पर, मैं लगभग 20-25 एफपीएस प्राप्त करने में कामयाब रहा, और यह केवल तीन वस्तुओं और एक प्रकाश स्रोत के साथ है, जो दुखद है। मैं कई अलग-अलग आकृतियों के अराजक आंदोलन, साथ ही वास्तविक समय के प्रकाश स्रोतों को चाहता था, लेकिन इससे और भी अधिक मंदी होगी।

अनुकूलन के कई तरीकों के बाद, मैंने इस मॉडल को अप्रमाणिक के रूप में स्थगित कर दिया।

कम्प्यूटिंग Shader कोड GLSL

#version 430 core
layout( local_size_x = 32, local_size_y = 32 ) in;
layout(binding = 0, rgba8) uniform image2D IMG;
layout(binding = 1, std430) buffer InSphere {vec4 Shape_obj[];};
layout(binding = 2, std430) buffer InSphere_color {vec4 Sphere_color[];};

uniform vec2 u_InvScreenSize;
uniform float u_ScreenRatio;
uniform vec3 u_LightPosition;
uniform vec3 u_CameraPosition;

//
const vec3 ray00 = vec3(-1*u_ScreenRatio,-1, -1.2);
const vec3 ray01 = vec3(-1*u_ScreenRatio,+1, -1.2);
const vec3 ray10 = vec3(+1*u_ScreenRatio,-1, -1.2);
const vec3 ray11 = vec3(+1*u_ScreenRatio,+1, -1.2);
const ivec2 size = imageSize(IMG);

const mat3 mat_rotate = mat3(-0.5, -0.86602540378443864676372317075294, 0, 0.86602540378443864676372317075294, -0.5, 0, 0, 0, 1);
struct plane {
vec3 v_plane;
vec3 n_plane;
vec3 p_plane;
};

//
plane m[3];
int last_plane;

//----------------------------------------------------------
float ray_intersect_sphere(vec3 orig, vec3 dir, vec4 Shape_obj) {
vec3 l = Shape_obj.xyz - orig;
float tca = dot(l,dir);
float d2 = dot(l,l) - tca * tca;
if (d2 > Shape_obj.w * Shape_obj.w) {return 0;}
float thc = sqrt(Shape_obj.w * Shape_obj.w - d2);
float t0 = tca - thc;
float t1 = tca + thc;
if (t0 < 0) {t0 = t1;}
if (t0 < 0) {return 0;}
return t0;
}
//---------------------------------------------------------
'float ray_intersect_plane(in vec3 orig, in vec3 dir, inout plane p) {
vec3 tested_direction = p.v_plane - orig;
float k = dot(tested_direction, p.v_plane) / dot(dir, p.v_plane);
if (k>=0) {
vec3 p0 = orig + dir * k;
// z
if ((p0.z>-80)&&(p0.z<3)) {
p.p_plane = p0;
return length(p0-orig);
}
}
return 1000000;
}'+
//---------------------------------------------------------
bool all_obj(inout vec3 loc_eye, inout vec3 dir, inout vec3 c) {
float min_len = 1000000;
uint near_id = 0;
float len;
float min_len2 = 1000000;
int near_id2 = -1;
for (int i=0; i<3; i++) {
if (i!=last_plane) {
len = ray_intersect_plane(loc_eye, dir, m[i]);
if (len<min_len2) {
min_len2 = len;
near_id2 = i;
}
}
}

//
if (near_id2>=0) {
loc_eye = m[near_id2].p_plane;
dir = reflect(dir, m[near_id2].n_plane);
last_plane =near_id2;
return true;
}

for (uint i=0; i<Shape_obj.length(); i++) {
len = ray_intersect_sphere(loc_eye, dir, Shape_obj[i]);
if ((len>0)&&(len<min_len)) {
min_len = len;
near_id = i;
}
}
//
if (min_len>=1000000) {return false;}

vec3 hit = loc_eye + dir * min_len;
vec3 Normal = normalize(hit - Shape_obj[near_id].xyz);
vec3 to_light = u_LightPosition - hit;
float to_light_len = length(to_light);
vec3 light_dir = normalize(to_light);
float diffuse_light = max(dot(light_dir, Normal), 0.0);
c = min(c + Sphere_color[near_id].xyz * (diffuse_light*0.8+0.2),1);
return false;
}
//---------------------------------------------------------
void main(void) {
if (gl_GlobalInvocationID.x >= size.x || gl_GlobalInvocationID.y >= size.y) return;
const vec2 pos = gl_GlobalInvocationID.xy * u_InvScreenSize.xy;
vec3 dir = normalize(mix(mix(ray00, ray01, pos.y), mix(ray10, ray11, pos.y), pos.x));
vec3 c = vec3(0, 0, 0);
//
vec3 eye = vec3(u_CameraPosition);

//
m[0].v_plane = vec3(0,-5,0);
m[0].n_plane = vec3(0,1,0);
m[1].v_plane = mat_rotate * m[0].v_plane;
m[1].n_plane = mat_rotate * m[0].n_plane;
m[2].v_plane = mat_rotate * m[1].v_plane;
m[2].n_plane = mat_rotate * m[1].n_plane;

//
for (int i=0; i<20; i++) {
if (!all_obj(eye, dir, c)) {break;}
}

//
imageStore(IMG, ivec2(gl_GlobalInvocationID.xy), vec4(c,1));
}

एक अन्य दृष्टिकोण में, मैंने बहुरूपदर्शक पैटर्न की आवधिकता संपत्ति का उपयोग किया। प्रत्येक शीर्ष को हमेशा दो अन्य लोगों के साथ जोड़ा जाता है, यहां तीन कोने तीन रंगों द्वारा इंगित किए जाते हैं।
हम बफर ऑब्जेक्ट को एक समभुज बनाने वाले समबाहु त्रिभुजों के कोने के निर्देशांक के साथ भरते हैं।

आकृति में, रंगों को संख्याओं से बदल दिया जाता है। कृपया ध्यान दें: सम और विषम पंक्तियों को एक शिफ्ट के साथ दोहराया जाता है। हम अनावश्यक तत्वों को काटते हैं, केवल आवश्यक शीर्ष सूचकांक प्रदर्शित करते हैं और परिणामस्वरूप हमें एक षट्भुज मिलता है जिसे आसानी से स्केल किया जा सकता है।

इसके बाद, रंगों को टेक्सचर से बदलें, मिनी-टेक्सचर टेम्पलेट से निर्देशांक।

यादृच्छिक रंगों के आयतों के साथ एक बनावट को भरने का एक उदाहरण।

डिस्प्ले को बेहतर बनाने के लिए, स्क्रीन के आकार के लिए षट्भुज बढ़ाएं, और अक्षीय घुमाव भी जोड़ें।

एक दिशा में घूमने से कुछ मिनटों के चिंतन के बाद, यह हलचल शुरू हो गई। इस अप्रिय प्रभाव को खत्म करने के लिए, रोटेशन को प्रत्येक दिशा में क्रमिक रूप से लागू किया गया था।

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

परिणाम बहुत अच्छा चित्र है

वीडियो

(मुझे पता नहीं है कि वीडियो कैसे बनाना है, मैं गुणवत्ता के लिए माफी माँगता हूँ)

Shader कोड अविश्वसनीय रूप से सरल है।

जीएलएसएल शेडर कोड

 //  #version 330 core layout (location = 0) in vec4 a_Position; uniform mat4 u_MVP; out vec4 v_Color; out vec2 v_TexCoords; void main() { v_TexCoords = a_Position.zw; gl_Position = u_MVP * vec4(a_Position.xy, 0, 1); } //  #version 330 core precision mediump float; varying vec2 v_TexCoords; uniform sampler2D u_Texture; void main(){ gl_FragColor = texture(u_Texture, v_TexCoords); }

बच्चे संतुष्ट थे, और मैंने कई शामों तक ध्यान में लटकाया।

→ डेमो (विंडोज के लिए EXE)

बचपन में केलीडोस्कोप

More articles: