webgl 绘制三角形 2.1

我的娘噶, 我真的学的太慢了, webgl,不行得加快脚楽。

上节课就是随便介绍了一下webgl, 这节课的知识特别的多呢。 感觉得分为两次讲呢。

你就随着我的脚步慢慢走吧。

一 、首先,介绍一下,webgl里面的 坐标系。右手坐标系。不说了,直接上图

  这就不用介绍了吧, 伸出你的右手比划一下,Z轴是穿出你的屏幕的,刺向你的哦, 不要眨眼, 不会伤害你的眼睛, 不过温馨提示,注意休息眼睛哦。

二 、 介绍两个shader, 与显卡GPU有关

1.vertexShader: 顶点shader, 以后我们就这样称呼了。

<script id = "shader-vs">    attribute vec3 v3Position;    void main(void){        gl_Position = vec4(v3Position, 1.0);    }</script>

2.fragmentShader: 片段shader。


<script id = "shader-fs">    void main(void){        //指定三角形的颜色        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);    }</script>
 

注意 : 3维世界里面, 点划线,线画面,再构成我们形态各异的立体, 最小单元是点哦。 不过我们以后所建立的模型是由三角形筑成的。

看到了咩,都是三角形构成了一只兔子哦。

三、 创建一个可执行程序

programObject = webgl.createProgram(); 

然后关联两个shader.

四、 创建一个三角缓冲区

triangleBuffer = webgl.createBuffer();  这个缓冲区是在显卡里分派的, 将顶点数据存储到缓冲区里。 

五、 
时间: 2024-10-10 03:04:09

webgl 绘制三角形 2.1的相关文章

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

WebGL 绘制Line的bug(一)

熟悉WebGL的同学都知道,WebGL绘制模式有点.线.面三种:通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系:面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象. 一切看起来都很完美,perfect. 然而,不幸的是,WebGL在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面(应该是大多数情况下)线宽只能设置为1,而不能设置成其他的值. 通过网址http://alteredqualia.com/tmp/webgl-linewidth-test/,我们可以测试

纯CCS绘制三角形箭头图案

用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; /* left arrow slant */ border-right: 5px solid transparent; /* right arrow slant */

绘制三角形矩形

/**绘制三角形*/ CGContextRef contextRef=UIGraphicsGetCurrentContext(); CGContextMoveToPoint(contextRef, 100, 100); CGContextAddLineToPoint(contextRef, 100, 200); CGContextAddLineToPoint(contextRef, 200, 200); CGContextMoveToPoint(contextRef, 100, 100); CG

Android OpenGL入门示例:绘制三角形和正方形 (附完整源码)

Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例,绘制一个三角形和正方形.尽管功能简单,可是我捣腾了好几个晚上,大量网上文章上的代码都有点问题,不是绘制不出来就是挂了. 第一个文件:MainActivity.java package com.example.learnopengl1; import android.opengl.GLSurface

利用javascript和WebGL绘制地球 【翻译】

利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个API我们能够在浏览器中创造出炫酷3D场景的能力.本文将完整的向你展示一些炫酷是如何实现的. 需要特别指出的是,这篇教程我们将会构建一个地球行星模型,这个模型可以像一个兴奋的人一样环绕的旋转,另外,它可能使我们可以获得一些其他程序员的称赞,好吧,就这么多了. 准备 这篇教程我们将会用到一个令人着迷的We

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

Quartz2D-contex绘制三角形

//获取上下文 CGContextRef context =UIGraphicsGetCurrentContext(); //线条加粗 CGContextSetLineWidth(context , 5); //设置背景颜色    [[UIColor grayColor]set];    UIRectFill([self bounds]);    //利用path进行绘制三角形    //标记    CGContextBeginPath(context);    //设置起点    CGCont

利用Quartz2D-contex绘制三角形

//获取上下文 CGContextRef context =UIGraphicsGetCurrentContext(); //线条加粗 CGContextSetLineWidth(context , 5); //设置背景颜色    [[UIColor grayColor]set];    UIRectFill([self bounds]);    //利用path进行绘制三角形    //标记    CGContextBeginPath(context);    //设置起点    CGCont