ARKit中通过GLSL渲染平面

作者: 浪淘沙008 | 来源:发表于2023-04-09 09:29 被阅读0次

0014--纹理和颜色混合
详解iOS之ARkit为何碾压对手（一）
音视频开发之旅（八）GLSL及Shader的渲染流程
ARKit功能demo
ARkit初体验
ARKit 上手指南 02 平面检测
OpenGL ES之5种纹理翻转策略
ARKit捕捉平面
ARKit 从零到一第3部分：放置几何体并应用物理学
OpenGL 渲染流程解析

在ARKit框架中通过GLSL渲染材质表面，代码如下：

class ViewController: UIViewController {
    @IBOutlet weak var segment: UISegmentedControl!
    var scnView: ARSCNView!
    var planMaterial:SCNMaterial!
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        self.scnView = ARSCNView(frame: view.frame)

        // 设置配置模式为WorldTracking
        let config = ARWorldTrackingConfiguration()
        config.planeDetection = .horizontal // 设置识别水平平面
        self.scnView.session.run(config)
        self.view.addSubview(self.scnView)
        
        let orthographicCameraNode = SCNNode()
        orthographicCameraNode.camera = SCNCamera()
        orthographicCameraNode.camera?.usesOrthographicProjection = true
        orthographicCameraNode.position = SCNVector3(0, 0, 1)
        
        makePlane()
        
        let titles = ["rainbowSwirlFragment", "warpLineFragment", "morphGridFragment", "waterColorFragmet", "polarCoordinatesFragment", "textureFragment", "scanImageFragment"]
        for i in 0..<7 {
            segment.setTitle(titles[i], forSegmentAt: i)
        }
        
        self.view.bringSubviewToFront(segment)
    }

    // 创建展示材质的平面
    func makePlane() {
        let plane = SCNPlane(width: 0.5, height: 0.5)
        
        let planeNode = SCNNode(geometry: plane)
        planMaterial = planeNode.geometry!.firstMaterial
        planeNode.position = SCNVector3(0, -0.5, -1)
        setDefaultShader()
        self.scnView.scene.rootNode.addChildNode(planeNode)
    }
    
    func setDefaultShader() {
        let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "rainbowSwirlFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
        let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
        planMaterial?.shaderModifiers = shaderModifiers
    }
    
    @IBAction func segmentValueChanged(_ sender: UISegmentedControl) {
        // 根据segment加载对应的shader
        switch sender.selectedSegmentIndex {
        case 0:
            // 加载相应的shader并设置到平面材质上
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "rainbowSwirlFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
            planMaterial?.shaderModifiers = shaderModifiers
        case 1:
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "warpLineFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
            planMaterial?.shaderModifiers = shaderModifiers
        case 2:
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "morphGridFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
            planMaterial?.shaderModifiers = shaderModifiers
        case 3:
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "waterColorFragmet", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
            planMaterial?.shaderModifiers = shaderModifiers
        case 4:
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "polarCoordinatesFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
            planMaterial?.shaderModifiers = shaderModifiers
        case 5:
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "textureFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];

            let img1 = UIImage(named: "uv_grid.jpg")
            let img2 = UIImage(named: "ChristmasTreeOrnament02_col.jpg")
            planMaterial?.shaderModifiers = shaderModifiers
            // 根据shader中的id传入相应的图片
            planMaterial?.setValue(SCNMaterialProperty(contents: img1!), forKey: "texture1")
            planMaterial?.setValue(SCNMaterialProperty(contents: img2!), forKey: "texture2")
        case 6:
            let mapFragment = try! String(contentsOf: Bundle.main.url(forResource: "scanImageFragment", withExtension: "shader")!, encoding: String.Encoding.utf8)
            let shaderModifiers = [SCNShaderModifierEntryPoint.fragment:mapFragment];
            let img = UIImage(named: "ChristmasTreeOrnament02_col.jpg")
            planMaterial?.shaderModifiers = shaderModifiers
            planMaterial?.setValue(SCNMaterialProperty(contents: img!), forKey: "texture")
        default:
            return
        }
        
    }
    
    private func image(named imageName: String) -> UIImage {
        return UIImage(named: imageName, in: Bundle.main, compatibleWith: nil)!
    }
    
    private func shaderModifier(named shaderModifierName: String) -> String {
        return try! String(contentsOfFile: Bundle.main.path(forResource: shaderModifierName, ofType: "shader")!, encoding: String.Encoding.utf8)
    }
}

效果图：

shader材质.gif

shader材质1.gif

对应的shader：

vec2 coord = fract(_surface.diffuseTexcoord);
vec3 color = vec3(0.0);
float angle = atan((-coord.y + 0.25)/(coord.x - 0.5)) * 0.1;
float len = length(coord - vec2(0.5, 0.25));

