天天看点
返回

Opengl ES系列学习--3D大海

     今天又发现一些非常赞的Opengl学习网站：Shadertoy、twinklingstar，看到这些资源，真是相见恨晚啊，里面的东西真是太赞了，上一幅图大家就知道了。

Opengl ES系列学习--3D大海

     怎么样？我第一眼看到这样的效果，真是被震惊到了，我操，这是什么操作，居然还能搞出来这样的效果，我的十个大拇指不由得想伸出来表达一下内心的赞，然而看看该效果的实现代码，我的内心再次崩溃，这个效果完全是由shader实现的！

     Java代码是GlSeaRender类，完整源码如下：

package com.opengl.learn.aric;

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

import com.opengl.learn.OpenGLUtils;
import com.opengl.learn.R;
import com.opengl.learn.aric.material.MaterialCube;
import com.opengl.learn.aric.material.MaterialLight;

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

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

import static android.opengl.GLES20.GL_ARRAY_BUFFER;
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;
import static android.opengl.GLES20.GL_FLOAT;
import static android.opengl.GLES20.GL_STATIC_DRAW;
import static android.opengl.GLES20.GL_TEXTURE0;
import static android.opengl.GLES20.GL_TEXTURE1;
import static android.opengl.GLES20.GL_TEXTURE_2D;
import static android.opengl.GLES20.GL_TRIANGLES;
import static android.opengl.GLES20.glGenBuffers;
import static android.opengl.GLES20.glGetUniformLocation;

public class GlSeaRender implements GLSurfaceView.Renderer {
    private static final String TAG = GlSeaRender.class.getSimpleName();
    private final float[] mVerticesData =
            {
                    -1.0f, 1.0f, 0.0f,
                    -1.0f, -1.0f, 0.0f,
                    1.0f, -1.0f, 0.0f,

                    1.0f, -1.0f, 0.0f,
                    1.0f, 1.0f, 0.0f,
                    -1.0f, 1.0f, 0.0f,
            };

    private static final int BYTES_PER_FLOAT = 4;
    private static final int POSITION_COMPONENT_COUNT = 3;
    private Context mContext;
    private FloatBuffer mVerticesBuffer;
    private int mProgramObject, mVAO, mVBO, uTime, uResolution;
    private int mWidth, mHeight;
    private long startTime;

    public GlSeaRender(Context context) {
        mContext = context;
        mVerticesBuffer = ByteBuffer.allocateDirect(mVerticesData.length * BYTES_PER_FLOAT)
                .order(ByteOrder.nativeOrder()).asFloatBuffer();
        mVerticesBuffer.put(mVerticesData).position(0);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        mProgramObject = OpenGLUtils.loadProgram(mContext, R.raw.glsea_vertex, R.raw.glsea_fragment);
        uTime = glGetUniformLocation(mProgramObject, "uTime");
        uResolution = glGetUniformLocation(mProgramObject, "uResolution");

        int[] array = new int[1];
        GLES32.glGenVertexArrays(array.length, array, 0);
        mVAO = array[0];
        array = new int[1];
        glGenBuffers(array.length, array, 0);
        mVBO = array[0];
        Log.e(TAG, "onSurfaceCreated, " + mProgramObject + ", uTime: " + uTime + ", uResolution: " + uResolution);

        GLES32.glBindVertexArray(mVAO);

        mVerticesBuffer.position(0);
        GLES32.glBindBuffer(GL_ARRAY_BUFFER, mVBO);
        GLES32.glBufferData(GL_ARRAY_BUFFER, BYTES_PER_FLOAT * mVerticesData.length, mVerticesBuffer, GL_STATIC_DRAW);
        GLES32.glVertexAttribPointer(0, POSITION_COMPONENT_COUNT, GL_FLOAT, false, 0, 0);
        GLES32.glEnableVertexAttribArray(0);
    }

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

