OpenGL的2D示例 - 腾讯云开发者社区

文章/答案/技术大牛

发布

canvas星空的2d绘制示例

canvas.width=800; canvas.height=600; //设置绘制模式 var context=canvas.getContext("2d... context.fillStyle=grd; //使用设置好的模式绘制矩形，在这里的矩形作为背景层 context.fillRect(0,0,800,600...五角星每两个个外顶点和内顶点与中心连线的夹角都为72°，我们引入坐标轴和三角函数进行计算。...36)*R)(i=1,2,3,4,5)，也可以这么写(cos(72*i-36)*R,sin(72*i-36)*R)(i=1,2,3,4,5) 因为js中的三角函数是弧度制，角度转弧度的公式为：arc=...angle/180*Math.PI 上述即是星空的完整绘制过程。

8999 0

【C++】OpenGL：键盘交互示例

在窗体中创建多边形新建opengl项目，安装好nupengl程序包，开始main函数编写。...1.0, 1.0, 0.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-20, 30, -20, 30); //可视的范围...，类似鼠标滚轮的远近 } int main(int argc, char* argv[]) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB...glutMainLoop(); return 0; } 多边形窗体效果如下：写入键盘交互函数我们的目的是通过键盘交互，使窗体中的多边形依次上下左右移动。...因此，我们要先改变一下多边形函数-myDisplay()，首先创建全局变量： int xd = 0, yd = 0; //全局变量然后在多边形的几个顶点的（x,y）坐标后分别加上xd和yd： glVertex2i

3381 0

您找到你想要的搜索结果了吗？

是的

没有找到

【C++】OpenGL：鼠标交互示例

在窗体中创建多边形新建opengl项目，安装好nupengl程序包，开始main函数编写。...跟前面创建窗体不同，这次我们将窗体的长和宽都设置为全局变量，以方便后面的操作： GLint w = 600, h = 500; //窗体变量另外，为了方便窗体中多边形移动，创建dx和dy两个全局变量，...并分别加到多边形的各个顶点： GLint dx = 0, dy = 0; //移动变量创建窗体多边形完整程序： #include GLint w = 600, h = 500...，类似鼠标滚轮的远近 } int main(int argc, char* argv[]) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB...glutMainLoop(); return 0; } 生成的多边形如下：写入鼠标交互函数跟前面键盘交互类似，这次我们的目的是让多边形跟着鼠标移动，也就是鼠标点到哪里，多边形就跟到哪里。

4371 0

【C++】OpenGL：freeglut环境配置与基础示例

FreeGLUT介绍 FreeGLUT（Free OpenGL Utility Toolkit）是一个开源的替代性GLUT库，它提供了类似于GLUT的功能，并在其基础上进行了扩展和改进。...FreeGLUT的目标是提供一个跨平台、功能丰富且易于使用的工具库，用于OpenGL程序开发。...这使得开发者可以使用相同的代码在不同平台上进行OpenGL程序开发。...应用示例点创建示例： #include #include void init() { glClearColor(0.0, 0.0, 0.0,...，提供了一些glut示例。

1K1 0

【C++】OpenGL：创建线段和多边形示例

，类似鼠标滚轮的远近 } Ctrl+F5运行，会生成窗体如下：创建线段接下来要在这个空的窗体上画我们的线段。...首先，将main函数中的//glutDisplayFunc(lines); //传递需要勾画的函数取消注释，这是调用线段的操作；然后，创建lines-线段函数： void lines() { int...线段的渲染效果如下：创建多边形上面我们已经用线段勾勒出一个五角星了，不过还都是点和线的操作，这部分我们来绘制一个多边形（包括三角形、四边形）。...glutMainLoop(); return 0; } Ubuntu端创建多面体 # 安装opengl sudo apt-get install build-essential libgl1-mesa-dev...GLUT_DOUBLE); glutInitWindowPosition(100, 100); glutInitWindowSize(700, 700); glutCreateWindow("First OpenGL

3481 1

