2D التلاعب المكاني مع الحقول مسافة موقعة

عند العمل باستخدام الأصول المضلعة ، يمكنك رسم كائن واحد فقط في وقت واحد (إذا كنت لا تأخذ في الاعتبار تقنيات مثل التجميع والتثبيط) ، ولكن إذا كنت تستخدم حقول المسافات بعلامة (حقول المسافة الموقعة ، SDF) ، فنحن لا نقتصر على ذلك. إذا كان لموضعين نفس الإحداثيات ، فسوف تُرجع وظائف المسافة الموقعة القيمة نفسها ، وفي حساب واحد يمكننا الحصول على عدة أرقام. لفهم كيفية تحويل المساحة المستخدمة لإنشاء حقول مسافة موقَّعة ، نوصيك بمعرفة كيفية إنشاء أشكال باستخدام وظائف المسافة الموقعة والجمع بين أشكال sdf .

التكوين

بالنسبة لهذا البرنامج التعليمي ، أقوم بتعديل الاقتران بين المربع والدائرة ، لكن يمكنك استخدامه لأي شكل آخر. هذا مشابه لتكوين البرنامج التعليمي السابق .

من المهم هنا أن يكون الجزء القابل للتعديل قبل استخدام المواقف لإنشاء أرقام.

Shader "Tutorial/036_SDF_Space_Manpulation/Type"{ Properties{ _InsideColor("Inside Color", Color) = (.5, 0, 0, 1) _OutsideColor("Outside Color", Color) = (0, .5, 0, 1) _LineDistance("Mayor Line Distance", Range(0, 2)) = 1 _LineThickness("Mayor Line Thickness", Range(0, 0.1)) = 0.05 [IntRange]_SubLines("Lines between major lines", Range(1, 10)) = 4 _SubLineThickness("Thickness of inbetween lines", Range(0, 0.05)) = 0.01 } SubShader{ //the material is completely non-transparent and is rendered at the same time as the other opaque geometry Tags{ "RenderType"="Opaque" "Queue"="Geometry"} Pass{ CGPROGRAM #include "UnityCG.cginc" #include "2D_SDF.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; v2f vert(appdata v){ v2f o; //calculate the position in clip space to render the object o.position = UnityObjectToClipPos(v.vertex); //calculate world position of vertex o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { // manipulate position with cool methods here! float2 squarePosition = position; squarePosition = translate(squarePosition, float2(2, 2)); squarePosition = rotate(squarePosition, .125); float squareShape = rectangle(squarePosition, float2(1, 1)); float2 circlePosition = position; circlePosition = translate(circlePosition, float2(1, 1.5)); float circleShape = circle(circlePosition, 1); float combination = merge(circleShape, squareShape); return combination; } float4 _InsideColor; float4 _OutsideColor; float _LineDistance; float _LineThickness; float _SubLines; float _SubLineThickness; fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = lerp(_InsideColor, _OutsideColor, step(0, dist)); float distanceChange = fwidth(dist) * 0.5; float majorLineDistance = abs(frac(dist / _LineDistance + 0.5) - 0.5) * _LineDistance; float majorLines = smoothstep(_LineThickness - distanceChange, _LineThickness + distanceChange, majorLineDistance); float distanceBetweenSubLines = _LineDistance / _SubLines; float subLineDistance = abs(frac(dist / distanceBetweenSubLines + 0.5) - 0.5) * distanceBetweenSubLines; float subLines = smoothstep(_SubLineThickness - distanceChange, _SubLineThickness + distanceChange, subLineDistance); return col * majorLines * subLines; } ENDCG } } FallBack "Standard" } 

وتبدو الوظيفة 2D_SDF.cginc الموجودة في نفس المجلد مع التظليل ، والتي سنقوم بتوسيعها ، في البداية كما يلي:

 #ifndef SDF_2D #define SDF_2D //transforms float2 rotate(float2 samplePosition, float rotation){ const float PI = 3.14159; float angle = rotation * PI * 2 * -1; float sine, cosine; sincos(angle, sine, cosine); return float2(cosine * samplePosition.x + sine * samplePosition.y, cosine * samplePosition.y - sine * samplePosition.x); } float2 translate(float2 samplePosition, float2 offset){ //move samplepoint in the opposite direction that we want to move shapes in return samplePosition - offset; } float2 scale(float2 samplePosition, float scale){ return samplePosition / scale; } //combinations ///basic float merge(float shape1, float shape2){ return min(shape1, shape2); } float intersect(float shape1, float shape2){ return max(shape1, shape2); } float subtract(float base, float subtraction){ return intersect(base, -subtraction); } float interpolate(float shape1, float shape2, float amount){ return lerp(shape1, shape2, amount); } /// round float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 - radius, shape2 - radius); intersectionSpace = min(intersectionSpace, 0); float insideDistance = -length(intersectionSpace); float simpleUnion = merge(shape1, shape2); float outsideDistance = max(simpleUnion, radius); return insideDistance + outsideDistance; } float round_intersect(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 + radius, shape2 + radius); intersectionSpace = max(intersectionSpace, 0); float outsideDistance = length(intersectionSpace); float simpleIntersection = intersect(shape1, shape2); float insideDistance = min(simpleIntersection, -radius); return outsideDistance + insideDistance; } float round_subtract(float base, float subtraction, float radius){ return round_intersect(base, -subtraction, radius); } ///champfer float champfer_merge(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleMerge = merge(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer - champferSize; return merge(simpleMerge, champfer); } float champfer_intersect(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleIntersect = intersect(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer + champferSize; return intersect(simpleIntersect, champfer); } float champfer_subtract(float base, float subtraction, float champferSize){ return champfer_intersect(base, -subtraction, champferSize); } /// round border intersection float round_border(float shape1, float shape2, float radius){ float2 position = float2(shape1, shape2); float distanceFromBorderIntersection = length(position); return distanceFromBorderIntersection - radius; } float groove_border(float base, float groove, float width, float depth){ float circleBorder = abs(groove) - width; float grooveShape = subtract(circleBorder, base + depth); return subtract(base, grooveShape); } //shapes float circle(float2 samplePosition, float radius){ //get distance from center and grow it according to radius return length(samplePosition) - radius; } float rectangle(float2 samplePosition, float2 halfSize){ float2 componentWiseEdgeDistance = abs(samplePosition) - halfSize; float outsideDistance = length(max(componentWiseEdgeDistance, 0)); float insideDistance = min(max(componentWiseEdgeDistance.x, componentWiseEdgeDistance.y), 0); return outsideDistance + insideDistance; } #endif 

تكرار الفضاء

انعكاس المرآة

واحدة من أبسط العمليات هي عكس العالم عن المحور. لنسخها حول المحور y ، نأخذ القيمة المطلقة للمكون x في موضعنا. وبالتالي ، فإن الإحداثيات إلى يمين ويسار المحور ستكون هي نفسها. (-1, 1) يتحول إلى (1, 1) ، ويظهر داخل الدائرة ، باستخدام (1, 1) كأصل (1, 1) ويبلغ نصف قطرها أكبر من 0.

في أغلب الأحيان ، سيبدو الرمز الذي يستخدم هذه الوظيفة مثل position = mirror(position); النسخة position = mirror(position); حتى نتمكن من تبسيطها قليلا. سوف نعلن ببساطة حجة الموقف كما inout. وبالتالي ، عند الكتابة إلى الوسيطة ، فإنه سيغير أيضًا المتغير الذي نمرره إلى الوظيفة. يمكن أن تكون قيمة الإرجاع من النوع "باطلة" ، لأننا ما زلنا لا نستخدم قيمة الإرجاع.

 //in 2D_SDF.cginc void mirror(inout float2 position){ position.x = abs(position.x); } 

 //in shader function mirror(position); 

لقد اتضح أنه جيد بالفعل بالفعل ، ولكن بهذه الطريقة نحصل على محور واحد فقط للنسخ المتطابق. يمكننا توسيع الوظيفة عن طريق تدوير المساحة كما فعلنا عند تدوير الأشكال. تحتاج أولاً إلى تدوير المساحة ، ثم عكسها ، ثم إعادة تدويرها. بهذه الطريقة يمكننا أداء النسخ المتطابق فيما يتعلق بأي زاوية. نفس الشيء ممكن عند نقل المساحة وتنفيذ النقل العكسي بعد النسخ المتطابق. (إذا قمت بإجراء كلتا العمليتين ، ثم قبل النسخ المتطابق ، لا تنسَ إجراء عملية النقل أولاً ، ثم المنعطف ، وبعد ذلك يتم الدوران أولاً).

 //in shader function float rotation = _Time.y * 0.25; position = rotate(position, rotation); mirror(position); position = rotate(position, -rotation); 

خلايا

إذا كنت تعرف كيف يعمل توليد الضوضاء ، فأنت تفهم أنه بالنسبة للجيل الإجرائي ، فإننا غالبًا ما نكرر هذا الموقف ونحصل على خلايا صغيرة متماثلة أساسًا ، تختلف فقط في المعلمات غير المهمة. يمكننا أن نفعل الشيء نفسه بالنسبة لحقول المسافة.

نظرًا لأن وظيفة fmod (بالإضافة إلى استخدام٪ للقسمة على الباقي) تعطينا الباقي ، وليس تعريف الباقي ، فسوف يتعين علينا استخدام خدعة. أولاً ، نأخذ باقي تقسيم عدد صحيح بواسطة الدالة fmod. بالنسبة للأرقام الموجبة ، هذا هو بالضبط ما نحتاج إليه ، وبالنسبة للأعداد السالبة ، هذه هي النتيجة التي نحتاجها مطروحًا منها هذه الفترة. يمكنك إصلاح ذلك عن طريق إضافة فترة ومرة ​​أخرى أخذ باقي التقسيم. ستؤدي إضافة فترة إلى إعطاء النتيجة المرغوبة لقيم المدخلات السالبة ، وقيم المدخلات الموجبة ، تكون القيمة أعلى بفترة واحدة. لن تفعل البقية الثانية من القسمة أي شيء بقيم قيم المدخلات السلبية ، لأنها موجودة بالفعل في النطاق من 0 إلى الفترة ، وبالنسبة لقيم المدخلات الإيجابية ، فإننا نطرح أساسًا فترة واحدة.

 //in 2D_SDF.cginc void cells(inout float2 position, float2 period){ position = fmod(position, period); //negative positions lead to negative modulo position += period; //negative positions now have correct cell coordinates, positive input positions too high position = fmod(position, period); //second mod doesn't change values between 0 and period, but brings down values that are above period. } 

 //in shader function cells(position, float2(3, 3)); 

المشكلة في الخلايا هي أننا نفقد الاستمرارية التي نحب بها حقول المسافات. هذا ليس سيئًا إذا كانت الأشكال موجودة فقط في منتصف الخلايا ، ولكن في المثال الموضح أعلاه ، يمكن أن يؤدي ذلك إلى بعض التحف الفنية الهامة التي ينبغي تجنبها عند استخدام حقول المسافات لمجموعة متنوعة من المهام التي يمكن فيها عادة استخدام حقول المسافات.

هناك حل واحد لا يعمل في كل حالة ، لكن عندما ينجح ، من الرائع: عكس كل خلية أخرى. للقيام بذلك ، نحتاج إلى فهرس خلايا البكسل ، لكننا لا نزال لا نمتلك قيمة إرجاع في الوظيفة ، حتى نتمكن من استخدامها فقط لإرجاع فهرس الخلية.

لحساب مؤشر الخلية ، نقوم بتقسيم الموضع على الفترة. وبالتالي ، 0-1 هي الخلية الأولى ، 1-2 هي الثانية ، وهكذا ... ويمكننا أن نفهمها بسهولة. للحصول على فهرس الخلية ، قمنا ببساطة بتقريب القيمة لأسفل وإرجاع النتيجة. الشيء المهم هو أننا نحسب مؤشر الخلية قبل الانقسام مع الباقي لتكرار الخلايا. وإلا ، فسنحصل على مؤشر 0 في كل مكان ، لأن الموضع لا يمكن أن يتجاوز المدة.

 //in 2D_SDF.cginc float2 cells(inout float2 position, float2 period){ position = fmod(position, period); //negative positions lead to negative modulo position += period; //negative positions now have correct cell coordinates, positive input positions too high position = fmod(position, period); //second mod doesn't change values between 0 and period, but brings down values that are above period. float2 cellIndex = position / period; cellIndex = floor(cellIndex); return cellIndex; } 

مع هذه المعلومات ، يمكننا قلب الخلايا. لفهم ما إذا كان يجب قلبه أم لا ، نقسم معامل فهرس الخلية 2. تكون نتيجة هذه العملية بالتناوب 0 و 1 أو -1 في كل خلية ثانية. لجعل التغيير أكثر ديمومة ، نأخذ القيمة المطلقة ونحصل على قيمة تنتقل بين 0 و 1.

لاستخدام هذه القيمة للانعكاس بين الموضع العادي والمقلوب ، نحتاج إلى وظيفة لا تفعل شيئًا للقيمة 0 ، ونطرح الموضع من الفترة التي يكون فيها التقليب هو 1. وهذا هو ، ونحن نقوم بإجراء الاستيفاء الخطي من الوضع الطبيعي إلى المقلوب باستخدام متغير التقليب . نظرًا لأن المتغير flip هو ناقل ثنائي الأبعاد ، يتم قلب مكوناته بشكل فردي.

 //in shader function float2 period = 3; float2 cell = cells(position, period); float2 flip = abs(fmod(cell, 2)); position = lerp(position, period - position, flip); 

خلايا شعاعية

ميزة أخرى كبيرة هي تكرار الفضاء في نمط شعاعي.

للحصول على هذا التأثير ، نقوم أولاً بحساب الموضع الشعاعي. للقيام بذلك ، نقوم بتشفير الزاوية بالنسبة إلى مركز المحور س والمسافة من المركز على طول المحور ص.

 float2 radialPosition = float2(atan2(position.x, position.y), length(position)); 

ثم نكرر الزاوية. نظرًا لأن نقل عدد التكرارات أسهل بكثير من زاوية كل قطعة ، فنحن أولاً نحسب حجم كل قطعة. الدائرة بأكملها هي 2 * pi ، حتى نحصل على الجزء الصحيح ، نقسم 2 * pi على حجم الخلية.

 const float PI = 3.14159; float cellSize = PI * 2 / cells; 

باستخدام هذه المعلومات ، يمكننا تكرار المكون x للموضع الكعبري لكل وحدات حجم الخلية. نقوم بإجراء التكرار عن طريق القسمة على الباقي ، وبالتالي ، كما كان من قبل ، فإننا نواجه مشاكل مع الأعداد السالبة ، والتي يمكن القضاء عليها بمساعدة وظيفتي تقسيم مع الباقي.

 radialPosition.x = fmod(fmod(radialPosition.x, cellSize) + cellSize, cellSize); 

ثم تحتاج إلى نقل الموضع الجديد مرة أخرى إلى إحداثيات س ص المعتادة. هنا نستخدم الدالة sincos مع المكون x للموضع الكعبري كزاوية لكتابة الجيب إلى إحداثي x للموقف وجيب التمام إلى إحداثي y. مع هذه الخطوة ، حصلنا على وضع طبيعي. للحصول على الاتجاه الصحيح من المركز ، تحتاج إلى ضربه بالمكون ص في الموضع الشعاعي ، وهو ما يعني الطول.

 //in 2D_SDF.cginc void radial_cells(inout float2 position, float cells){ const float PI = 3.14159; float cellSize = PI * 2 / cells; float2 radialPosition = float2(atan2(position.x, position.y), length(position)); radialPosition.x = fmod(fmod(radialPosition.x, cellSize) + cellSize, cellSize); sincos(radialPosition.x, position.x, position.y); position = position * radialPosition.y; } 

 //in shader function float2 period = 6; radial_cells(position, period, false); 

ثم يمكننا أيضًا إضافة فهرس الخلايا والنسخ المتطابق ، كما فعلنا مع الخلايا العادية.

من الضروري حساب مؤشر الخلية بعد حساب الموضع الشعاعي ، ولكن قبل استلام الباقي من القسمة. نحصل عليه بتقسيم المكون x للموضع الشعاعي وتقريب النتيجة لأسفل. في هذه الحالة ، يمكن أن يكون الفهرس سالبًا ، وهذه مشكلة إذا كان عدد الخلايا غريبًا. على سبيل المثال ، مع 3 خلايا ، نحصل على خلية واحدة بمؤشر من 0 ، وخلية واحدة بمؤشر من -1 و 2 من الخلايا النصفية مع الفهارس 1 و -2. للتغلب على هذه المشكلة ، نضيف عدد الخلايا إلى المتغير المقرب لأسفل المتغير ، ثم نقسم على حجم الخلية مع الباقي.

 //in 2D_SDF.cginc float cellIndex = fmod(floor(radialPosition.x / cellSize) + cells, cells); //at the end of the function: return cellIndex; 

لعكس هذا ، نحتاج إلى أن تكون الإحداثيات بالراديان ، لذلك لتجنب إعادة حساب الإحداثيات الشعاعية خارج الوظيفة ، نضيف خيارًا لها باستخدام الوسيطة bool. عادةً ما يكون الترحيل في التظليل غير مرحب به (في حالة البناء) ، ولكن في هذه الحالة ، ستذهب جميع وحدات البكسل على الشاشة إلى نفس المسار ، لذلك هذا طبيعي.

يجب أن يحدث النسخ المتطابق بعد الإحداثي نصف الدائري ، ولكن قبل أن يتم تحويله إلى وضعه الطبيعي. سوف نكتشف ما إذا كنا بحاجة إلى قلب الخلية الحالية بتقسيم مؤشر الخلية على 2 مع الباقي ، وعادةً ما يعطينا هذا أصفارًا وأخرى ، لكن في حالتي ، تظهر عدة توائم ، وهي غريبة ، ولا يزال بإمكاننا التعامل معها. للتخلص من الثغرات ، نقوم ببساطة بطرح 1 من متغير الوجه ، ثم نأخذ القيمة المطلقة. وبالتالي ، تصبح الأصفار والقصاصات وحدات ، وتصبح الوحدات أصفارًا ، حسب حاجتنا ، بترتيب عكسي فقط.

نظرًا لأن الأصفار والأخرى بالترتيب الخاطئ ، فنحن نقوم بإجراء الاستيفاء الخطي من الإصدار رأسًا على عقب إلى الإصدار رأسًا على عقب ، وليس العكس ، كما كان من قبل. لقلب الإحداثيات ، نقوم ببساطة بطرح الموضع من حجم الخلية.

 //in 2D_SDF.cginc float radial_cells(inout float2 position, float cells, bool mirrorEverySecondCell = false){ const float PI = 3.14159; float cellSize = PI * 2 / cells; float2 radialPosition = float2(atan2(position.x, position.y), length(position)); float cellIndex = fmod(floor(radialPosition.x / cellSize) + cells, cells); radialPosition.x = fmod(fmod(radialPosition.x, cellSize) + cellSize, cellSize); if(mirrorEverySecondCell){ float flip = fmod(cellIndex, 2); flip = abs(flip-1); radialPosition.x = lerp(cellSize - radialPosition.x, radialPosition.x, flip); } sincos(radialPosition.x, position.x, position.y); position = position * radialPosition.y; return cellIndex; } 

 //in shader function float2 period = 6; radial_cells(position, period, true); 

يتمايل الفضاء

ولكن لتغيير الفضاء ليس من الضروري لتكرار ذلك. على سبيل المثال ، في البرنامج التعليمي حول الأساسيات ، قمنا بتدويره ونقله وتغيير حجمه. يمكنك أيضًا القيام بما يلي: حرك كل محور على أساس الآخر بموجة جيبية. سيؤدي ذلك إلى جعل مسافات وظيفة المسافة الموقعة أقل دقة ، ولكن حتى يتأرجح كثيرًا ، سيكون كل شيء على ما يرام.

أولاً ، نحسب حجم التغير في الموضع عن طريق قلب مكونات x و y ، ثم ضربها بتردد التذبذب. ثم نأخذ جيب من هذه القيمة ونضربها بمقدار التمايل الذي نريد إضافته. بعد ذلك ، نضيف ببساطة عامل التذبذب إلى الموضع ونطبق النتيجة مرة أخرى على الموضع.

 //in 2D_SDF.cginc void wobble(inout float2 position, float2 frequency, float2 amount){ float2 wobble = sin(position.yx * frequency) * amount; position = position + wobble; } 

 //in shader function wobble(position, 5, .05); 

يمكننا أيضًا تحريك هذا التلويح ، وتغيير موضعه ، وتطبيق التلويح في موضع الإزاحة وإعادة المساحة مرة أخرى. بحيث لا تصبح أرقام الفاصلة العائمة كبيرة جدًا ، أقوم بالتقسيم مع الباقي pi * 2 حسب التردد المتذبذب ، وهذا يرتبط بالتذبذب (الجيوب الأنفية يكرر كل وحدة pi * 2) ، لذلك نتجنب القفزات والإزاحة الكبيرة جدًا.

 //in shader function const float PI = 3.14159; float frequency = 5; float offset = _Time.y; offset = fmod(offset, PI * 2 / frequency); position = translate(position, offset); wobble(position, 5, .05); position = translate(position, -offset); 

شفرة المصدر

2D مكتبة قوات الدفاع الذاتى

• https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/036_SDF_space_manipulation/2D_SDF.cginc

 #ifndef SDF_2D #define SDF_2D //transforms float2 rotate(float2 samplePosition, float rotation){ const float PI = 3.14159; float angle = rotation * PI * 2 * -1; float sine, cosine; sincos(angle, sine, cosine); return float2(cosine * samplePosition.x + sine * samplePosition.y, cosine * samplePosition.y - sine * samplePosition.x); } float2 translate(float2 samplePosition, float2 offset){ //move samplepoint in the opposite direction that we want to move shapes in return samplePosition - offset; } float2 scale(float2 samplePosition, float scale){ return samplePosition / scale; } //combinations ///basic float merge(float shape1, float shape2){ return min(shape1, shape2); } float intersect(float shape1, float shape2){ return max(shape1, shape2); } float subtract(float base, float subtraction){ return intersect(base, -subtraction); } float interpolate(float shape1, float shape2, float amount){ return lerp(shape1, shape2, amount); } /// round float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 - radius, shape2 - radius); intersectionSpace = min(intersectionSpace, 0); float insideDistance = -length(intersectionSpace); float simpleUnion = merge(shape1, shape2); float outsideDistance = max(simpleUnion, radius); return insideDistance + outsideDistance; } float round_intersect(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 + radius, shape2 + radius); intersectionSpace = max(intersectionSpace, 0); float outsideDistance = length(intersectionSpace); float simpleIntersection = intersect(shape1, shape2); float insideDistance = min(simpleIntersection, -radius); return outsideDistance + insideDistance; } float round_subtract(float base, float subtraction, float radius){ return round_intersect(base, -subtraction, radius); } ///champfer float champfer_merge(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleMerge = merge(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer - champferSize; return merge(simpleMerge, champfer); } float champfer_intersect(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleIntersect = intersect(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer + champferSize; return intersect(simpleIntersect, champfer); } float champfer_subtract(float base, float subtraction, float champferSize){ return champfer_intersect(base, -subtraction, champferSize); } /// round border intersection float round_border(float shape1, float shape2, float radius){ float2 position = float2(shape1, shape2); float distanceFromBorderIntersection = length(position); return distanceFromBorderIntersection - radius; } float groove_border(float base, float groove, float width, float depth){ float circleBorder = abs(groove) - width; float grooveShape = subtract(circleBorder, base + depth); return subtract(base, grooveShape); } // space repetition void mirror(inout float2 position){ position.x = abs(position.x); } float2 cells(inout float2 position, float2 period){ //find cell index float2 cellIndex = position / period; cellIndex = floor(cellIndex); //negative positions lead to negative modulo position = fmod(position, period); //negative positions now have correct cell coordinates, positive input positions too high position += period; //second mod doesn't change values between 0 and period, but brings down values that are above period. position = fmod(position, period); return cellIndex; } float radial_cells(inout float2 position, float cells, bool mirrorEverySecondCell = false){ const float PI = 3.14159; float cellSize = PI * 2 / cells; float2 radialPosition = float2(atan2(position.x, position.y), length(position)); float cellIndex = fmod(floor(radialPosition.x / cellSize) + cells, cells); radialPosition.x = fmod(fmod(radialPosition.x, cellSize) + cellSize, cellSize); if(mirrorEverySecondCell){ float flip = fmod(cellIndex, 2); flip = abs(flip-1); radialPosition.x = lerp(cellSize - radialPosition.x, radialPosition.x, flip); } sincos(radialPosition.x, position.x, position.y); position = position * radialPosition.y; return cellIndex; } void wobble(inout float2 position, float2 frequency, float2 amount){ float2 wobble = sin(position.yx * frequency) * amount; position = position + wobble; } //shapes float circle(float2 samplePosition, float radius){ //get distance from center and grow it according to radius return length(samplePosition) - radius; } float rectangle(float2 samplePosition, float2 halfSize){ float2 componentWiseEdgeDistance = abs(samplePosition) - halfSize; float outsideDistance = length(max(componentWiseEdgeDistance, 0)); float insideDistance = min(max(componentWiseEdgeDistance.x, componentWiseEdgeDistance.y), 0); return outsideDistance + insideDistance; } #endif 

شادر التجريبي الأساسي

• https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/036_SDF_space_manipulation/sdf_mirror.shader
• https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/036_SDF_space_manipulation/sdf_cells.shader
• https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/036_SDF_space_manipulation/sdf_wobble.shader

 Shader "Tutorial/036_SDF_Space_Manpulation/Mirror"{ Properties{ _InsideColor("Inside Color", Color) = (.5, 0, 0, 1) _OutsideColor("Outside Color", Color) = (0, .5, 0, 1) _LineDistance("Mayor Line Distance", Range(0, 2)) = 1 _LineThickness("Mayor Line Thickness", Range(0, 0.1)) = 0.05 [IntRange]_SubLines("Lines between major lines", Range(1, 10)) = 4 _SubLineThickness("Thickness of inbetween lines", Range(0, 0.05)) = 0.01 } SubShader{ //the material is completely non-transparent and is rendered at the same time as the other opaque geometry Tags{ "RenderType"="Opaque" "Queue"="Geometry"} Pass{ CGPROGRAM #include "UnityCG.cginc" #include "2D_SDF.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; v2f vert(appdata v){ v2f o; //calculate the position in clip space to render the object o.position = UnityObjectToClipPos(v.vertex); //calculate world position of vertex o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { // modify position here! float2 squarePosition = position; squarePosition = translate(squarePosition, float2(2, 2)); squarePosition = rotate(squarePosition, .125); float squareShape = rectangle(squarePosition, float2(1, 1)); float2 circlePosition = position; circlePosition = translate(circlePosition, float2(1, 1.5)); float circleShape = circle(circlePosition, 1); float combination = merge(circleShape, squareShape); return combination; } float4 _InsideColor; float4 _OutsideColor; float _LineDistance; float _LineThickness; float _SubLines; float _SubLineThickness; fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = lerp(_InsideColor, _OutsideColor, step(0, dist)); float distanceChange = fwidth(dist) * 0.5; float majorLineDistance = abs(frac(dist / _LineDistance + 0.5) - 0.5) * _LineDistance; float majorLines = smoothstep(_LineThickness - distanceChange, _LineThickness + distanceChange, majorLineDistance); float distanceBetweenSubLines = _LineDistance / _SubLines; float subLineDistance = abs(frac(dist / distanceBetweenSubLines + 0.5) - 0.5) * distanceBetweenSubLines; float subLines = smoothstep(_SubLineThickness - distanceChange, _SubLineThickness + distanceChange, subLineDistance); return col * majorLines * subLines; } ENDCG } } FallBack "Standard" //fallback adds a shadow pass so we get shadows on other objects } 

الآن أنت تعرف كل أساسيات وظائف مسافة الإشارة التي يمكن أن أتذكرها. في البرنامج التعليمي التالي ، سأحاول القيام بشيء مثير للاهتمام معهم.