    @Override
    public void onDrawFrame(GL10 gl) {
        long now = System.currentTimeMillis();

        if (startTime == 0) {
            startTime = now;
        }

        float time = (now - startTime) / (1000f * 5f);

        GLES32.glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        GLES32.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
        GLES32.glEnable(GL_DEPTH_TEST);

        GLES32.glUseProgram(mProgramObject);
        GLES32.glUniform1f(uTime, time);
        GLES32.glUniform2f(uResolution, mWidth, mHeight);

        GLES32.glEnableVertexAttribArray(0);
        GLES32.glBindVertexArray(mVAO);
        GLES32.glDrawArrays(GL_TRIANGLES, 0, mVerticesData.length);

        GLES32.glBindVertexArray(0);
        GLES32.glDisableVertexAttribArray(0);
    }
}

     很简单，就是六个点，绘制了两个三解形，拼起来成为一个矩形而已，里边的逻辑现在对我们来说已经非常基础了，大家如果还有疑问，请往前翻，复习一下以前的章节。

     顶点着色器源码如下：

#version 320 es
layout(location = 0) in vec3 aPosition;

void main()
{
    gl_Position = vec4(aPosition, 1.0);
}

     也是超级简单，再来看片段着色器，源码如下：

/*
 * "Seascape" by Alexander Alekseev aka TDM - 2014
 * License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
 * Contact: [email protected]
 */
#version 320 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

out vec4 FragColor;
uniform float uTime;
uniform vec2 uResolution;

const int NUM_STEPS = 8;
const float PI      = 3.141592;
const float EPSILON = 1e-3;
#define EPSILON_NRM (0.1 / uResolution.x)

// sea
const int ITER_GEOMETRY = 3;
const int ITER_FRAGMENT = 5;
const float SEA_HEIGHT = 0.6;
const float SEA_CHOPPY = 4.0;
const float SEA_SPEED = 0.8;
const float SEA_FREQ = 0.16;
const vec3 SEA_BASE = vec3(0.1, 0.19, 0.22);
const vec3 SEA_WATER_COLOR = vec3(0.8, 0.9, 0.6);
#define SEA_TIME (1.0 + uTime * SEA_SPEED)
const mat2 octave_m = mat2(1.6, 1.2, -1.2, 1.6);

// math
mat3 fromEuler(vec3 ang) {
    vec2 a1 = vec2(sin(ang.x), cos(ang.x));
    vec2 a2 = vec2(sin(ang.y), cos(ang.y));
    vec2 a3 = vec2(sin(ang.z), cos(ang.z));
    mat3 m;
    m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x, a1.y*a2.x*a3.x+a3.y*a1.x, -a2.y*a3.x);
    m[1] = vec3(-a2.y*a1.x, a1.y*a2.y, a2.x);
    m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x, a1.x*a3.x-a1.y*a3.y*a2.x, a2.y*a3.y);
    return m;
}

float hash(vec2 p) {
    float h = dot(p, vec2(127.1, 311.7));
    return fract(sin(h)*43758.5453123);
}

float noise(in vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    vec2 u = f*f*(3.0-2.0*f);
    return -1.0+2.0*mix(mix(hash(i + vec2(0.0, 0.0)),
    hash(i + vec2(1.0, 0.0)), u.x),
    mix(hash(i + vec2(0.0, 1.0)),
    hash(i + vec2(1.0, 1.0)), u.x), u.y);
}

// lighting
float diffuse(vec3 n, vec3 l, float p) {
    return pow(dot(n, l) * 0.4 + 0.6, p);
}

float specular(vec3 n, vec3 l, vec3 e, float s) {
    float nrm = (s + 8.0) / (PI * 8.0);
    return pow(max(dot(reflect(e, n), l), 0.0), s) * nrm;
}

