cocos cretor shader effect-the book of shader-1.造型函数

最新推荐文章于 2022-10-30 16:27:20 发布

原创

最新推荐文章于 2022-10-30 16:27:20 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#shader #opengl #cocos-creator

本文深入探讨了Shader编程的基础知识，包括造型函数、线性插值、数学函数的应用等，并通过实例展示了如何利用GLSL中的原生函数如pow(), exp(), sin()等进行数据处理和效果制作。

Shaping functions（造型函数）

书本原链接：造型函数

这一章应该叫做宫城先生的粉刷课（来自电影龙威小子的经典桥段）。之前我们把规范化后的 x,y 坐标映射（map）到了红色和绿色通道。本质上说我们是建造了这样一个函数：输入一个二维向量（x，y)，然后返回一个四维向量（r，g，b，a）。但在我们跨维度转换数据之前，我们先从更加…更加简单的开始。我们来建一个只有一维变量的函数。你花越多的时间和精力在这上面，你的 shader 功夫就越厉害。

(img-Gz7nmg4s-1612272112059)(img/3/3-1.jpg)]

接下来的代码结构就是我们的基本功。在它之中我们对规范化的 x 坐标（st.x）进行可视化。有两种途径：一种是用亮度（度量从黑色到白色的渐变过程），另一种是在顶层绘制一条绿色的线（在这种情况下 x 被直接赋值给 y）。不用过分在意绘制函数，我们马上会更加详细地解释它

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st) {
   
       
    return smoothstep(0.02, 0.0, abs(st.y - st.x));
}

void main() {
   
   
	vec2 st = gl_FragCoord.xy/u_resolution;
    float y = st.x;
    vec3 color = vec3(y);
    // Plot a line
    float pct = plot(st);
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
	gl_FragColor = vec4(color,1.0);
}

简注：vec3 类型构造器“明白”你想要把一个值赋值到颜色的三个通道里，就像 vec4 明白你想要构建一个四维向量，三维向量加上第四个值（比如颜色的三个值加上透明度）。

这些代码就是你的基本功；遵守和理解它非常重要。你将会一遍又一遍地回到 0.0 到 1.0 这个区间。你将会掌握融合与构建这些代码的艺术。

在cocos上实现本书中的shader代码

PS：本教程所有cocosCreator版本是2.4.3

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  

CCEffect %{
   
   
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: {
   
    value: white }
        alphaThreshold: {
   
    value: 0.5 }
}%


CCProgram vs %{
   
   
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  void main () {
   
   
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;

    gl_Position = pos;
  }
}%


CCProgram fs %{
   
   
  precision highp float;
  
  #include <alpha-test>
  #include <texture>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  float plot(vec2 st) {
   
       
    return smoothstep(0.02, 0.0, abs(st.y - st.x));
  }

  void main () {
   
   
    vec4 o = vec4(1

最低0.47元/天解锁文章