SceneKit_高级07_SCNProgram用法探究

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)

让学习成为一种习惯

总结

本节内容只是帮助各位引个路,能够使用着色器程序作出很多有趣的东西,以后我会慢慢补上,请持续关注!

代码库,听说经常给人点赞都变帅了!