// sky
vec3 getSkyColor(vec3 e) {
    e.y = max(e.y, 0.0);
    return vec3(pow(1.0-e.y, 2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4);
}

// sea
float sea_octave(vec2 uv, float choppy) {
    uv += noise(uv);
    vec2 wv = 1.0-abs(sin(uv));
    vec2 swv = abs(cos(uv));
    wv = mix(wv, swv, wv);
    return pow(1.0-pow(wv.x * wv.y, 0.65), choppy);
}

float map(vec3 p) {
    float freq = SEA_FREQ;
    float amp = SEA_HEIGHT;
    float choppy = SEA_CHOPPY;
    vec2 uv = p.xz; uv.x *= 0.75;

    float d, h = 0.0;
    for (int i = 0; i < ITER_GEOMETRY; i++) {
        d = sea_octave((uv+SEA_TIME)*freq, choppy);
        d += sea_octave((uv-SEA_TIME)*freq, choppy);
        h += d * amp;
        uv *= octave_m; freq *= 1.9; amp *= 0.22;
        choppy = mix(choppy, 1.0, 0.2);
    }
    return p.y - h;
}

float map_detailed(vec3 p) {
    float freq = SEA_FREQ;
    float amp = SEA_HEIGHT;
    float choppy = SEA_CHOPPY;
    vec2 uv = p.xz; uv.x *= 0.75;

    float d, h = 0.0;
    for (int i = 0; i < ITER_FRAGMENT; i++) {
        d = sea_octave((uv+SEA_TIME)*freq, choppy);
        d += sea_octave((uv-SEA_TIME)*freq, choppy);
        h += d * amp;
        uv *= octave_m; freq *= 1.9; amp *= 0.22;
        choppy = mix(choppy, 1.0, 0.2);
    }
    return p.y - h;
}

vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
    float fresnel = clamp(1.0 - dot(n, -eye), 0.0, 1.0);
    fresnel = pow(fresnel, 3.0) * 0.65;

    vec3 reflected = getSkyColor(reflect(eye, n));
    vec3 refracted = SEA_BASE + diffuse(n, l, 80.0) * SEA_WATER_COLOR * 0.12;

    vec3 color = mix(refracted, reflected, fresnel);

    float atten = max(1.0 - dot(dist, dist) * 0.001, 0.0);
    color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;

    color += vec3(specular(n, l, eye, 60.0));

    return color;
}

// tracing
vec3 getNormal(vec3 p, float eps) {
    vec3 n;
    n.y = map_detailed(p);
    n.x = map_detailed(vec3(p.x+eps, p.y, p.z)) - n.y;
    n.z = map_detailed(vec3(p.x, p.y, p.z+eps)) - n.y;
    n.y = eps;
    return normalize(n);
}

float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
    float tm = 0.0;
    float tx = 1000.0;
    float hx = map(ori + dir * tx);
    if (hx > 0.0) return tx;
    float hm = map(ori + dir * tm);
    float tmid = 0.0;
    for (int i = 0; i < NUM_STEPS; i++) {
        tmid = mix(tm, tx, hm/(hm-hx));
        p = ori + dir * tmid;
        float hmid = map(p);
        if (hmid < 0.0) {
            tx = tmid;
            hx = hmid;
        } else {
            tm = tmid;
            hm = hmid;
        }
    }
    return tmid;
}

// main
void main(void) {
    vec2 uv = gl_FragCoord.xy / uResolution.xy;
    uv = uv * 2.0 - 1.0;
    uv.x *= uResolution.x / uResolution.y;
    float ttime = uTime * 0.3 + uResolution.x*0.01;

    // ray
    vec3 ang = vec3(sin(ttime*3.0)*0.1, sin(ttime)*0.2+0.3, ttime);
    vec3 ori = vec3(0.0, 3.5, ttime*5.0);
    vec3 dir = normalize(vec3(uv.xy, -2.0)); dir.z += length(uv) * 0.15;
    dir = normalize(dir) * fromEuler(ang);

    // tracing
    vec3 p;
    heightMapTracing(ori, dir, p);
    vec3 dist = p - ori;
    vec3 n = getNormal(p, dot(dist, dist) * EPSILON_NRM);
    vec3 light = normalize(vec3(0.0, 1.0, 0.8));

    // color
    vec3 color = mix(
    getSkyColor(dir),
    getSeaColor(p, n, light, dir, dist),
    pow(smoothstep(0.0, -0.05, dir.y), 0.3));

    // post
    FragColor = vec4(pow(color, vec3(0.75)), 1.0);
}

     这里就是最牛逼的地方了，不过现在还没搞懂里边的逻辑运算，这些逻辑运算也是效果实现的精华，后面我们慢慢啃，必须要把这些逻辑运算搞清楚，我们才能说学习了这个大海效果的实现，否则我们只是使用别人的东西，别人的还是别人的。

     Shadertoy网站上有太多太多精典的资源了，我们以后可以慢慢研究，也可以把它用在我们在实际工作中。

Android源码解析 opengl es openGL shader java android
上一篇: Opengl ES系列学习--变换
下一篇: Opengl ES系列学习--glActiveTexture API使用

继续阅读