前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SceneKit_高级07_SCNProgram用法探究

SceneKit_高级07_SCNProgram用法探究

作者头像
酷走天涯
发布2022-05-13 16:11:54
5320
发布2022-05-13 16:11:54
举报

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)

让学习成为一种习惯

总结

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 致可敬开爱的读者
  • 话不多说直接开始
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档