👨🏾‍🚒 🦕 💃 प्रक्रियात्मक बनावट: कोबलस्टोन बनावट सृजन ⭐️ 🤶🏾 👩🏾‍🔬

हम एक जनरेटर लिख रहे हैं जो एक दर्जन इनपुट मापदंडों को लेता है और एक कोबलस्टोन बनावट का उत्पादन करता है।

परिचय

मेरे शौक कंप्यूटर ग्राफिक्स और साइकिल के आविष्कार हैं। .Kkrieger खेलने और इस और इस पोस्ट को पढ़ने के बाद, मुझे अपनी बनावट जनरेटर को लिखने की इच्छा हुई। एक बनावट विषय के रूप में कोबलस्टोन का चयन करते हुए, मैंने इसे गूगल करना शुरू किया। ईमानदारी से, एक-कोबस्टोन बनावट के जनरेटर को गूगल करना मुश्किल था, यहां तक कि -minecraft विकल्प के साथ भी। इस बात पर थूकते हुए वह अपने लिए सोचने लगा।

कहां से शुरू करें

मेरे विचारों की पंक्ति लगभग इस प्रकार थी:
- मुझे पत्थर चाहिए
- अधिक पत्थरों की जरूरत है! एक बेहतरीन बनावट के लिए। और बनावट जितनी बड़ी होगी, पीढ़ी का समय उतना ही अधिक होगा। यह बुरा है।
- पत्थर अलग हैं (आकार और रंग में)
- उत्तल पत्थर (उभरा हुआ)
- खुरदरी पत्थर की बनावट
- विभिन्न प्रकार के पत्थरों में विभिन्न प्रकार के खुरदरेपन होते हैं
- चूंकि बनावट में रंग और राहत है, इसलिए इन घटकों को अलग करना अच्छा होगा। एक शुद्ध रंग बनावट और एक सामान्य नक्शा होने दें।
हमारे जनरेटर में, बनावट चरणों में बनाया जाएगा: पहले हम एक बनावट बनाते हैं, इसके लिए फ़िल्टर लागू करते हैं, इसे किसी अन्य बनावट के साथ मिलाते हैं, आदि अब हमें अच्छी तरह से ज्ञात एल्गोरिदम को याद रखने या खोजने की आवश्यकता है जो हमारी मदद कर सकते हैं। मैं अनुकूलन के बारे में बात करते हुए, अपने जनरेटर में उपयोग की जाने वाली सभी विधियों को सरल रूप से सूचीबद्ध करूंगा।
मैंने QtCreator में Qt 4.XY लाइब्रेरी का उपयोग करके C ++ में एक जनरेटर लिखने का फैसला किया। हालांकि, मैंने खुद को क्यूटी के बिना जनरेटर वर्ग लिखने की कोशिश की।

मधुकोश की बनावट

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

स्पॉइलर

unsigned char *ProceduralTexture::generateCelluarTexture(int size){ if (size<2) size = 2; int cellX = w/size+2; int cellY = h/size+2; int pointsX[cellX][cellY]; int pointsY[cellX][cellY]; srand(seed); for (int i=0; i<cellX; i++) for (int j=0; j<cellY; j++){ pointsX[i][j] = i*size+rand()%((int)(size*0.7))+size*0.15-size; pointsY[i][j] = j*size+rand()%((int)(size*0.7))+size*0.15-size; } int distBuff[n]; int maxDist = INT_MIN; for (int i=0; i<n; i++){ int x = i%w; int y = i/w; int min = INT_MAX; int min2 = INT_MAX; int startX = x/size; int finishX = startX+3; for (int cp=-1, point=0; startX<finishX; startX++){ int startY = y/size; int finishY = startY+3; for (; startY<finishY; startY++, point++){ if (startX<0 || startX>=cellX || startY<0 || startY>=cellY) continue; int d = distance(x, y, pointsX[startX][startY], pointsY[startX][startY]); if (d<min){ cp = point; min2 = min; min = d; } if (d<min2 && cp!=point) min2 = d; } } distBuff[i] = min2-min; if (maxDist<distBuff[i]) maxDist = distBuff[i]; } unsigned char *img = new unsigned char[n]; for (int i=0; i<n; i++) img[i] = (distBuff[i]*255)/maxDist; return img; }

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

