着色器第一章
系列引用
系列demo代码来自:
书籍《the book of shaders》
https://thebookofshaders.com/
客户端:CocosCreator2.3.2
https://www.cocos.com/creator
代码来源和实现方式
本页面代码来自:https://thebookofshaders.com/02/?lan=ch
客户端实现为:CocosCreator2.3.2中的材质系统
在cocos creator 2.3.2中,将Effect和matrieral转为了正式版,抛弃了以往版本中的实验版的名号
所以demo使用2.3.2版本为基础来实现书中的demo代码
什么是GLSL
首先,我们来照搬一下书中的解释,什么是GLSL
GLSL 代表 openGL Shading Language,openGL 着色语言,这是你在接下来章节看到的程序所遵循的具体标准。根据硬件和操作系统的不同,还有其他的着色器(shaders)。这里我们将依照Khronos Group的规则来执行。了解 OpenGL 的历史将有助于你理解大多数奇怪的约定,所以建议不妨阅读openglbook.com/chapter-0-preface-what-is-opengl.html。
解读cocos effect文件结构
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
}%
CCProgram vs %{
void main () {
}
}%
CCProgram fs %{
void main () {
}
}%
第一个CCEffect方法块
语法为YAML, Cocos有专门的文章做了解释
传送门:https://docs.cocos.com/creator3d/manual/zh/material-system/yaml-101.html
包括现在SprintBoot也是用YAML来做配置信息, 所以文章中不做过多解释
第二个和第三个方法块分别为CCProgram
里面编写者着色器语句,都会有一个main方法入口
CCEffect中详细passes
的参数指南在:
https://docs.cocos.com/creator3d/manual/zh/material-system/pass-parameter-list.html
关于详细的解释,Cocos也有非常详细的解析图 图中以builtin-unlit.effect
为例
进入正题
大致介绍(CV)完成后,我们该进入正题,编写书中第一个demo, helloworld了
书中第一个代码片段:
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
void main() {
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
现在,我们需要在cocos中实现这段着色器效果
- 新建
materal
材质 - 新建
effect
特效 - 绑定
materal
材质中的effect
为我们刚刚新建的effect
特效 - 给节点中的sprite中的
materal
更换为我们刚刚新建的materal
- 编写
effect
特效代码
// 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>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
}%
我们将修改第二个CCProgram fs
代码块,将原来的void main
中的代码块更改为书中的demo代码
void main () {
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
到这里,书中的第一个demo就实现完成了
紧接着是书中helloworld中的另外两个小扩展部分:
尝试另外写个函数,返回某个颜色,然后在 main() 里面使用这个函数。给个提示,这个函数应该长这样:
vec4 red(){
return vec4(1.0,0.0,0.0,1.0);
}
有很多种构造 vec4 类型的方式,试试看其他方式。下面就是其中一种方式:
vec4 color = vec4(vec3(1.0,0.0,1.0),1.0);
1.更改调用方式的red()语句
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
vec4 red(){
return vec4(1.0,0.0,0.0,1.0);
}
void main () {
gl_FragColor = red();
}
}%
2.更改嵌套式的vec4
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void main () {
gl_FragColor = vec4(vec3(1.0,0.0,1.0), 1.0);
}
}%
书中本章节demo在CocosCreator2.3.2中的实现方式到这里就结束了
最新评论