OpenGL（五）-- OpenGL中矩阵的变换OpenGL（五）-- OpenGL中矩阵的变换

OpenGL（五）-- OpenGL中矩阵的变换前言照常提出几个问题，希望通过阅读可以找到答案。对物体3维的2维投影进行位移，有几种方式？模型视图矩阵代表了什么？...可以想象在观察者和物体中间有一个画板，观察者最终看到的图像是在这个画板上的，这个画板的位置就是由投影矩阵来表示的。在这个画板上的图像才是可以用于显示的2d图像。...正射投影(Orthographic Projection)：矩阵定义了一个类似立方体的平截头体，指定了一个裁剪空间，每一个在这空间外面的顶点都会被裁剪。从而得到一个2d图像。 2. 透视投影 ?...中涉及到的矩阵变换在OpenGL中矩阵的计算方式 // 矩阵计算 m3dMatrixMultiply44(ModelViewMatrix(模型视图矩阵),ViewMatrix（观察者矩阵）, ModelMatrix...如果想要了解具体矩阵是如何计算的:3D数学矩阵知识矩阵栈在计算时会发现这种计算会导致物体唯一无法重置，为了解决这种问题OpenGL提出了矩阵栈的概念。栈这个概念应该是很熟悉了吧！

3.2K1 1

OpenGL (一)--基于pod的OpenGL环境配置OpenGL (一)--基于pod的OpenGL环境配置

基于pod的OpenGL环境配置依赖准备 ---- 所需依赖： CLTools glew libGLTools.a OpenGL.framework、GLUT.framework（这部分依赖于系统动态库...地址：百度网盘密码:0wkj 下载解压后放在与Podfile同目录下，在pod文件中通过导入本地资源的方式引入 ?...工程创建 ---- 首先需要明确的是OpenGL是基于Mac端的，所以创建的Demo也得是MacOS 当然也有基于iOS的OpenGL ES，环境配置后续放出。 ?...，其中0,0代表窗口中视口的左下角坐标，w，h代表像素 void ChangeSize(int w,int h) { glViewport(0,0, w, h); } //为程序作一次性的设置...1.0f,1.0f); //初始化着色管理器 shaderManager.InitializeStockShaders(); //设置三角形，其中数组vVert包含所有3个顶点的x

1.9K2 0

OpenGL与OpenGL在移动端的应用

