Opengl ES系列学习--颜色

最新推荐文章于 2023-12-23 16:49:51 发布

红-旺永福

最新推荐文章于 2023-12-23 16:49:51 发布

阅读量455

点赞数

分类专栏： Opengl ES Android源码解析文章标签： android opengl shader

本文链接：https://blog.csdn.net/sinat_22657459/article/details/108066988

版权

本篇博客探讨了OpenGL ES中的颜色计算和光源应用。通过理解物体颜色和光源颜色的乘法原理，实现了在黑夜中，橙色光源照亮橙色立方体的效果。博客详细介绍了ColorCube和ColorLight类的设计，以及顶点着色器和片段着色器的实现，强调了将物理定理和前人经验应用于实践的重要性。

摘要由CSDN通过智能技术生成

本节我们来学习一下颜色的知识，在看完原作者讲解的颜色的知识的基础上，只要我们理解了，应该就能提取出重点，其实本节的重点就是下面这一句话。

所以我们要作的就是计算出物体颜色和光源颜色，然后把它们两个相乘，得到的就是目标颜色了。只有清晰的明确了目标，知道我们要干什么，这样效率才能更高，不至于被方向搞乱。本节我们实现的效果如下：

我们是仿照作者的实现，加了一个橙色的光源，而且在上一节的基础上，继续使用所有的纹理，作者是先去掉，后面的章节又加上的，我们索性就直接使用了。可以看到黑夜中，一个橙色的光源发出的光照射着这十个立方体，立方体本身都被照成了橙色。

本节因为要画立方体和光源，两个属性不同，所以我们就把它们的着色器全部独立分开了；针对功能实现的不同，我们也把立方体抽取为ColorCube类，把光源抽取为ColorLight类，各自处理各自的逻辑，互不影响，这样即使出问题，也更容易查找分析。

因为我们把功能抽取出来之后，Render渲染类倒时简单了多很，GlColorRender类非常简单，完整源码如下：

package com.opengl.learn.aric.color;

import android.content.Context;
import android.opengl.GLES32;
import android.opengl.GLSurfaceView;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import static android.opengl.GLES20.GL_COLOR_BUFFER_BIT;
import static android.opengl.GLES20.GL_DEPTH_BUFFER_BIT;
import static android.opengl.GLES20.GL_DEPTH_TEST;

public class GlColorRender implements GLSurfaceView.Renderer {
    private static final String TAG = GlColorRender.class.getSimpleName();
    private Context mContext;
    private int mWidth, mHeight;
    private ColorCube mCube;
    private ColorLight mLight;

    public GlColorRender(Context context) {
        mContext = context;
        mCube = new ColorCube(mContext);
        mLight = new ColorLight(mContext);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        mCube.onSurfaceCreated();
        mLight.onSurfaceCreated();
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        mWidth = width;
        mHeight = height;
        mCube.onSurfaceChanged(gl, width, height);
        mLight.onSurfaceChanged(gl, width, height);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        GLES32.glViewport(0, 0, mWidth, mHeight);
        GLES32.glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        GLES32.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
        GLES32.glEnable(GL_DEPTH_TEST);

        mCube.onDrawFrame();
        mLight.onDrawFrame();
    }
}

对象封装后，Render类的功能就非常清晰了，它只提供绘制的流程，具体的绘制功能由每个封装类自己实现，它当中也没有什么特殊的逻辑，我们就不再说明了。

接下来我们看一下ColorLight，完整源码如下：

package com.opengl.learn.aric.color;

import android.content.Context;
import android.opengl.GLES32;
import android.opengl.Matrix;

import com.opengl.learn.OpenGLUtils;
import com.opengl.learn.R;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import javax.microedition.khronos.opengles.GL10;

import static android.opengl.GLES20.GL_ARRAY_BUFFER;
import static android.opengl.GLES20.GL_FLOAT;
import static android.opengl.GLES20.GL_STATIC_DRAW;
import static android.opengl.GLES20.GL_TRIANGLES;
import static android.opengl.GLES20.glGenBuffers;
import static android.opengl.GLES20.glGetUniformLocation;

public class ColorLight {
    private final float[] mVerticesData =
            {
                    // back face
                    0.5f, 0.5f, -0.5f,     // (5) Top-right far
                    0.5f, -0.5f, -0.5f,      // (7) Bottom-right far
                    -0.5f, -0.5f, -0.5f,     // (6) Bottom-left far
                    -0.5f, -0.5f, -0.5f,     // (6) Bottom-left far
                    -0.5f, 0.5f, -0.5f,     // (4) Top-left far
                    0.5f, 0.5f, -0.5f,     // (5) Top-right far

                    // front face
                    -0.5f, 0.5f, 0.5f,     // (0) Top-left near
                    -0.5f, -0.5f, 0.5f,     // (2) Bottom-left near
                    0.5f, -0.5f, 0.5f,     // (3) Bottom-right near
                    0.5f, -0.5f, 0.5f,     // (3) Bottom-right near
                    0.5f, 0.5f, 0.5f,     // (1) Top-right near
                    -0.5f, 0.5f, 0.5f,     // (0) Top-left near

                    // left face
                    -0.5f, 0.5f, -0.5f,     // (4) Top-left far
                    -0.5f, -0.5f, -0.5f,     // (6) Bottom-left far
                    -0.5f, -0.5f, 0.5f,     // (2) Bottom-left near
                    -0.5f, -0.5f, 0.5f,     // (2) Bottom-left near
                    -0.5f, 0.5f, 0.5f,     // (0) Top-left near
                    -0.5f, 0.5f, -0.5f