SceneKit_入门01_旋转人物
SceneKit_入门02_如何创建工程
SceneKit_入门03_节点
SceneKit_入门04_灯光
SceneKit_入门05_照相机
SceneKit_入门06_行为动画
SceneKit_入门07_几何体
SceneKit_入门08_材质
SceneKit_入门09_物理身体
SceneKit_入门10_物理世界
SceneKit_入门11_粒子系统
SceneKit_入门12_物理行为
SceneKit_入门13_骨骼动画
SceneKit_中级01_模型之间的过渡动画
SceneKit_中级02_SCNView 详细讲解
SceneKit_中级03_切换照相机视角
SceneKit_中级04_约束的使用
SceneKit_中级05_力的使用
SceneKit_中级06_场景的切换
SceneKit_中级07_动态修改属性
SceneKit_中级08_阴影详解
SceneKit_中级09_碰撞检测
SceneKit_中级10_滤镜效果制作
SceneKit_中级11_动画事件
SceneKit_高级01_GLSL
SceneKit_高级02_粒子系统深入研究
SceneKit_高级03_自定义力
SceneKit_高级04_自定义场景过渡效果
SceneKit_高级05 检测手势点击到节点
SceneKit_高级06_加载顶点、纹理、法线坐标
SceneKit_高级07_SCNProgram用法探究
SceneKit_高级08_天空盒子制作
SceneKit_高级09_雾效果
SceneKit_大神01_掉落的文字
SceneKit_大神02_弹幕来袭
SceneKit_大神03_navigationbar上的3D文字
致可敬开爱的读者
SceneKit 游戏引擎底层有两套渲染机制,OpenGL ES 和 Metal ,作者目前,对于Metal 还没有开始深入研究,所以本节就使用OpenGL 的接口演示一下如何使用
话不多说直接开始
- 第一步 创建工程(略)
- 第二步 导入框架SceneKit
- 第三步 创建游戏专用视图
let scnView = SCNView(frame: self.view.bounds, options: [SCNView.Option.preferredRenderingAPI.rawValue:true])
scnView.backgroundColor = UIColor.black
self.view.addSubview(scnView)
- 第四步 创建游戏场景
let scene = SCNScene()
scnView.scene = scene
- 第五步 创建照相机
let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
scene.rootNode.addChildNode(cameraNode)
- 第六步 创建一个环境光
let ambientLightNode = SCNNode()
ambientLightNode.light = SCNLight()
ambientLightNode.light?.type = .ambient
scene.rootNode.addChildNode(ambientLightNode)
- 第七步 创建一个文字节点
let text = SCNText(string: "酷走天涯", extrusionDepth: 1)
text.font = UIFont.systemFont(ofSize: 1)
let textNode = SCNNode(geometry: text)
textNode.position = SCNVector3Make(-2, -0.5, -2)
scene.rootNode.addChildNode(textNode)
运行一下
![]()
酷走天涯
完成上面的步骤,我们的基本工作算是完成,接下来就只我们今天的核心内容
我们先创建两个着色器程序
- 片段着色器
precision mediump float;
varying vec2 v_uv;
void main() {
gl_FragColor = vec4(1,v_uv,1);
}
- 顶点着色器
attribute vec4 a_srcPos; // 几何的原来位置
attribute vec2 a_texcoord; // 几何的纹理坐标
uniform mat4 u_mv; // ModelView 变换矩阵
uniform mat4 u_proj; // Projection 变换矩阵
uniform float factor; // 渐变因子
varying vec2 v_uv; // 两个着色器共享纹理坐标
void main()
{
vec4 vsPos = u_mv * a_srcPos;
vec2 nrm = vsPos.xz;
float len = length(vsPos.xz) + 0.0001;
nrm /= len;
float a = len + 0.2 * sin(5.0 * vsPos.y + factor * 10.0);
vsPos.xz = nrm * a;
gl_Position = u_proj * vsPos ;
v_uv = a_texcoord ;
}
接下来我们的任务就是如何将这两个着色器加载到我们程序中,让其作用我们的几何模型
- 1.创建加载着色器的程序对象
let program = SCNProgram()
program.isOpaque = false
- 2.加载着色器程序
let vertexShader = Bundle.main.url(forResource: "CustomProgram", withExtension:"vsh")
let fragmentShader = Bundle.main.url(forResource: "CustomProgram", withExtension:"fsh")
do {
program.vertexShader = try String(contentsOf: vertexShader!, encoding: String.Encoding.utf8)
program.fragmentShader = try String(contentsOf: fragmentShader!, encoding: String.Encoding.utf8)
}catch{
print(error)
}
3.将顶点着色器的属性和几何体进行绑定
program.setSemantic(SCNGeometrySource.Semantic.vertex.rawValue, forSymbol: "a_srcPos", options: nil)
program.setSemantic(SCNGeometrySource.Semantic.texcoord.rawValue, forSymbol: "a_texcoord", options: nil)
4.绑定块属性
program.setSemantic(SCNModelViewTransform, forSymbol: "u_mv", options: nil)
program.setSemantic(SCNProjectionTransform, forSymbol: "u_proj", options: nil)
5.给材质设置着色器程序
textNode.geometry?.firstMaterial?.program = program
6.设置块变量的属性
var morphFactor:Float = 0
textNode.geometry?.firstMaterial?.handleBinding(ofSymbol: "factor", handler: { (programID, location, renderedNode, renderer) in
morphFactor += 0.01
glUniform1f(GLint(location), morphFactor);
})
7.必须让使用自定义的程序最后渲染
textNode.geometry?.firstMaterial?.writesToDepthBuffer = false
textNode.geometry?.firstMaterial?.readsFromDepthBuffer = false
textNode.renderingOrder = 100 // 必须最后渲染
8.我们让其运动一会
let move = SCNAction.moveBy(x: 0, y: 0, z: -10, duration: 10)
textNode.runAction(move)
总结
本节内容只是帮助各位引个路,能够使用着色器程序作出很多有趣的东西,以后我会慢慢补上,请持续关注!
代码库,听说经常给人点赞都变帅了!
