您好,欢迎来到时间财富网
全部需求分类
当前位置:首页 > 移动应用 > 如何制作一个渲染的应用程序及iOS分形App?
如何制作一个渲染的应用程序及iOS分形App?
2015/9/29 13:45:54   作者:风雨考验   人气:1455次  评论(0)
所属标签: 移动应用开发 
摘要:本文作者通过实际的编程操作分享了如何制作一个渲染Mandelbrot Set的应用程序,并共享源码,通过缩放和平铺,一起来欣赏分形App那令人惊叹的复杂之美。

在这个教程中,我们会做一个可以渲染Mandelbrot Set的应用程序,我们可以缩放和平铺它来看分形那令人惊叹的复杂之美。最终的结果可点击链接查看小视频。

着色程序代码如下:

[cpp] view plaincopy
  1. void main() {  
  2.     #define iterations 128  
  3.     vec2 position = v_tex_coord; // gets the location of the current pixel in the intervals [0..1] [0..1]  
  4.     vec3 color = vec3(0.0,0.0,0.0); // initialize color to black  
  5.     vec2 z = position; // z.x is the real component z.y is the imaginary component  
  6.     // Rescale the position to the intervals [-2,1] [-1,1]  
  7.     z *= vec2(3.0,2.0);  
  8.     z -= vec2(2.0,1.0);  
  9.     vec2 c = z;   
  10.     float it = 0.0; // Keep track of what iteration we reached  
  11.     for (int i = 0;i < iterations; ++i) {  
  12.         // zn = zn-1 ^ 2 + c  
  13.         // (x + yi) ^ 2 = x ^ 2 - y ^ 2 + 2xyi  
  14.         z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);  
  15.         z += c;  
  16.         if (dot(z,z) > 4.0) { // dot(z,z) == length(z) ^ 2 only faster to compute  
  17.             break;  
  18.         }  
  19.         it += 1.0;  
  20.     }   
  21.     if (it < float(iterations)) {  
  22.         color.x = sin(it / 3.0);  
  23.         color.y = cos(it / 6.0);  
  24.         color.z = cos(it / 12.0 + 3.14 / 4.0);  
  25.     }  
  26.     gl_FragColor = vec4(color,1.0);  
  27. }  

你可以下载 起始版本跟着教程一起做,也可以在本文结尾找到最终版本的代码。

项目设置

Gamescene.sks文件里包含一个名为fractal的子画面,它填充了整个界面并且着色程序程序Fractal.fsh也附在它上。

  • Fractal.fsh包含了上面着色程序的代码;
  • GameViewController.swift包含了设置游戏场景的代码;
  • GameScene.swift为空。

如果你现在运行代码,你将会得到如下的结果:

 
起始

请注意纵横比固定为3/2,我们需要先根据屏幕大小调节它。同时,由于画面是静态的,所以你不可能与它有任何方式的交互。

设置界面

我们将用一个透明的scrollview来处理平铺缩放。scrollview将自动跟踪我们的位置以及我们在分形中的缩放程度。

打开'Main.storyboard'文件,拖进去一个scrollview。将scrollview设置成fill the view,并对它的宽度,到顶部距离,到底部距离设置限制。

将scrollview的最大缩放程度设置为100000,意味着我们将可以把分享放大到十万倍!我们不能再放大更多了因为已经接近了`float`类型的准确极限。

拖一个view(画面)到scrollview里,它将用作处理缩放。这个view本身不会展示任何东西,我们将用到它的contentOffset和scrollView的zoom属性来更新我们的着色程序。要确保这个画面可以填满scrollView,并且设定好宽度,到顶部底部左右距离的限制。将画面的背景色设置为 Clear Color (透明色)。


向着色程序发送数据

着色程序可以从你的swift代码里的uniform变量里获得数据。uniform变量可以在SpriteKit编辑器里声明。那现在我们来声明一下uniform变量。

打开GameScene.sks文件,选择mandelbrote sprite。将insepctor拖到底部,在“Custom shader Uniforms”里添加两项:float类型的zoom ,值为1, 以及vec2类型的offset。我们将用这两项uniform变量储存scrollView的 contentOffset 以及zoom 属性。




时间财富网为广大企业、商家、个人,提供平面设计、装修设计、建筑设计、起名改名、策划文案、网站建设、营销推广等服务。若您有类似需要,请点击立即发布项目

另,时间财富网上也有着各式各样的任务,无论您是拥有技能的专业人士,还是技术小白。都能在时间财富网上找到您能参与的项目。点击进入悬赏大厅

无论你有什么疑难杂症,威客们都能一一为您解决,点击进入:问答平台