gl 绘制多边形的函数解析 .

1,所谓正反面

    glFrontFace(GL_CCW);  // 设置CCW方向为“正面”,CCW即CounterClockWise,逆时针
     glFrontFace(GL_CW);   // 设置CW方向为“正面”,CW即ClockWise,顺时针

     如果顶点标识顺序与上边设置不一致,则会认为当前的面(眼前)为该图形的背面。

      比如画一个三角形 vertex={( 1,0) ,  ( 0,1), (-1,0)}

如果 glFrontFace(GL_CCW); 逆时针为正面, 顶点标识indices={0,1,2} 才能正常显示 ,如果indices={2,1,0}则图形背面向外,显示图形的背面。

   

2. 绘制方式

glPolygonMode

  简介

  glPolygonMode函数用于控制多边形的显示方式。
  原型是:void glPolygonMode(GLenum face,GLenum mode);

       参数

  face这个参数确定显示模式将适用于物体的哪些部分,控制多边形的正面和背面的绘图模式:
  GL_FRONT表示显示模式将适用于物体的前向面(也就是物体能看到的面)
  GL_BACK表示显示模式将适用于物体的后向面(也就是物体上不能看到的面)
  GL_FRONT_AND_BACK表示显示模式将适用于物体的所有面
  mode这个参数确定选中的物体的面以何种方式显示(显示模式):
  GL_POINT表示只显示顶点,多边形用点显示
  GL_LINE表示显示线段,多边形用轮廓显示
  GL_FILL表示显示面,多边形采用填充形式
  例:
  glPolygonMode(GL_FRONT, GL_LINE);表示物体的前向面用线段显示
  需要特别注意的是OpenGL3.1只接受GL_FRONT_AND_BACK作为face的值,并且不管是多边形的正面还是背面都以相同的方式渲染。

为了更加明白以上2者(正反面和绘制方式)的直观意义,特举例如下:
      在display()代码里加入:
    glPolygonMode(GL_FRONT, GL_FILL); // 设置正面为填充模式
     glPolygonMode(GL_BACK, GL_LINE);   // 设置反面为线形模式
     glFrontFace(GL_CCW);               // 设置逆时针方向为正面
     glBegin(GL_POLYGON);               // 按逆时针绘制一个正方形,在左下方
         glVertex2f(-50.0f, -50.0f);
         glVertex2f(0.0f, -50.0f);
         glVertex2f(0.0f, 0.0f);
         glVertex2f(-50.0f, 0.0f);
     glEnd();

glBegin(GL_POLYGON);               // 按顺时针绘制一个正方形,在右上方
         glVertex2f(0.0f, 0.0f);
         glVertex2f(0.0f, 50.0f);
         glVertex2f(50.0f, 50.0f);
         glVertex2f(50.0f, 0.0f);
     glEnd();
   
分析代码:后面这个右上方的四边形,可知其是按照顺时针布置顶点的,但是我们目前设置的是以逆时针为正面,那么运行的结果是什么呢?答,我们看到的是其背面。而背面是 线形模式,我们看到的应该是线。  当然,左下角的应该是正面,而且是填充起来了的。
效果图如下:





3,剔除某些面
  glEnable(GL_CULL_FACE);
  glCullFace的参数可以是GL_FRONT,GL_BACK或者GL_FRONT_AND_BACK,分别表示剔除正面、剔除反面、剔除正反两面的多边形。
   对于剔除,特举例如下:
在dispaly函数添加如下代码:
   glFrontFace(GL_CCW);
    //glCullFace(GL_BACK);  
    //glEnable(GL_CULL_FACE);
   glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
        glBegin(GL_QUADS);
。。。这里面是画个立方体的6个表面。逆时针。
       glEnd();
在有    glCullFace(GL_BACK);   glEnable(GL_CULL_FACE);这2句的情况下,图形效果如下:


在没有  glCullFace(GL_BACK);  glEnable(GL_CULL_FACE);这2句的情况下,图形效果如下:


4,镂空某些面
  首先,使用glEnable(GL_POLYGON_STIPPLE);来启动镂空模式(使用glDisable(GL_POLYGON_STIPPLE)可以关闭之)。
  然后,使用glPolygonStipple来设置镂空的样式。
    void glPolygonStipple(const GLubyte *mask);
更多参考: http://www.cppblog.com/doing5552/archive/2009/01/08 第三课

WebGL是一种用于在Web浏览器中绘制3D图形的技术。要绘制多边形,你需要定义顶点数据,并使用WebGL绘制函数将其绘制到画布上。 以下是一个使用WebGL绘制三角形的示例: ```javascript // 获取画布元素 var canvas = document.getElementById("myCanvas"); // 获取WebGL上下文 var gl = canvas.getContext("webgl"); // 定义顶点数据 var vertices = [ -0.5, -0.5, 0.0, // 第一个顶点的坐标 0.5, -0.5, 0.0, // 第二个顶点的坐标 0.0, 0.5, 0.0 // 第三个顶点的坐标 ]; // 创建缓冲区对象 var vertexBuffer = gl.createBuffer(); // 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 将顶点数据写入缓冲区对象 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 获取顶点着色器代码 var vertexShaderSource = ` attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); } `; // 创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 编译顶点着色器代码 gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 获取片元着色器代码 var fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // 创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 编译片元着色器代码 gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); // 创建着色器程序对象 var program = gl.createProgram(); // 将顶点着色器和片元着色器附加到着色器程序对象上 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接着色器程序对象 gl.linkProgram(program); // 使用着色器程序对象 gl.useProgram(program); // 获取顶点位置属性的位置 var aPosition = gl.getAttribLocation(program, "aPosition"); // 启用顶点属性数组 gl.enableVertexAttribArray(aPosition); // 指定顶点属性数组的数据格式和位置 gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); // 清空画布 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, 3); // 刷新画面 gl.flush(); ``` 这段代码首先获取了画布元素和WebGL上下文,然后定义了三个顶点的坐标数据。接下来,创建了顶点着色器和片元着色器,并编译它们的代码。然后,创建了着色器程序对象,并将顶点着色器和片元着色器附加到着色器程序对象上。之后,启用顶点属性数组,并指定顶点属性数组的数据格式和位置。最后,清空画布,绘制三角形,并刷新画面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值