3.金字塔

案例下载提取码:p9vp

上一篇已经画出来了一个红色三角形。

上一篇运行效果

上一篇是一个平面的三角形,看起来好像是2D的其实已经显示在3D世界中了因为没有使用到Z轴,所以在3D世界中显示一个平面,比较简单。

下面我来教你们加入一个Z轴显示一个金字塔

步骤

想显示一个图像,你先必须知道一个图像的大概结构,例如我们想建一个金字塔,得知道金字塔大概模样


金字塔模型

根据上图的金字塔,我们可以知道一个金字塔是由4个三角形,和一个正方形组成

根据我们上一篇案例,我们知道显示一个三角形需要定义3个顶点位置并且存入到顶点数组。金字塔由4个三角形和一个正方形组成,我们可以把它分解成许多的三角形

正方形可以分解成两个三角形

现在知道金字塔一共需要 3个顶点x六个三角形=18个顶点

现在我们来用坐标表示这6个三角形顶点位置
先把上一篇三角形的顶点数组删除

//初始化
    @Override
    public void SurfaceCreated(Rendering rendering)
    {
        //设置背景颜色为白色
        rendering.setColor(new ColorRGBA(1,1,1,1));
        //顶点数组
        float vertex[]={
            
            
            
        };
        mesh=new Mesh();
        //设置网格的顶点数组数据
        mesh.setVertex(vertex);
        
        //初始化着色器
        shader=new ColorShader();
        //设置颜色
        shader.setColor(new ColorRGBA(1,0,0,1));
        //初始化几何体
        geometry=new Geometry(mesh);
        //给几何体设置一个着色器
        geometry.setShader(shader);
        
        //获取视图类
        ViewPort viewport=rendering.getViewport();
        //设置摄像机参数
        viewport.setCameraPosition(0,0,-5);
        viewport.setCameraLook(0,0,0);
        viewport.setCameraUp(0,1,0);
        
    }

现在开始定义金字塔6个三角形顶点的位置

这里需要一些想象力,在脑中建立一个金字塔模型

我们先定义金字塔下面的正方形,正方形由两个直角三角形组成。

先定义下面正方形的第一个直角三角形

        //顶点数组
        float vertex[]={
            //金字塔下面的正方形
            //第一个直角三角形
            -0.5f,0,-0.5f,
            -0.5f,0,0.5f,
            0.5f,0,0.5f
            
            
        };

因为金字塔正方形Y轴都是一样的,我们这里不需要用Y轴所以设置为0。

运行看看效果

运行效果

为什么看不见?
因为我们摄像头的位置的Y轴是0,并且观测点Y轴也为0,加上三角形定义的Y轴位置也是0,所以导致他们平行看不见任何东西。

解决方法
把摄像头位置的Y轴上调,让摄像头从高位置低头看三角形。我这里让他往上移了4个坐标

        //获取视图类
        ViewPort viewport=rendering.getViewport();
        //设置摄像机参数
        viewport.setCameraPosition(0,4,-5);
        viewport.setCameraLook(0,0,0);
        viewport.setCameraUp(0,1,0);
运行效果

定义第二个直角三角形组成一个正方形

        //顶点数组
        float vertex[]={
            //金字塔下面的正方形
            //由两个直角三角形组成
            //第一个直角三角形
            -0.5f,0,-0.5f,
            -0.5f,0,0.5f,
            0.5f,0,0.5f,
            //第二个直角三角形
            0.5f,0,-0.5f,
            -0.5f,0,-0.5f,
            0.5f,0,0.5f
            
        };
运行效果

然后再把把前面,后面,左边,右边的三角形坐标分别写入。

//顶点数组
        float vertex[]={
            //金字塔下面的正方形
            //由两个直角三角形组成
            //第一个直角三角形
            -0.5f,0,-0.5f,
            -0.5f,0,0.5f,
            0.5f,0,0.5f,
            //第二个直角三角形
            0.5f,0,-0.5f,
            -0.5f,0,-0.5f,
            0.5f,0,0.5f,
            
            //前面三角形
            -0.5f,0,0.5f,
            0.5f,0,0.5f,
            0,1,0f,
            
            //后面三角形  只需要复制
            //前面三角形
            //然后把z轴改为相反数
            -0.5f,0,-0.5f,
            0.5f,0,-0.5f,
            0,1,0f,
            
            //右边三角形
            0.5f,0,0.5f,
            0.5f,0,-0.5f,
            0,1,0,
            
            //左边三角形
            //复制右然后x改为相反数
            -0.5f,0,0.5f,
            -0.5f,0,-0.5f,
            0,1,0,
            
        };

这里的数据可能比较难理解,建议读者自行试试慢慢构建一个几何体,只需要明白这些原理就行,复杂模型可以用模型文件导入

现在我把摄像机y轴改为0,运行项目看看?

运行效果

