標籤:

Instagram 是用什麼語言編寫的?為什麼它的圖片濾鏡效果那麼出眾?

貌似國內還沒有一家企業能夠與之匹敵吧


Instagram的那幫人是真心熱愛攝影,為了達到某種藝術效果他們會進行大量嘗試(Quora上有類似的問題和答案),而國內的這些App開發者只把這個當作一個Feature,僅從技術出發很難達到接近真實的攝影效果。

他們如何從藝術角度去設計濾鏡不太清楚,這裡只能從技術角度說一下原理 =.=

實時濾鏡需要對每一幀圖像進行計算,所以 直接用CPU計算或是CoreImage框架有時會達不到需要的速度。Instagram是用OpenGL ES2.0實現的,可以參考現在很火的GPUImage。把從攝像頭取到的每一幀數據作為Texture傳入OpenGL,渲染後從緩衝區取出渲染好的數據。

濾鏡效果關鍵在Shader,Shader是運行時編譯的,所以這肯定是以靜態字元串的形式存在程序中。感興趣的話,你可以直接用文本編輯器打開Instagram的二進位文件,看到它的shader是怎麼寫的,甚至可以直接作出一樣的效果。

諸如Camera360這樣的App原理也是一樣的。


下面是Instagram里的某個比較簡單的濾鏡的fragment shader,可以參考一下。這些濾鏡並不是調整幾個參數或曲線就能完成的。
precision highp float;
varying vec2 textureCoordinate;
varying vec2 videoCoordinate;
uniform sampler2D picture;
uniform sampler2D cdf;
uniform bool starlightIsEnabled;
uniform float starlightAlphaBlending;
vec4 applyStarlight(vec4 color) {
return color;
}
uniform sampler2D map;
uniform sampler2D gradientMap;

mat3 saturateMatrix = mat3(
1.1402,-0.0598,-0.061,
-0.1174,1.0826,-0.1186,
-0.0228,-0.0228,1.1772);
vec3 lumaCoeffs = vec3(.3, .59, .11);
vec4 filter(vec4 color) {
vec3 texel = color.rgb;

texel = vec3(
texture2D(map, vec2(texel.r, .1666666)).r,
texture2D(map, vec2(texel.g, .5)).g,
texture2D(map, vec2(texel.b, .8333333)).b
);

texel = saturateMatrix * texel;
float luma = dot(lumaCoeffs, texel);
texel = vec3(
texture2D(gradientMap, vec2(luma, texel.r)).r,
texture2D(gradientMap, vec2(luma, texel.g)).g,
texture2D(gradientMap, vec2(luma, texel.b)).b);

return vec4(texel, 1.0);
}
void main()
{
vec4 color = texture2D(picture, videoCoordinate);
if (starlightIsEnabled) {
color = applyStarlight(color);
}
color = filter(color);
color.a = starlightAlphaBlending;
gl_FragColor = color;
}


答不好瞎答。
我們的團隊也就iOS設備上的圖片處理做過研究。
方式無外乎兩種:
1、對每個像素進行計算。
2、用有效果的png圖片當遮罩。
instagram用的也就是這兩種方式。但真是不得不佩服,instagram的程序員太懂藝術,或是設計工程師太會用技術的方式描述。只有把這兩點都深入理解,才能判斷出在什麼情況下使用哪種方式是最恰當的。

至今,在一鍵處理上,我覺得都沒有應用能和instagram匹敵。尤其是在風光照片的處理上,不失細節的恰當渲染,太難得了。


iPhone版的開發肯定是基於iOS 原生SDK開發即objective-c語言。

其實時濾鏡部分的效果可以用原生框架:CoreImage來實現,這一點在2012年的wwdc蘋果開發者大會上提到過,因此不需要任何其他的第三方框架。個人鏈接:http://blog.csdn.net/paopaohuang/article/details/7985553

coreImage是iOS5開始支持的一個非常簡單易用且高效的基於OpenGLES2.0的框架,當然使用的是GPU。其中附帶了很多非常簡單易用的濾鏡對象:CIFilter,只需要調節其參數即可改變其濾鏡效果。
iOS5支持49個,iOS6支持93個.,很多都可以任意疊加。

還有很多CIFIlter濾鏡編輯器,調節對應參數滑動條就可以非常直觀的看到調整參數後的產出效果。這個調配濾鏡的過程完全可以由專業的美術人員來參與,instagramiOS版的實時濾鏡選配過程應該大致如此。


iPhone版用的應該是Object-C,實現可以參見Core Image相關內容
Android版用的應該是C配合Java來實現圖片過濾的,實現可以去Github上找,我記得有個開源項目就是關於這個的
不過就像@狼大人 說的那樣,圖片濾鏡這個東西都是死的,真正讓Instagram效果突出的還是他們對於濾鏡的參數設置


曲線+圖層,OpenGL,大家都一樣


濾鏡效果好還是不好,和「用什麼語言編寫的」有啥關係?


雖然不是用VB寫的但是我建議你看一下VB4.0時代的《Visual Basic 高級圖形程序設計教程》,一本深入淺出的圖形/圖像學入門好讀物,可以學到很多知識。


一個人在戰鬥:被蘋果收購的 SnappyCam 背後,是他
這是一個相關的報道。當然,相關性比較低。


推薦閱讀:

如何評價 Instagram 的新產品 Layout from Instagram?
Instagram 的內容監管機制是什麼樣的?
Instagram 上有哪些類似 Time 的官方賬號?
如何在線下結識instagram里的用戶?
誰最適合做中國的 Instagram ?

TAG:Instagram |