चमक और इसके विपरीत

मुझे लगता है कि कई ने इस फिल्टर का इस्तेमाल फोटोशॉप या अन्य ग्राफिक संपादकों में किया। अब हम इसका कार्यान्वयन स्वयं लिखेंगे।

कोड

 void ProceduralTexture::brightnessContrast(unsigned char *img, float brightness, float contrast, bool onePass){ // onePass -   if (brightness!=0){ if (brightness>0){ if (brightness>1) brightness = 1; brightness = 1.0f-brightness; for (int i=0; i<n; i++){ int r = 255-img[i]; r *= brightness; img[i] = 255-r; } } if (brightness<0){ if (brightness<-1) brightness = -1; brightness = 1.0f+brightness; for (int i=0; i<n; i++) img[i] *= brightness; } } if (contrast!=1){ if (contrast<0) contrast = 0; int avbr = 0; if (!onePass){ for (int i=0; i<n; i++) avbr += img[i]; avbr /= n; } else avbr = 127; for (int i=0; i<n; i++){ int res = contrast*(img[i]-avbr)+avbr; if (res<0) res = 0; if (res>255) res = 255; img[i] = res; } } }

फ़ंक्शन छवि और चमक और कंट्रास्ट अनुपात के लिए एक इनपुट पॉइंटर लेता है। गणना के सूत्र यहां वर्णित हैं ।

पेर्लिन का शोर

पेर्लिन शोर (हैबे पर सहित) के बारे में बहुत सारे लेख लिखे गए हैं, मैं एल्गोरिथ्म का वर्णन नहीं करूंगा, मैं केवल अनुकूलन के बारे में बात करूंगा और एक उदाहरण कोड दूंगा।

कोड

 // : interpolateTable = NULL; powTable = new float[maxOctaves]; for (int i=0; i<maxOctaves; i++) powTable[i] = pow(0.5, i); inline int ProceduralTexture::getRnd(int x, int y){ return (0x6C078965*(seed^((x*2971902361)^(y*3572953751))))&0x7FFFFFFF; } inline int ProceduralTexture::pointOfPerlinNoise(int x, int y, int cellSize){ int dx = x-(x/cellSize)*cellSize; int dy = y-(y/cellSize)*cellSize; int z1 = getRnd(x-dx, y-dy); // z3 --- z4 int z2 = getRnd(x-dx+cellSize, y-dy); // | | int z3 = getRnd(x-dx, y-dy+cellSize); // + z + int z4 = getRnd(x-dx+cellSize, y-dy+cellSize); // z1 --- z2 int z1z3 = z1*(1.0f-interpolateTable[dy])+z3*interpolateTable[dy]; int z2z4 = z2*(1.0f-interpolateTable[dy])+z4*interpolateTable[dy]; return z1z3*(1.0f-interpolateTable[dx])+z2z4*interpolateTable[dx]; } unsigned char *ProceduralTexture::generatePerlinNoise(int octaves){ unsigned char *img = new unsigned char[n]; if (octaves<1) octaves = 1; if (octaves>maxOctaves) octaves = maxOctaves; for (int i=0; i<n; i++) img[i] = 0; float norm = 255.0f/INT_MAX; for (int j=1; j<=octaves; j++){ int f = 1<<(octaves-j); delete[] interpolateTable; interpolateTable = new float[f]; for (int i=0; i<f; i++){ float a = ((float)i/(float)f)*M_PI; interpolateTable[i] = (1.0f-cosf(a))*0.5f; } for (int i=0; i<n; i++) img[i] += pointOfPerlinNoise(i%w, i/w, f)*powTable[j]*norm; } return img; }

पहला अनुकूलन: हमें प्रक्षेप गुणांक (1.0f-cosf (a)) * 0.5f) की गणना से छुटकारा मिलता है - इसके लिए, हम पहले से सभी विकल्पों की गणना करते हैं। और हमारे पास इतने सारे विकल्प नहीं हैं - अधिकतम संख्या में राउंड। इसलिए, प्रत्येक सप्तक की गणना करने से पहले, हम सभी गुणांक की गणना करते हैं और इंटरपोलेटटेबल सरणी में डालते हैं।
दूसरा अनुकूलन पहले के समान है - हम उन सभी स्थानों को प्रतिस्थापित करते हैं, जहां वर्गों की गणना पूर्व-गणना मूल्यों (पॉवेटेबल) के साथ की जाती है।
मैंने यथासंभव RNG को सरल बनाने की कोशिश की और जितना संभव हो फ्लोटिंग-पॉइंट नंबरों से छुटकारा पाया।