稍微技术流一点，作如下解释：是用于渲染2D,3D矢量图形的跨语言、跨平台的应用程序编程接口(API）。...可以将各种2D图像附加到framebuffer对象中的颜色附着点。这些包括存储颜色值的renderbuffer对象、二维纹理或cubemap面的mip级别，甚至三维纹理中的二维切片的mip级别。...类似地，各种包含深度值的2D图像可以附加到FBO的深度附着点。这些可以包括一个renderbuffer，一个二维纹理的mip级，或者一个存储深度值的cubemap面。...唯一可以附加到FBO模板附着点的2D图像是一个存储模板值的renderbuffer对象。...OpenGL不是简单地把所有的3D坐标变换为屏幕上的2D像素；OpenGL仅当3D坐标在3个轴（x、y和z）上都为-1.0到1.0的范围内时才处理它。

3.4K3 0

RenderDemo（2）：用 OpenGL 渲染视频丨音视频工程示例

在 RenderDemo 这个工程示例系列，我们将为大家展示一些渲染相关的 Demo，来向大家介绍如何在 iOS/Android 平台上手一些渲染相关的开发。...这里是第二篇：用 OpenGL 渲染视频。我们分别在 iOS 和 Android 实现了用 OpenGL 渲染视频数据的 Demo。...在本文中，包括如下内容： 1）iOS 视频 OpenGL 渲染 Demo； 2）Android 视频 OpenGL 渲染 Demo； 3）详尽的代码注释，帮你理解代码逻辑和原理。...示例去完成具体的渲染细节。...2D 纹理。

1.7K1 0

RenderDemo（3）：用 OpenGL 实现高斯模糊丨音视频工程示例

这里是 RenderDemo 的第三篇：用 OpenGL 实现高斯模糊。我们分别在 iOS 和 Android 平台实现了用 OpenGL 对图像进行高斯模糊处理并渲染出来。...本文将会给大家介绍高斯模糊的数学原理，以及用 OpenGL 完成高斯模糊的代码实现。...这里就不再细讲，只贴一下主要的类和类具体的功能： KFOpenGLView：使用 OpenGL 实现的渲染 View，提供了设置画面填充模式的接口和渲染一帧纹理的接口。...2D 纹理。 const lowp int GAUSSIAN_SAMPLES = 9; // 被参考的点数目。...3、Android Demo Android 实现高斯模糊的 Demo 我们是在 OpenGL 渲染视频 Demo 的基础上在相机返回的视频帧被渲染前增加了高斯模糊的处理。

1.6K1 0

【C++】OpenGL：DDA数值微分线段算法介绍与画线示例

DDA数值微分线段算法数值微分法即DDA法(Digital Differential Analyzer)，是一种基于微分方程来生成直线的方法。...在计算机图形学中，并没有线段的概念，而是一个个像素点组成了线段。...DDA法生成线段的步骤一般如下：有了起始点（x1，y1）和终点（xn，yn）； ▲x=|xn-x1|，▲y=|yn-y1|；比较▲x和▲y的大小； steps=▲x和▲y中较大者； stepx=▲x...glutMainLoop(); return 0; } DDA画线算法的效果如下：中点画线法（简）看它位于中点的上边还是下边。...Bresenham画线算法这种画线算法的思想和中点画线的一致，只是在判断取哪个点时，不是看它位于中点的上边还是下边，而是将这两个点与直线上对应点的距离进行比较，如果du＞dl，取下面的点，反之则取上

6721 0

OpenGL (二)--OpenGL中那些晦涩难懂的名词、动词解析OpenGL (二)--OpenGL中那些晦涩难懂的名词、动词解析

OpenGL中那些晦涩难懂的名词、动词对于初次接触图形处理学，第一个难关就是要面对大量晦涩难懂的概念，而这些概念也是学习OpenGl的第一道门槛，毕竟这是歪果仁提出的概念，及时翻译过后也会有一些不好理解的地方...更加严谨的说是GPU必须提前满足OpenGL规范才可以。 OpenGL本身是规范，但是想要在具体的平台、语言下使用还是需要有对应的API实现的。所以说我们用是OpenGL的实现。...OpenGl上下文通过资料知道OpenGl上下文是一个巨大的状态机，其中保存着各种OpenGl工作所需的各种参数以及状态。...提现在图像的：位置移动、缩放、旋转、2D 3D之间的坐标转换。片元着色器可以自定义开发的着色器，可以对每一个像素点进行编程，比如说图片的锐化度、亮度、饱和度调整等。...变换矩阵在OpenGL中想要图形发生平移、缩放、旋转就需要变换矩阵进行计算。投影矩阵在OpenGL中想要3D坐标转换为2D坐标，就需要投影矩阵进行计算。

1.4K2 1

【OpenGL】窗口的创建

, 3); // 指定创建的内容必须兼容的客户端 API 版本 glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); //...指定要为其创建内容的 OpenGL 配置文件 //glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // 指定 OpenGL 内容是否应向前兼容...的函数指针，需要在调用任何 OpenGL 函数之前初始化 GLAD，我们向 GLAD 传递函数以加载特定于操作系统的 OpenGL 函数指针的地址，GLFW 为我们提供了glfwGetProcAddress...如果是这样，函数将返回并且渲染循环停止运行，之后我们可以关闭应用程序 glfwSwapBuffers 将交换在此渲染迭代期间用于渲染的颜色缓冲区（一个大型 2D 缓冲区，其中包含 GLFW 窗口中每个像素的颜色值...(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 指定要为其创建内容的 OpenGL 配置文件 //glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT

9751 0

【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