color.r += sin(len * 40.0 + angle * 40.0 + u_time);
color.g += cos(len * 30.0 + angle * 60.0 - u_time);
color.b += sin(len * 50.0 + angle * 40.0 + u_time);
_output.color.rgb = color;

vec2 coord = vec2(1.0) - _surface.diffuseTexcoord;
float color = 0.0;

color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time))) * 2.0;
color += cos(coord.x * 20.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time))) * 2.0;
color += sin(coord.x * 30.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time))) * 2.0;
color += cos(coord.x * 10.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time))) * 2.0;

_output.color.rgb = vec3(color + coord.y, color + coord.x, color);

float random2d(vec2 coord)
{
return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

#pragma transparent
#pragma arguments

#pragma body

vec2 coord = (_surface.diffuseTexcoord / vec2(0.2));

coord -= u_time + vec2(sin(coord.y), cos(coord.x));
vec3 color = vec3(0.0);

float rand01 = fract(random2d(floor(coord)) + u_time / 60.0);
float rand02 = fract(random2d(floor(coord)) + u_time / 40.0);

rand01 *= 0.4 - length(fract(coord));
_output.color.rgb = vec3(rand01 * 4.0, rand02 * rand01 * 4.0, 0.0);

vec2 coord = 6.0 * _surface.diffuseTexcoord;

for(int n = 1; n < 10; n++) {
float i = float(n);
coord += vec2(0.7 / i * sin(i * coord.y + u_time + 0.3 * i) + 0.8, 0.4 / i * sin(coord.x + u_time + 0.3 * i) + 1.6);
}
// coord *= vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);

vec3 color = vec3(0.5 * sin(coord.x) + 0.5, 0.5 * sin(coord.y) + 0.5, sin(coord.x + coord.y));
gl_FragColor = vec4(color, 1.0);

vec2 coord = _surface.diffuseTexcoord;
vec4 color = vec4(0.0);
vec2 pos = vec2(0.5) - coord;

float r = length(pos) * 2.0;
float a = atan(pos.y / pos.x);

float f = cos(a * 6.0);

color = vec4(1.0 - smoothstep(f, f + 0.01, r));

gl_FragColor = color;

#pragma arguments
texture2d<float, access::sample> texture1;
texture2d<float, access::sample> texture2;
#pragma body

constexpr sampler smp(filter::linear, address::repeat);

float4 color1 = texture1.sample(smp, _surface.diffuseTexcoord);
float4 color2 = texture2.sample(smp, _surface.diffuseTexcoord);

float mixValue = 0.5 + scn_frame.sinTime * 0.5;

_output.color.rgba = mix(color1, color2, mixValue);

#pragma transparent
#pragma arguments
texture2d<float, access::sample> texture;
#pragma body

float size = 6.0;
float speed = -3.0;

constexpr sampler smp(filter::linear, address::repeat);
float4 color = texture.sample(smp, _surface.diffuseTexcoord);
color.a = sin(floor(_surface.diffuseTexcoord.x * size) - scn_frame.time * speed);
_output.color.rgba = color;

0014--纹理和颜色混合
前言通过glkit和glsl分别对金字塔进行颜色+纹理渲染. GLSL 修改.fsh文件内容 textColor...
详解iOS之ARkit为何碾压对手（一）
在这篇文章中，我们能学习到 1，ARKit简介与基本了解 2，ARKit的基本技术原理，平面检测 3，ARKit的...
音视频开发之旅（八）GLSL及Shader的渲染流程
目录 GLSl是什么？ GLSL特有语法 Shader的渲染流程 EGL上下文环境参考收获一、GLSL是什么...
ARKit功能demo
ARKit点击屏幕增加文字 ARKit点击屏幕增加3D模型 ARKit检测到平面自动增加3D模型 QuickLoo...
ARkit初体验
一.AR&ARkit ARkit。三部分，相机姿态估计，环境感知（平面估计）及光源感知。 ARkit和AR和巨大...
ARKit 上手指南 02 平面检测
上一小节中，我们在ARKit虚拟世界中添加了3D物体，接下来我们会使用ARKit检测现实世界的平面。这样我们才能在...
OpenGL ES之5种纹理翻转策略
最近用GLSL实现渲染图片，原始图片是正常显示的，但是渲染出来的是倒置的，通过查找许多资料才明白是因为手机的（0,...
ARKit捕捉平面
首先创建项目然后重新创建了一个Controller叫THARKitController(随便取的) 下面开始导入...
ARKit 从零到一第3部分：放置几何体并应用物理学
在上一篇文章里我们用 ARKit 来检测真实生活中的平面，然后给这些平面添加了视觉效果。在这篇文章中，我会开始向 ...
OpenGL 渲染流程解析
OpenGL 渲染架构 Attributes 属性只能传入顶点着色器，不能直接传递到片元着色器，只能通过GLSL代...