नरम कदम प्रभाव

मैं स्वयं इस प्रभाव के साथ आया था (शायद मैंने एक साइकिल का आविष्कार किया था - मुझे नहीं पता)। लेकिन वह एक बेहतर नाम के साथ नहीं आया - क्षमा करें। फ़ोटोशॉप में पोस्टरराइजेशन के प्रभाव के समान कुछ है, लेकिन यह न केवल पैलेट को काटता है, बल्कि संक्रमण को भी सुचारू करता है। मैं एक ग्राफ के रूप में इसके सार को चित्रित करने की कोशिश करूंगा:
एक रैखिक ढाल के सीधी रेखा ग्राफ को चिकनी कोणों के साथ सीढ़ी के एक प्रकार में परिवर्तित करना आवश्यक है।

ऐसा करने के लिए, वर्तमान पिक्सेल की रंग तीव्रता का मान लें, इसे पुनरावृत्तियों (चरणों) की संख्या से विभाजित करें। हमें पूरा भाग और शेष भाग याद है। शेष से इसकी अधिकतम सीमा का आधा घटाएं और चिकनाई गुणांक से गुणा करें। परिणामी संख्या को पूर्णांक भाग में वापस जोड़ा जाता है। ओह, कोड में दिखाना आसान है:

 void ProceduralTexture::postEffect(unsigned char *img, int iterations, float smooth){ for (int i=0; i<n; i++){ float s = (float)img[i]/255.0f; float ds = s*(float)iterations-(float)((int)(s*iterations)); ds = smooth*(ds-0.5f)+0.5f; if (ds>1) ds = 1; if (ds<0) ds = 0; s = ((float)((int)(s*(float)iterations))+ds)/(float)iterations; img[i] = s*255; } }

फ़ंक्शन छवि को एक इनपुट पॉइंटर लेता है जिसे परिवर्तित करने की आवश्यकता है, पुनरावृत्तियों की संख्या और चिकनाई की डिग्री। यह समझने के लिए कि यह छवि फ़िल्टर वास्तव में कैसे बदलता है, मैं एक उदाहरण दूंगा:
हर जगह पुनरावृत्तियों की संख्या पांच है। बाएं से दाएं की चिकनाई की डिग्री: 1, 1.5, 2.5

वैसे, इस शीर्षक का उपयोग पोस्ट शीर्षक में दूसरी तस्वीर में किया गया है।

मिश्रण

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

कोड

 void ProceduralTexture::mix(unsigned char *img1, unsigned char *img2, int valueTest, float opacity){ for (int i=0; i<n; i++) if (img2[i]<=valueTest){ int b = img2[i]; int r = img1[i]; b = ((float)b/valueTest)*255.0f; r = r-(255-b)*opacity; if (r<0) r = 0; img1[i] = r; } }

रंग