一、需求分析默认状态下 , 界面中显示一张图片 : 当鼠标移动到图片上时 , 显示如下效果 , 其中图片是逐渐放大的 , 有一个过渡 : 二、代码分析 ---- 上述盒子模型布局结构如下 , div..., 因此这里需要设置超出边界外的内容需要隐藏 , 父容器需要设置 overflow: hidden 样式 ; /* 隐藏边界之外的元素图片放大后不要超出边界 */...overflow: hidden; 放大需要一个过程 , 这里将放大操作的过渡动画时长 , 设置为 1 秒 ; div img {.../ transform: scale(1.2); } 三、代码示例 ---- 代码示例 : CSS3 2D

6713 0

【OpenGL】二十三、OpenGL 光照中的法线原理

文章目录一、法线原理二、相关资源一、法线原理 ---- 法线是红色的虚线 , 左侧的箭头是光照射的方向 , 右侧的箭头是根据法线反射的光线 , 如下图所示 : 设置法线代码 : // 绘制三角形..., 此时点是黑色的 ; 如果入射光线与法线角度大于 90 度 , 也不会产生反射 , 此时点是黑色的 ; 因此法线指向的角度不同 , 屏幕中绘制的点的颜色也是不同的 ; 法线一定程度上决定这个点是否反射光..., 也就是是否在屏幕上绘制指定的颜色值 ; 下面的球法线垂直与球平面 , 当光照从右上角方向打过来时 , 亮的地方就是法线与入射光夹角小于 90 的点 ( 正光面 ) , 黑的地方就是法线与入射光夹角大于等于...90 度的点 ( 背光面 ) ; 在可编程管线中 , 决定某个点是否在正光面还是背光面的判定方法 : 将改点与光源连线 , 计算该连线与法线的夹角 , 如果该夹角小于 90 度 , 说明该点在正光面..., 这也是模型表面呈现的颜色值 ; 二、相关资源 ---- GitHub 地址 : https://github.com/han1202012/OpenGL ( GitHub 源码始终都会随着后续博客的进度更新覆盖

1.1K0 1

现代OpenGL（一）：我的第一个OpenGL程序

在OpenGL 3.0以前的版本或者使用兼容模式的OpenGL环境，OpenGL包含一个固定管线（fixed-function pipeline），它可以在不使用着色器的环境下处理几何与像素数据。...OpenGL的可编程管线包含如下过程（下图来自OpenGL红宝书《OpenGL Programming Guide》第八版）： ?...---- OpenGL开发环境搭建说了OpenGL的基本原理，下面来看看开发现代OpenGL程序需要准备的前期开发环境。...由于SFML（Simple and Fast Multimedia Library）是使用C++编写的，我本人比较喜欢使用C++而非C语言，所以下面的示例程序会使用SFML库。...---- HelloWorld示例程序下面我们新建一个C++控制台程序，然后再新建一个cpp文件，配置好需要的SFML和GLEW库，开始编写代码。

2.9K3 0

OpenGL 的 glDrawElements 绘制方法

在之前的绘制中，我们都是通过 glDrawArrays 方法来实现的，它会按照我们传入的顶点顺序和指定的绘制方式进行绘制。...回顾一下之前提到的绘制类型：绘制类型绘制方式 GL_POINTS 将传入的顶点坐标作为单独的点绘制 GL_LINES 将传入的坐标作为单独线条绘制，ABCDEFG六个顶点，绘制AB、CD、EF三条线...然后再向渲染管线传递要绘制的顶点数据的索引，根据索引从顶点数据中取出对应的顶点，然后再按照指定的方式进行绘制。如下图所示，图片截自《OpenGL ES 3.x 游戏开发上卷》： ?...由三个三角形组成的倒置的梯形，实际上只有五个顶点 ? ，因此也只传递了五个顶点，接下来就是确定这个五个顶点的索引顺序。索引顺序和我们要绘制的方式有很大的关系，不同绘制方式的索引顺序不同。...glDrawElements 和 glDrawArrays 的对比 glDrawElements 方法的 count 的参数定义了要取多少个索引出来绘制，而且这个绘制是连续的，必须要把 count 数量的顶点绘制完

