目錄
- 實踐(環境光、漫反射光、鏡面反射光)
- 資料
- 收穫
上一篇我們學習實踐了關照基礎的基本概念和立方體的實現。有不清楚的可以先進行回看。
這篇我們來光照基礎的具體實踐
一、光照基礎實踐
原始立方體效果
1.1、環境光(Ambient Lightiing)
//頂點着色器
uniform vec3 lightColor;
void main()
{
...
// 環境光
//光照強度
float ambientStrength = 0.3;
ambient = ambientStrength * lightColor;
...
}
//片源着色器
varying vec3 ambient;
void main()
{
vec4 color = texture2D(uTexture, v_texCoord);
vec3 finalColor = ambient * vec3(color);
gl_FragColor = min(vec4(finalColor, color.a),vec4(1.0));
}
在Render中傳入lightcolor即可
GLES20.glEnableVertexAttribArray(ulightcolorLoc)
//環境光,xyz座標上的值
GLES20.glUniform3f(ulightcolorLoc,1.0f,1.0f,1.0f)
加入環境光後效果如下
1.2 漫反射光(Diffuse Lighting)
//頂點的法向量
attribute vec3 aNormal;
//模型矩陣
uniform mat4 uModelMatrix;
//光源位置
uniform vec3 lightPos;
void main()
{
...
// 漫反射
float diffuseStrength = 0.8;
//頂點的單位法線
vec3 unitNormal = normalize(vec3(uModelMatrix * vec4(aNormal, 1.0)));
//從頂點到光源的單位向量
vec3 lightDir = normalize(lightPos - fragPos);
//上面來兩個向量進行點乘
float diff = max(dot(unitNormal, lightDir), 0.0);
diffuse = diffuseStrength * diff * lightColor;
...
}
Render中修改如下
//設置每個頂點的法向量
GLES20.glEnableVertexAttribArray(aNormalCoorLoc)
cubeLight.vertexArrayBuffer.position(CubeLight.POSITION_COMPONENT_COUNT+CubeLight.POSITION_TEXTURE_COUNT)
GLES20.glVertexAttribPointer(aNormalCoorLoc,CubeLight.POSITION_NORMAL_COUNT,GLES20.GL_FLOAT,false,CubeLight.STRIDE, cubeLight.vertexArrayBuffer)
//設置光照點
GLES20.glEnableVertexAttribArray(ulightPosLoc)
GLES20.glUniform3f(ulightPosLoc,3.0f,0.0f,1.0f)
頂點數據在上一篇的基礎上加入法向量
val vertexData = floatArrayOf(
//position //texture coord //normal
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f,
0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.0f, -1.0f,
0.5f, 0.5f, -0.5f, 1.0f, 1.0f, 0.0f, 0.0f, -1.0f,
0.5f, 0.5f, -0.5f, 1.0f, 1.0f, 0.0f, 0.0f, -1.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, -1.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
0.5f, 0.5f, 0.5f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f,
0.5f, 0.5f, 0.5f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f,
-0.5f, 0.5f, 0.5f, 1.0f, 0.0f, -1.0f, 0.0f, 0.0f,
-0.5f, 0.5f, -0.5f, 1.0f, 1.0f, -1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 1.0f, -1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 1.0f, -1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 0.0f,
-0.5f, 0.5f, 0.5f, 1.0f, 0.0f, -1.0f, 0.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, 0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 1.0f, 0.0f, -1.0f, 0.0f,
0.5f, -0.5f, -0.5f, 1.0f, 1.0f, 0.0f, -1.0f, 0.0f,
0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, -1.0f, 0.0f,
0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, -1.0f, 0.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 0.0f, -1.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 1.0f, 0.0f, -1.0f, 0.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, -0.5f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f
)
環境光+漫反射光後效果如下
我們設置的光源位置在x軸的正3和y軸的正1位置,所以看到的立方體右側的平面會有光照效果,而其他面影響很小。
1.3、鏡面反射光(Specular Lighting)
//頂點着色器代碼添加鏡面反射
//鏡面反射
float specularStrength = 0.9;
//視角和頂點的單位向量
vec3 viewDir = normalize(viewPos - fragPos);
//調用reflect反射內置函數
vec3 reflectDir = reflect(-lightDir, unitNormal);
float spec = pow(max(dot(unitNormal, reflectDir), 0.0), 16.0);
specular = specularStrength * spec * lightColor;
//設置光照點
GLES20.glEnableVertexAttribArray(ulightPosLoc)
GLES20.glUniform3f(ulightPosLoc,3.0f,0.0f,2.0f)
//設置鏡面反射 視點位置
GLES20.glEnableVertexAttribArray(uViewPosLoc)
GLES20.glUniform3f(uViewPosLoc,-1.0f, 0.0f, 3.0f)
環境光+鏡面反射光後效果如下
最後看下 三種光照同時作用於立方體的效果
完整代碼已上傳至 github https://github.com/ayyb1988/mediajourney
二、資料
《OpenGL編程指南》
基礎光照
探究OpenGL光照模型的着色器實現
OpenGL_ES-光照(光照基礎,漫反射,鏡面反射)
NDK OpenGL ES 3.0 開發(九):光照基礎
OPENGL ES 案例03:COREANIMATION繪製立方體+旋轉
三、收穫
在上一篇的基礎上,實踐環境光、漫反射、鏡面反射
感謝你的閱讀
下一篇我們學習實踐流體,歡迎關注公衆號“音視頻開發之旅”,一起學習成長。
歡迎交流