प्रत्येक कंकड़ का अपना अलग रंग होता है। लेकिन सामान्य तौर पर, ये सभी रंग एक-दूसरे के समान हैं। उदाहरण के लिए, कंकड़ को हरा या भूरा कहा जा सकता है, लेकिन उनमें से हरे या भूरे रंग के कई अलग-अलग रंग होंगे। आरजीबी पैलेट ऐसे उद्देश्यों के लिए बहुत उपयुक्त नहीं है, क्योंकि उसके लिए यह मुश्किल है "10% की सीमा में ग्रे-ब्राउन-रास्पबेरी रंग के सभी रंगों को दें।" इसलिए मैंने एचएसवी पैलेट को चुना। इसके माध्यम से, रंग सेट करना सुविधाजनक है: पत्थरों की चमक, संतृप्ति और रंग। इस मामले में, आप ह्यू की एक सीमा निर्दिष्ट कर सकते हैं। इसलिए, उदाहरण के लिए, अगर मुझे रंगों की आवश्यकता है, तो मैं ह्यू घटक को 60 प्लस या माइनस 10 पर सेट कर सकता हूं। आरजीबी पैलेट में, मुझे सभी चैनलों के साथ टिंकर करना होगा।
हालांकि, एचएसवी मॉडल का उपयोग करते समय, रंग रूपांतरण की आवश्यकता होती है - क्योंकि अंतिम छवि में हमारे पास एक आरजीबी मॉडल है। एक ही विकी से एल्गोरिथ्म लेते हुए, हम कोड लिखेंगे:

स्पॉइलर

 inline ColorRGB ProceduralTexture::hsvToRgb(ColorHSV &hsv){ ColorRGB rgb; if (hsv.s){ hsv.h %= 360; if (hsv.h<0) hsv.h += 360; int i = hsv.h/60; float f = ((float)hsv.h/60.0f)-(float)i; unsigned char c1 = (hsv.v*(100-hsv.s))*0.0255f; unsigned char c2 = (hsv.v*(100-hsv.s*f))*0.0255f; unsigned char c3 = (hsv.v*(100-hsv.s*(1.0ff)))*0.0255f; hsv.v *= 2.55f; switch (i){ case 0: rgb.r = hsv.v; rgb.g = c3; rgb.b = c1; break; case 1: rgb.r = c2; rgb.g = hsv.v; rgb.b = c1; break; case 2: rgb.r = c1; rgb.g = hsv.v; rgb.b = c3; break; case 3: rgb.r = c1; rgb.g = c2; rgb.b = hsv.v; break; case 4: rgb.r = c3; rgb.g = c1; rgb.b = hsv.v; break; case 5: rgb.r = hsv.v; rgb.g = c1; rgb.b = c2; break; } } else rgb.r = rgb.g = rgb.b = hsv.v; return rgb; }

अब यह कंकड़ भरने का कार्य लिखने के लिए बना हुआ है। मैं बस जाल बनावट पीढ़ी समारोह अतिभारित। वास्तव में, पूरी छायांकन इस तथ्य पर उतरती है कि जब हम यादृच्छिक बिंदुओं के प्रारंभिक सेट को उत्पन्न करते हैं, तो हम उन्हें एक रंग प्रदान करते हैं।

स्पॉइलर

 ColorRGB *ProceduralTexture::generateCelluarTexture(int size, ColorHSV color, int hueRange){ if (size<2) size = 2; int cellX = w/size+2; int cellY = h/size+2; int pointsX[cellX][cellY]; int pointsY[cellX][cellY]; ColorRGB cellColor[cellX][cellY]; srand(seed); for (int i=0; i<cellX; i++) for (int j=0; j<cellY; j++){ pointsX[i][j] = i*size+rand()%((int)(size*0.7))+size*0.15-size; pointsY[i][j] = j*size+rand()%((int)(size*0.7))+size*0.15-size; } color.h -= (hueRange/2); for (int i=0; i<cellX; i++) for (int j=0; j<cellY; j++){ ColorHSV c = color; ch += rand()%hueRange; cellColor[i][j] = hsvToRgb(c); } ColorRGB *img = new ColorRGB[n]; for (int i=0; i<n; i++){ int x = i%w; int y = i/w; int px = 0; int py = 0; int min = INT_MAX; int startX = x/size; int finishX = startX+3; for (; startX<finishX; startX++){ int startY = y/size; int finishY = startY+3; for (; startY<finishY; startY++){ if (startX<0 || startX>=cellX || startY<0 || startY>=cellY) continue; int d = distance(x, y, pointsX[startX][startY], pointsY[startX][startY]); if (d<min){ px = startX; py = startY; min = d; } } } img[i] = cellColor[px][py]; } return img; }