2.7K2 1

OpenGL中Framebuffer的学习

帧缓冲就是我们自己可以使用的一个缓冲，在这个缓冲里面，我们可以写入颜色、深度和模板信息（color,depthandstencil）。...为了使用这个framebuffer，必须给它附加一个texture或者renderbuffer，相当于vao和vbo的关系，framebuffer管理它的texture和renderbuffer，数据都存储在这两个上面...注意：两者是可以同时绑定的。...0为默认窗口的系统帧缓冲（GLFW创建的）。...（像素）glFramebufferTexture2D(GLenumtarget,GLenumattachment,GLenumtextarget,GLuinttexture,GLintlevel)：将2D

1851 0

Android 8款开源游戏引擎

1、Angle （2D Java） Angle是一款专为Android平台设计的，敏捷且适合快速开发的2D游戏引擎，基于OpenGLES技术开发。...该引擎全部用Java代码编写，并且可以根据自己的需要替换里面的实现，缺陷在于文档不足，而且下载的代码中仅仅包含有少量的示例教程。最低运行环境要求不详。...项目地址：http://code.google.com/p/angle/ 2、Rokon （2D Java） rokon是一款Android 2D游戏引擎，基于OpenGL ES技术开发，物理引擎为...唯一遗憾的是，该项目作者是个极其懒惰的家伙，开发文档从去年说到今年依旧没有提供，只有游戏示例可供下载。最低运行环境要求为Android 1.1。...项目地址：http://code.google.com/p/rokon/ 5、libgdx libgdx是一款基于OpenGL ES技术开发的Android游戏引擎，支持Android平台下的2D游戏开发

4.8K3 0

OpenGL ES

学习内容 OpenGL ES的基本概念 Android下3D开发的基本知识利用OpenGL ES进行2D图形的开发利用OpenGL ES进行3D图形的开发能力目标了解OpenGL...ES的基本概念了解Android下3D开发的基本知识掌握如何利用OpenGL ES进行2D图形的开发掌握如何利用OpenGL ES进行3D图形的开发本章简介游戏在Android中一个非常重要的开发方向...在接下来的两节中，我们就分别从2D及3D的角度来讲解Android中如何利用OpenGL ES绘制图形。...示例2.1 搭建OpenGL ES的基本开发框架。...图3.1.4 绘制的2D图形效果在本示例中，我们不仅讲到了基本图形（三角形、矩形）的绘制，还讲到了颜色的填充、以及图形的旋转的知识，属于一个比较综合的案例，也是我们下面绘制3D图形的基础。

8311 0

点击加载更多

canvas星空的2d绘制示例

【C++】OpenGL：键盘交互示例

【C++】OpenGL：鼠标交互示例

【C++】OpenGL：freeglut环境配置与基础示例

【C++】OpenGL：创建线段和多边形示例

OpenGL（五）-- OpenGL中矩阵的变换OpenGL（五）-- OpenGL中矩阵的变换

OpenGL (一)--基于pod的OpenGL环境配置OpenGL (一)--基于pod的OpenGL环境配置

OpenGL与OpenGL在移动端的应用

RenderDemo（2）：用 OpenGL 渲染视频丨音视频工程示例

RenderDemo（3）：用 OpenGL 实现高斯模糊丨音视频工程示例

【C++】OpenGL：DDA数值微分线段算法介绍与画线示例

OpenGL (二)--OpenGL中那些晦涩难懂的名词、动词解析OpenGL (二)--OpenGL中那些晦涩难懂的名词、动词解析

【OpenGL】窗口的创建

【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

【OpenGL】二十三、OpenGL 光照中的法线原理

现代OpenGL（一）：我的第一个OpenGL程序

OpenGL 的 glDrawElements 绘制方法

OpenGL中Framebuffer的学习

Android 8款开源游戏引擎

OpenGL ES

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