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
第三步创建游戏专用视图

代码语言：javascript复制

let scnView = SCNView(frame: self.view.bounds, options: [SCNView.Option.preferredRenderingAPI.rawValue:true])     
scnView.backgroundColor = UIColor.black
self.view.addSubview(scnView)

第四步创建游戏场景

代码语言：javascript复制

 let scene = SCNScene()
 scnView.scene = scene

第五步创建照相机

代码语言：javascript复制

let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
scene.rootNode.addChildNode(cameraNode)

第六步创建一个环境光

代码语言：javascript复制

 let ambientLightNode = SCNNode()
 ambientLightNode.light = SCNLight()
 ambientLightNode.light?.type = .ambient
 scene.rootNode.addChildNode(ambientLightNode)

第七步创建一个文字节点

代码语言：javascript复制

    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)

运行一下

酷走天涯

完成上面的步骤,我们的基本工作算是完成,接下来就只我们今天的核心内容

我们先创建两个着色器程序

片段着色器

代码语言：javascript复制

 precision mediump float;
varying vec2 v_uv;
void main() {
    gl_FragColor = vec4(1,v_uv,1);
}

顶点着色器

代码语言：javascript复制

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.创建加载着色器的程序对象

代码语言：javascript复制

 let program = SCNProgram()
 program.isOpaque = false

2.加载着色器程序

代码语言：javascript复制

 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.将顶点着色器的属性和几何体进行绑定

代码语言：javascript复制

 program.setSemantic(SCNGeometrySource.Semantic.vertex.rawValue, forSymbol: "a_srcPos", options: nil)
 program.setSemantic(SCNGeometrySource.Semantic.texcoord.rawValue, forSymbol: "a_texcoord", options: nil)

4.绑定块属性

代码语言：javascript复制

 program.setSemantic(SCNModelViewTransform, forSymbol: "u_mv", options: nil)
 program.setSemantic(SCNProjectionTransform, forSymbol: "u_proj", options: nil)

5.给材质设置着色器程序

代码语言：javascript复制

   textNode.geometry?.firstMaterial?.program = program

6.设置块变量的属性

代码语言：javascript复制

 var morphFactor:Float = 0
 textNode.geometry?.firstMaterial?.handleBinding(ofSymbol: "factor", handler:  { (programID, location, renderedNode, renderer)  in
     morphFactor  = 0.01
     glUniform1f(GLint(location),  morphFactor);
  })

7.必须让使用自定义的程序最后渲染

代码语言：javascript复制

    textNode.geometry?.firstMaterial?.writesToDepthBuffer = false
    textNode.geometry?.firstMaterial?.readsFromDepthBuffer = false
    textNode.renderingOrder = 100 // 必须最后渲染

8.我们让其运动一会

代码语言：javascript复制

    let move = SCNAction.moveBy(x: 0, y: 0, z: -10, duration: 10)
    textNode.runAction(move)

让学习成为一种习惯

总结

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

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

opengl api

0 人点赞