सामान्य नक्शा

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

स्पॉइलर

 void ProceduralTexture::generateNormalMap(unsigned char *img){ normalMap = new ColorRG[n]; int maxR = 0; int maxG = 0; for (int i=0; i<n; i++){ int x = i%w; int y = i/w; if (x>0){ int dr = (int)img[y*w+x-1]-(int)img[y*w+x]; if (dr>maxR) maxR = dr; } if (y>0){ int dg = (int)img[(y-1)*w+x]-(int)img[y*w+x]; if (dg>maxG) maxG = dg; } } maxR *= 2; maxG *= 2; for (int i=0; i<n; i++){ int x = i%w; int y = i/w; if (x>0){ int r = 127+(((int)img[y*w+x-1]-(int)img[y*w+x])*255)/maxR; if (r>255) r = 255; if (r<0) r = 0; normalMap[y*w+x].r = r; } else { int r = 127-(((int)img[y*w+x+1]-(int)img[y*w+x])*255)/maxR; if (r>255) r = 255; if (r<0) r = 0; normalMap[y*w+x].r = r; } if (y>0){ int g = 127+(((int)img[(y-1)*w+x]-img[y*w+x])*255)/maxG; if (g>255) g = 255; if (g<0) g = 0; normalMap[y*w+x].g = g; } else { int g = 127-(((int)img[(y+1)*w+x]-img[y*w+x])*255)/maxG; if (g>255) g = 255; if (g<0) g = 0; normalMap[y*w+x].g = g; } } }

और यहीं पर शडर है। स्पष्टता के लिए, मैंने माउस कर्सर की स्थिति में एक स्पॉटलाइट बनाया (हेडर में चित्रों में, माउस कर्सर ऊपरी बाएँ कोने में था

स्पॉइलर

 // varying vec4 texCoord; void main(){ gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex; texCoord = gl_MultiTexCoord0; } // uniform sampler2D colorMap; uniform sampler2D normalMap; varying vec4 texCoord; uniform vec2 light; uniform vec2 screen; uniform float dist; void main() { vec3 normal = texture2D(normalMap, texCoord.st).rgb; normal = 2.0*normal-1.0; vec3 n = normalize(normal); vec3 l = normalize(vec3((gl_FragCoord.xy-light.xy)/screen, dist)); float a = dot(n, l); gl_FragColor = a*texture2D(colorMap, texCoord.st); }

सब कुछ एक साथ गोंद

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

लेकिन सहज बनावट का क्या?

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

कुछ अनुकूलन। क्या यह इसके लायक था?

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

स्रोत कोड

पीढ़ी के लिए मुख्य वर्ग को प्रोसेडुरल टेक्सचर कहा जाता है। मैंने कमोबेश खूबसूरती से लिखने की कोशिश की कि 5 वीं का छात्र कितना कर सकता है। बाकी सब कुछ एक शरीर किट है, इंटरफ़ेस भाग केवल प्रदर्शन के लिए आवश्यक है। खूबसूरती से, मैंने वास्तव में वहाँ लिखने की कोशिश नहीं की।
स्रोत कोड

कुछ और उदाहरण

प्रक्रियात्मक बनावट: कोबलस्टोन बनावट सृजन

परिचय

कहां से शुरू करें

मधुकोश की बनावट

चमक और इसके विपरीत

पेर्लिन का शोर

नरम कदम प्रभाव

मिश्रण

रंग

सामान्य नक्शा

सब कुछ एक साथ गोंद

लेकिन सहज बनावट का क्या?

कुछ अनुकूलन। क्या यह इसके लायक था?

स्रोत कोड

More articles: