顶点坐标

计算机图形图像练习题与解答(源码+注释) 记录一下作业题解，附上详细注释。 文章目录 计算机图形图像练习题与解答(源码+注释) 3-3 白色正方形 3-4 红色正三角形 3-5 蓝色四边形 3-6 点的反走样 3-7 线段的反走样 3-8 多视口演示1 3-9 多视口演示2 3-3 白色正方形 3-3 请使用OpenGL和GLUT编写一个简单的图形程序，用于显示一个填充的 白色正方形。其中正方形的左下角顶点是(-0.8, -0.8)，右下角顶点是(0.8, -0.8)，程 序窗口的大小为(200, 200)，标题为“白色正方形”。 使用glRectf函数定义一个矩形，函数原型为： void glRectf(GLfloat x1, GLfloat y1, GLfloat x2, GLfloat y2); (x1, y1)左下角顶点的坐标。 (x2, y2)右上角顶点的坐标。 题中有正方形左下角顶点是(-0.8, -0.8)，右下角顶点是(0.8, -0.8)，所以右上角为(0.8, 0.8) 即glRectf(-0.8,-0.8,0.8,0.8),完整代码为： # include <windows.h> # include <GL/glut.h> void Paint ( ) { glClear ( GL_COLOR_BUFFER_BIT ) ; // 清除颜色缓存 glRectf

什么是WebGL？ WebGL使用了GLSL ES(OpenGL ES)着色器语言，通过配合调用js相关的绘制接口来实现3D效果。 采用页面中的<canvas>元素来定义绘图区域，canvas支持三维图形的绘制，但它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形。 绘制流程 获取画布canvas和3D绘制上下文 1 var canvas = document.getElementById('canvas'); 2 var gl = canvas.getContext('webgl'); 具体的参数可以参考这里： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext 编写顶点着色器和片段着色器 1 // 着色器是字符串形式的glsl代码 2 var VSHADER_SOURCE = "..."; 3 var FSHADER_SOURCE = "..."; 编译着色器并提交到GPU 1.创建Shader对象 createShader方法，需要传递参数指明是顶点着色器还是片段着色器； 2.将写好的着色器附加到Shader上 shaderSource方法，可以指定着色器代码添加到指定的Shader上； 3.编译着色器 compileShader方法

Ogre2.1大量光源渲染 　　Ogre2.1不是采用现在大部分引擎所用的延迟渲染，而是采用一种前向渲染的改进技术，理论基本来自于Forward+,见如下。 　　 http://www.klayge.org/?p=1895 　　 http://www.ogre3d.org/2015/03/05/ogre-progress-report-february-2015 　　第一个链接是Forward+技术的原理，第二个是讲Ogre2.x的Forward3D实现，和正规的Forward+不同之处，以及没有默认采用延迟渲染的原因，顺便也指出，一样可以采用延迟渲染，并且还能使用Forward3D生成的数据，实现Tiled-based Deferred Shading，相比Ogre1.x中的延迟渲染例子，现ogre2.1中实现更方便与高效，大致看下Ogre2.1的渲染流程(更高效的多线程，统一Cull,SOA,SMID)就能明白。 　　为了巩固对延迟渲染的理解，解释下Ogre1.x中延迟渲染例子，对于这个例子我自认为是Ogre1.x中的比较有难度的一个例子，因为关联的东东太多，如渲染流程以及事件在流程中的位置，合成器技术，自定义合成器渲染的实现，RTT，MRT等等，原来一直想单独用一篇来说明Ogre1.x中的延迟渲染例子，在Ogre2.1出来后，这个想法也就没了，简单说下这个例子，在这不讲理论

这是对threejs初步的一个理解 EleVR elevr是基于webGL的原生API来实现的一个全景播放平台 首先 elevr 是根据绘制适口来进行双屏 VR 渲染的 if (eye === 0) { // left eye webGL. gl .viewport(0, 0, canvas . width / 2, canvas . height ); } else { // right eye webGL. gl .viewport( canvas . width / 2, 0, canvas . width / 2, canvas . height ); } 因为本身对 webGL 的 API 不熟悉，所以改写是存在很大难度的 通过层层样式的修改，通过用 localstorage 本地存储的方式写入一个变量值，每次点击去修改其存储的值，然后根据存入值的一个状态来决定走哪个绘制 vierport ，最后 reload 页面，基本实现单双屏切换的状态， 但是用户体验肯定不是很乐观，稍后会对 webGL 进入深层次的一个学习，暂时用此方法替代单双屏切换的一个状态 具体实现代码 var btn = document .getElementById("btn");// 获取点击按钮的 dom 元素 btn.onclick = function(){// 注册一个点击事件 if (

The Graphics Rendering Pipeline 渲染管线，这章主要讲光栅化渲染管线。 毕业前实习时，也实现过一个简单的软光栅化渲染管线，再复习一下。 在计算机图形学领域，shading指基于表面相对灯光的角度、距灯光的距离、相对于相机的角度和材质的属性等来修改物体/表面/多边形的颜色，进而创造一个具有真实感效果的过程。 In computer graphics, shading refers to the process of altering the color of an object/surface/polygon in the 3D scene, based on things like (but not limited to) the surface's angle to lights, its distance from lights, its angle to the camera and material properties (e.g. bidirectional reflectance distribution function) to create a photorealistic effect. Shading is performed during the rendering process by a program called a

OpenGL的变换 OpenGL ES 中有两套矩阵，都是4×4的GLfloat矩阵。一个叫 modelview matrix ，你大部分时间都会与之打交道。它是你用来对虚拟世界进行变换的矩阵。要对虚拟世界中的物体进行旋转，转移或尺寸变化，你都需要对此矩阵进行修改。 另一个矩阵用来创建根据设定的视口对世界坐标进行描述的二维表示。此矩阵称为 projection matrix 。在绝大部分时间内，你都不需要接触该矩阵。 从三维空间到二维平面，就如同用相机拍照一样，通常都要经历以下几个步骤 （括号内表示的是相应的图形学概念）： 　　第一步，将相机置于三角架上，让它对准三维景物（ 视点变换 ，Viewing Transformation）。 　　第二步，将三维物体放在适当的位置（ 模型变换 ，Modeling Transformation）。 　　第三步，选择相机镜头并调焦，使三维物体投影在二维胶片上（ 投影变换 ，Projection Transformation）。 　　第四步，决定二维像片的大小（ 视口变换 ，Viewport Transformation）。 　　这样，一个三维空间里的物体就可以用相应的二维平面物体表示了，也就能在二维的电脑屏幕上正确显示了。 变换后的x坐标范围是[-1, 1]，y坐标范围是[-1, 1]，z坐标范围是[0, 1]（OpenGL略有不同，z值范围是

问题 ： 输入一个整数n，表示是n边形，然后是按照逆时针顺序给出的n个顶点的坐标（x1, y1, x2, y2... xn, yn）,为了简化问题，这里的所有坐标都用整数表示。 n = 0 ，表示结束 输出： n 边形的面积。 Sample Input 3 0 0 1 0 0 1 4 1 0 0 1 -1 0 0 -1 0 Sample Output 0.5 2.0 ———————————————————————————————————————————— 这是一道链接可以做一下： http://acm.nefu.edu.cn/problemShow.php?problem_id=445 今天我们介绍用叉乘法来做这道题，非常简便。无论给的坐标是逆时针的还是顺时针的都可以用。 设 n 边形的点，按顺时针/逆时针的顺序依次是 （x1，y1）(x2,y2)......(xn,yn)。 那么：s = (x1y2-x2y1)/2 + (x2y3-x3y2)/2 +......+ (xny1-x1yn)/2 这时的 s 是有向面积，还需要取绝对值。 写成代码就是： for(i = 0;i<n;i++) { s =s+ (a[i]*b[(i+1)%n]-a[(i+1)%n]*b[i])/2; } s = fabs（s）； 因为最后一项是回到出发点（xn*y(n+1)-x(n+1)*y(n)）

本文为翻译，附上 原文链接 。 转载请注明出处—— polobymulberry-博客园 。 动机 如果你满足以下条件，我建议你阅读这篇教程： 你想学习片段着色器（Fragment Shader）。 你想实现复杂的多通道着色器（multipass），但是对其不是很了解。 你想使用上面提到的两种技术（片段着色器和多Pass）来实现描边效果的Toon shader，你就需要理解这两种技术的概念。 学习资源 Martin Kraus's fantastic Wiki Book GLSL Programming/Unity 引论 在教程的第4部分，我们创建了一个相当好的toon shader，该shader使用了边缘光照（rim lighting）对模型进行描边 — 但是这种方法的问题在于它只能使用在表面光滑的模型上。对于那些平整的，有棱角的表面，我们计算其边缘的法向量时，会发现两个面的边界法向会产生突变（比如正方形的六个面，单个面上的法向都一致，但是两个面之间的法向会发生突变，不像球面上的法向是渐变的），这将产生我们不想要的边界效果。 有一个更好的办法对模型进行描边效果处理 — 先将模型背面稍微扩大一些（边缘延伸一些）然后渲染为全黑，最后正常渲染模型正面即可，这样我们看到的黑色边缘其实是背面呈现的颜色。这就要求在shader中使用两个Pass — 你可能还记得

写在之前 最近的一个2D项目中，要求对一个方块不断进行切割，切掉较小者，留下较大者，如此，便引出了一个问题：不同形状图形的数据的更新。而图形的数据结果的计算，就涉及到了计算机图形学相关的知识---三角化的概念边产生。 2. 问题拆分 a> 一个简单的图形（此处仅指2D）--如正方形，在代码中的表示方法 b> 三角化概念以及三角化的方法 3. 关于图形的表示方法 如下图，四个点的坐标信息保存在一个双向循环链表的结构中，这样，我们只需要知道一个点就可以按照我们预定的方向拿到剩下的所有点了。 可识别的图形（左）和转换后的数据示意图（右） 这样，根据三点不同时都在同一条直线的原则，一个平面图形的数据就构建完成了。 4. 三角化 因为计算机的GPU在绘制面的时候，是以三角形为基本单位的，所有的复杂图形都是大量的三角形拼接成的。这就是三角化概念的由来：将简单多边形分解成许多三角形，由这些三角形的顶点构成这个多边形。这个拆解的过程就是三角化的过程。简单举例，上图的矩形三角化之后有两个三角形：△P0 P1 P2、△P2 P3 P0，也就是点集合的索引：012、230的确定的过程就是三角化。 关于多边形的三角化算法，在这里，介绍一种比较简单容易理解的三角化法--耳切法。 耳切法适用于简单多边形的三角化，这里需要说明几个概念。 简单多边形：几何学中将互不相交的一些线段成对连接形成的闭合路径的平面图形

一、我们讲什么？ 我们讲两个东西： 1、WebGL背后的工作原理是什么？ 2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？ 我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题： 1、很多东西还是做不出来，甚至没有任何思路； 2、碰到bug无法解决，甚至没有方向； 3、性能出现问题，完全不知道如何去优化。 这个时候，我们需要了解更多。 三、先了解一个基础概念 1、什么是矩阵？ 简单说来，矩阵用于坐标变换，如下图： 2、那它具体是怎么变换的呢，如下图： 3、举个实例，将坐标平移2，如下图： 如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。 四、WebGL的工作原理 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现： 它只能会点、线、三角形？一定是我看错了。 没有，你没看错。 就算是这样一个复杂的模型，也是一个个三角形画出来的。 4.2、WebGL绘制流程 简单说来，WebGL绘制过程包括以下三步： 1、获取顶点坐标 2、图元装配（即画出一个个三角形） 3、光栅化（生成片元，即一个个像素点） 接下来