वर्दी ग्रे एक तटस्थ विस्थापन मैप क्यों नहीं है?

Question

मैं एक विशिष्ट feDisplacementMap उत्पन्न करने और दुर्भाग्य से विफल होने की कोशिश कर रहा हूं। मेरा मानना ​​है कि ऐसा इसलिए है क्योंकि मेरे पास तंत्र की मौलिक गलतफहमी है। एसवीजी 1.1 कल्पना का कहना है:

इस फिल्टर आदिम 'in2' से छवि से पिक्सल मूल्यों का उपयोग करता स्थानिक 'में' से छवि विस्थापित करने के लिए। यह परिवर्तन करने के लिए परिवर्तन है:

पी '(एक्स, वाई) < - पी (एक्स + स्केल * (एक्ससी (एक्स, वाई) - .5), वाई + स्केल * (वाईसी (एक्स, वाई) - .5)) जहां पी (एक्स, वाई) इनपुट छवि है, 'इन', और पी '(एक्स, वाई) गंतव्य है। एक्ससी (एक्स, वाई) और वाईसी (एक्स, वाई) xChannelSelector और yChannelSelector द्वारा नामित चैनल के घटक मान हैं। उदाहरण के लिए, x में विस्थापन को नियंत्रित करने के लिए x2 और जी घटक में विस्थापन को नियंत्रित करने के लिए 'इन 2' के आर घटक का उपयोग करने के लिए, xChannelSelector को "R" और yChannelSelector "G" पर सेट करें।

मेरी पढ़ाई से, इसका मतलब है कि एक तटस्थ ग्रे छवि का कोई शुद्ध पिक्सेल आंदोलन नहीं होना चाहिए। स्केल = 50 के साथ फ़िल्टर में उर्फ, 100,100 पर पिक्सेल को अपना नया मान (100 + 50 * (0.5 - 0.5), 100 + 50 * (0.5-0.5)) = 100,100 से प्राप्त होना चाहिए। हालांकि जब मैं एक ग्रेस्केल की कोशिश करता हूं, तो यह मैपिंग पिक्सल को ऊपर और स्रोत छवि के बाईं ओर मैप कर रहा है।

<svg width="800px" height="600px" > 
 
    
 
    <defs> 
 
    <g id="displacerect"> 
 
    <rect x="50" y="50" width="300" height="300" fill="rgb(127, 127, 127)"/> 
 
    <rect x="90" y="90" width="50" height="50" fill="red"> 
 
     </rect> 
 
    </g> 
 
    
 
    
 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" stop-color="rgb(255,255,0)" stop-opacity="1" /> 
 
     <stop offset="100%"stop-color="rgb(255,0,0)" stop-opacity="1" /> 
 
    </linearGradient> 
 
    
 
    <filter id="displaceME" x="0%" y="0%" width="100%" height="100%"> 
 
    <feImage xlink:href="#displacerect" result="displaceImage"/> 
 
    <feDisplacementMap scale="125" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="displaceImage"/> 
 

 
    
 
    </filter> 
 
    
 
    </defs> 
 
    
 
    <g filter="url(#displaceME)"> 
 
    <rect x="50" y="50" width="300" height="300" fill="url(#grad1)"/> 
 
    </g> 
 
    
 
    <use xlink:href="#displacerect" x="400"/> 
 
    
 
    
 
    
 
</svg>

अन्य सूत्रों के अनुसार: वास्तविक तटस्थ विस्थापन मानचित्र इस छवि को होना चाहिए:

Answer 1

ऐसा लगता है कि ब्राउज़र इसके लिए spec का पालन नहीं करते हैं, और विस्थापन की गणना में फ़ोटोशॉप के व्यवहार को डुप्लिकेट करते हैं।

Answer 2

मैं अपने उदाहरण में कम से कम एक बग देख सकते हैं।

अपने <feDisplacementMap> में आप in2="displacerect" के साथ अपनी विस्थापन छवि (in2) का संदर्भ दे रहे हैं। लेकिन उस परिणाम मूल्य के साथ कोई फ़िल्टर आदिम नहीं है। मेरा मानना ​​है कि आपका मतलब in2="displaceImage" है?

Answer 3

मुझे एक ही समस्या थी। मेरी स्रोत छवि और मेरी विस्थापन मानचित्र छवि एक ही आकार थी, इसलिए ऊपर दिखाए गए "तटस्थ" विस्थापन छवि संभवतः सही नहीं हो सकती थी। यह होना चाहिए कि शून्य चैनल के लिए लाल चैनल और हरे रंग के चैनल में छवि के समान स्थिर मूल्य थे। मुझे समझ में नहीं आया कि मुझे 128 की बजाय शून्य पिक्सल शिफ्ट के लिए 188 का उपयोग क्यों करना था जैसा कि आप उम्मीद करेंगे। http://www.tapper-ware.net/blog/?p=39 पर ब्लॉग निम्नलिखित संकेत है कि मेरे लिए समस्या हल की पेशकश की:

color-interpolation-filters="sRGB" 

लेखक का svg कोड स्निपेट था:

<svg:filter 
id="myFilterId" 
color-interpolation-filters="sRGB" 
filterUnits="userSpaceOnUse" 
x="0" y="0" width="768" height="512"> 
</svg:filter> 

रंग स्थान को निर्दिष्ट करने के बाद sRGB होने के लिए यह सब मैं के रूप में काम करना शुरू किया अपेक्षित होना।