这里3D效果不明显,但是它确确实实是个3D图形,但是由于都是红色导致看起来像2D。

我来写一个自定义着色器ColorsShader给每个顶点上个颜色,让立体感更强

自定义着色器,这里读者如果不懂,没关系,后面读者学会自定义着色器之后这里自然就懂了

着色器全部代码

public class ColorsShader extends BaseShader
{
    //给不同的顶点上不同颜色
    
    
    private float[] colors;

    @Override
    protected void setShader(RenderingData data, Geometry geometry, ShaderTool shader)
    {
        shader.setAttribFloat("colors",4,colors);
    }

    @Override
    public String getVertexShader()
    {
        String str=
            "in vec4 colors;"
            +"out vec4 mColors;"
            +"vec4 VS(ShaderData data){"
            +"  mColors=colors;"
            +"return data.viewPortMatrix*data.modelPosition;"
            +"}";
        return str;
    }

    @Override
    public String getFragShader()
    {
        String str=
            "in vec4 mColors; "
            +"vec4 FS(ShaderData data){"
            +"  return mColors;"
            +"}";
        return str;
    }
    
    
    public void setColors(float[] colors)
    {
        this.colors = colors;
    }

    public float[] getColors()
    {
        return colors;
    }

    
}

写一个随机颜色给每个顶点设置成不同的颜色,

float colors[]=new float[vertex.length/3*4];
        for(int i=0;i<colors.length/4;i++){
            colors[i*4]=(float)Math.random();//红色
            colors[i*4+1]=(float)Math.random();//绿色
            colors[i*4+2]=(float)Math.random();//蓝色
            colors[i*4+3]=1;//透明度
        }
        
        //初始化着色器
        shader=new ColorsShader();
        //设置颜色
        shader.setColors(colors);
最终效果

项目代码

public class MainActivity extends Activity implements DrawRenderer
{
    //渲染控件类
    private GameView gameview;
    //网格
    private Mesh mesh;
    //几何体
    private Geometry geometry;
    //带颜色的着色器
    private ColorsShader shader;
    //旋转角度
    private float angle;
    
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        gameview=new GameView(this);
        gameview.setDrawRenderer(this);
        setContentView(gameview);
        
    }
    
    //初始化
    @Override
    public void SurfaceCreated(Rendering rendering)
    {
        //设置背景颜色为白色
        rendering.setColor(new ColorRGBA(1,1,1,1));
        //顶点数组
        float vertex[]={
            //金字塔下面的正方形
            //由两个直角三角形组成
            //第一个直角三角形
            -0.5f,0,-0.5f,
            -0.5f,0,0.5f,
            0.5f,0,0.5f,
            //第二个直角三角形
            0.5f,0,-0.5f,
            -0.5f,0,-0.5f,
            0.5f,0,0.5f,
            
            //前面三角形
            -0.5f,0,0.5f,
            0.5f,0,0.5f,
            0,1,0f,
            
            //后面三角形  只需要复制
            //前面三角形
            //然后把z轴改为相反数
            -0.5f,0,-0.5f,
            0.5f,0,-0.5f,
            0,1,0f,
            
            //右边三角形
            0.5f,0,0.5f,
            0.5f,0,-0.5f,
            0,1,0,
            
            //左边三角形
            //复制右然后x改为相反数
            -0.5f,0,0.5f,
            -0.5f,0,-0.5f,
            0,1,0,
            
        };
        
        float colors[]=new float[vertex.length/3*4];
        for(int i=0;i<colors.length/4;i++){
            colors[i*4]=(float)Math.random();//红色
            colors[i*4+1]=(float)Math.random();//绿色
            colors[i*4+2]=(float)Math.random();//蓝色
            colors[i*4+3]=1;//透明度
        }
        
        mesh=new Mesh();
        //设置网格的顶点数组数据
        mesh.setVertex(vertex);
        
        //初始化着色器
        shader=new ColorsShader();
        //设置颜色
        shader.setColors(colors);
        //初始化几何体
        geometry=new Geometry(mesh);
        //给几何体设置一个着色器
        geometry.setShader(shader);
        
        //获取视图类
        ViewPort viewport=rendering.getViewport();
        //设置摄像机参数
        viewport.setCameraPosition(0,0,-5);
        viewport.setCameraLook(0,0,0);
        viewport.setCameraUp(0,1,0);
        
    }

    //绘画函数
    @Override
    public void draw(Rendering rendering)
    {
        //重制几何体位置矩阵
        geometry.genMatrix();
        //设置几何体位置
        geometry.translate(0,0,0);
        //绕Y轴旋转angle度
        angle+=0.5f;
        geometry.rotate(angle,0,1,0);
        //把几何体加入到渲染列表
        rendering.addGeometry(geometry);
    }

    //改变宽高调用
    @Override
    public void SurfaceChanged(Rendering rendering, int width, int heigth)
    {
        
    }
    
    
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335