首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WebGL简易教程(七):绘制一个矩形体

顶点索引绘制 2.2. MVP矩阵设置 2.2.1. 模型矩阵 2.2.2. 投影矩阵 2.2.3. 视图矩阵 2.2.4. MVP矩阵 3. 结果 4. 参考 1....概述 在上一篇教程《WebGL简易教程(六):第一个三维示例(使用模型视图投影变换)》中,通过使用模型视图投影变换,绘制了一组由远及近的三角形。...但是这个示例还是太简单了,这几个三角形的坐标仍然是-1到1之间的坐标,无论如何都是很容易设置参数的,可能并不能很深入的理解模型视图投影变换。 在这篇教程就更一步,绘制一个稍微复杂一点的实体——矩形体。...同样的,这个顶点索引数组也应该传递到缓冲区对象。只不过不绑定到gl.ARRAY_BUFFER上而绑定到gl.ELEMENT_ARRAY_BUFFER上。这个参数表示,该缓冲区的内容是顶点的索引值数据。...相关代码如下: // 创建缓冲区对象 var indexBuffer = gl.createBuffer(); //... // 将顶点索引写入到缓冲区对象 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER

1.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    OPengl、DirectX、OPenCV、OpenCL

    内置变量:gl_Color顶点着色器或片段着色器的主颜色 3.坐标系:   世界坐标(WC 屏幕原点)、物体坐标(MC 模型移动时坐标系不变,只是移动模型)、设备坐标(视区或视口DC)、眼坐标(z...)   glDrawArrays(绘制顶点数组)   glDrawElements(按索引数组,绘制顶点数组----两个数组)   glDrawRangeElements(按索引数组,绘制顶点数组的任意段...2D透视投影、glOrtho3D正交投影 GL_TEXTURE:纹理坐标(glEnable启用) GL_COLOR:颜色平面 4.纹理: 相关函数:   glGenTextures创建纹理对象索引...控制坐标、glTexGen纹理坐标自动生成   (纹理坐标:s\t\r\q(q缩放用)  顶点坐标:x\y\z\w) 多模型贴纹理:   需要同时控制glEnale和glDisable,保证纹理对其他绘制无影响...List绘图:glNewList 重复绘制内嵌1或2绘图方式   4.VBO、IBO、VAO对象绘图:VAO负责顶点属性(glGenVertexArrays​、glDeleteVertexArrays

    2.2K50

    WebGL简易教程(十三):帧缓存对象(离屏渲染)

    着色器切换 在示例中实际进行了两次绘制操作,分别在帧缓冲区和颜色缓冲区中绘制了一遍。因此,需要用到两组不同的着色器。但是同一时间内只能用一组着色器进行绘制工作,这里就涉及到一个着色器切换的问题。...顶点缓冲区 除此之外,顶点缓冲区的使用也有所改变。...在之前的教程《WebGL简易教程(三):绘制一个三角形(缓冲区对象)》中介绍过使用顶点缓冲区的五个步骤: 创建缓冲区对象(gl.createBuffer()) 绑定缓冲区对象(gl.bindBuffer...使用绑定的目标,将创建的纹理对象指定为帧缓冲区的颜色关联对象;函数gl.framebufferTexture2D()的定义如下: ?...将渲染缓冲区对象关联到帧缓冲区对象(gl.framebufferRenderbuffer()) 使用gl.framebufferRenderbuffer()函数将渲染缓冲区对象关联到帧缓冲区的深度关联对象

    2.8K20

    面试中经常被问到的 OpenGL ES 对象,你知道的有哪些?

    VBO 和 EBO VBO(Vertex Buffer Object)是指顶点缓冲区对象,而 EBO(Element Buffer Object)是指图元索引缓冲区对象,VBO 和 EBO 实际上是对同一类...VBO 和 EBO 的作用是在显存中提前开辟好一块内存,用于缓存顶点数据或者图元索引数据,从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝,可以改进渲染性能,降低内存带宽和功耗。...OpenGL ES 3.0 支持两类缓冲区对象:顶点数组缓冲区对象、图元索引缓冲区对象。...使用 FBO 作为渲染目标时,首先需要为 FBO 的附着添加连接对象,如颜色附着需要连接纹理或者渲染缓冲区对象的颜色缓冲区。 ?...float(u_BufferSize - 1)), 0.0), 1.0); outColor = texture(u_2d_texture, v_texCoord) * lightColor; } 绘制时如何使用缓冲区纹理和

    2.2K50

    OpenGL ES 对象

    VBO 和 EBO VBO(Vertex Buffer Object)是指顶点缓冲区对象,而 EBO(Element Buffer Object)是指图元索引缓冲区对象,VAO 和 EBO 实际上是对同一类...VBO 和 EBO 的作用是在显存中提前开辟好一块内存,用于缓存顶点数据或者图元索引数据,从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝,可以改进渲染性能,降低内存带宽和功耗。...OpenGL ES 3.0 支持两类缓冲区对象:顶点数组缓冲区对象、图元索引缓冲区对象。...使用 FBO 作为渲染目标时,首先需要为 FBO 的附着添加连接对象,如颜色附着需要连接纹理或者渲染缓冲区对象的颜色缓冲区。...float(u_BufferSize - 1)), 0.0), 1.0); outColor = texture(u_2d_texture, v_texCoord) * lightColor; } 绘制时如何使用缓冲区纹理和

    1.7K54

    熟悉 OpenGL VAO、VBO、FBO、PBO 等对象,看这一篇就够了

    VBO 和 EBO VBO(Vertex Buffer Object)是指顶点缓冲区对象,而 EBO(Element Buffer Object)是指图元索引缓冲区对象,VAO 和 EBO 实际上是对同一类...VBO 和 EBO 的作用是在显存中提前开辟好一块内存,用于缓存顶点数据或者图元索引数据,从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝,可以改进渲染性能,降低内存带宽和功耗。...OpenGL ES 3.0 支持两类缓冲区对象:顶点数组缓冲区对象、图元索引缓冲区对象。...使用 FBO 作为渲染目标时,首先需要为 FBO 的附着添加连接对象,如颜色附着需要连接纹理或者渲染缓冲区对象的颜色缓冲区。...float(u_BufferSize - 1)), 0.0), 1.0); outColor = texture(u_2d_texture, v_texCoord) * lightColor; } 绘制时如何使用缓冲区纹理和

    10.5K84

    WebGL的颜色渲染-渲染一张DEM(数字高程模型)

    详细讲解 1) 读取文件 2) 绘制函数 3) 使用缓冲区对象 4. 其他 1. 具体实例 通过WebGL,可以渲染生成DEM(数字高程模型)。...初始化顶点数组,分配到缓冲对象。 绑定鼠标键盘事件,设置模型视图投影变换矩阵。 在重绘函数中调用WebGL函数绘制。 其中最关键的步骤是第三步,初始化顶点数组initVertexBuffers()。...cx, cy, cz, fovy, u_MvpMatrix); requestAnimationFrame(tick, canvas); }; tick(); } 3) 使用缓冲区对象...在函数initVertexBuffers()中包含了使用缓冲区对象向顶点着色器传入多个顶点数据的过程: 创建缓冲区对象(gl.createBuffer()); 绑定缓冲区对象(gl.bindBuffer...最后,把顶点数据的索引值绑定到缓冲区对象,WebGL可以访问索引来间接访问顶点数据进行绘制。

    1.3K10

    WebGL简易教程(九):综合实例:地形的绘制

    地形也就是DEM(数字高程模型),是由一组网格点组成的模型,每个点都有x,y,z值;更简单来说,图像格式就可以作为DEM的载体,只不过每个图像的像素值代表的是高程的值。...gl.enableVertexAttribArray(a_Color); // 将顶点索引写入到缓冲区对象 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,...tick(); } 在函数initVertexBuffers()中,由于读取的顶点信息(保存在Terrain对象中)同样包含位置信息和定点信息,所以同样将其传递到缓冲区对象。...所以一共要绘制 (((宽 - 1) * (高 - 1) * 2)) 个三角形,顶点索引数组的长度为 (((宽 - 1) * (高 - 1) * 6)) 。...可以看到最终绘制的结果是一小块起伏的地形。所有复杂的模型都可以采用本例的办法,用足够的三角形绘制而成。当然,这个例子还有个缺点,就是显示的效果立体感不强,对地形起伏的表现不够。

    1.6K20

    WebGL简易教程(八):三维场景交互

    概述 在上一篇教程《WebGL简易教程(七):绘制一个矩形体》中,通过一个绘制矩形包围盒的实例,进一步理解了模型视图投影变换。其实,三维场景的UI交互工作正是基于模型视图投影变换的基础之上的。...gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); // 向缓冲区对象写入数据 gl.bufferData(gl.ARRAY_BUFFER...gl.enableVertexAttribArray(a_Color); // 将顶点索引写入到缓冲区对象 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,...可以使用JS的requestAnimationFrame()函数进行定时重绘刷新操作。其函数定义如下: ?...以此循环往复,页面会不停的请求调用绘制tick(),从而带到了重绘刷新的效果。 前面提到过,重绘刷新每一帧之前,都要清空颜色缓冲区和深度缓冲区,不让上一帧的效果影响到下一帧。

    1.1K20

    20分钟让你了解OpenGL ——OpenGL全流程详细解读

    值得注意的是,一般来说渲染缓冲区和纹理不能同时挂载在同一个帧缓冲区上。 5  顶点数组(VertexArray)和顶点缓冲区(VertexBuffer) 准备好了画布之后,就要开始画图了。...索引数据的目的主要是为了实现顶点的复用,在绘制图像时,总是会有一些顶点被多个图元共享,而反复对这个顶点进行运算常常是没有必要的(也有某些特殊场景需要)。...和顶点数据一样,索引数据也可以以索引数组的形式存储在内存当中,调用绘制函数时传入;或者提前分配一块显存,将索引数据存储在这块显存当中,这块显存就被称为索引缓冲区。...同样的,使用缓冲区的方式,性能一般会比直接使用索引数组的方式更加高效。 OpenGLES提供了2种主要的绘制方法:glDrawArrays和glDrawElements。...为了解决这个问题,引入了三缓冲区技术,在等待垂直同步时,来回交替渲染两个离屏的缓冲区,而垂直同步发生时,屏幕缓冲区和最近渲染完成的离屏缓冲区交换,实现充分利用硬件性能的目的。

    8.1K44

    13.1 使用DirectX9绘图引擎

    顶层对象是Direct3D对象模型的顶级结构,它为应用程序提供了一组方法来进行3D图形渲染。...可以使用LPDIRECT3DVERTEXBUFFER9对象存储,同时还可以使用其他缓冲区类型如索引缓冲区(LPDIRECT3DINDEXBUFFER9)来存储索引数据,方便后续渲染处理。...在创建LPDIRECT3DVERTEXBUFFER9对象时,需要指定缓冲区大小、缓冲区用法等参数。...使用SetStreamSource函数设置使用的顶点缓冲区,其中第1个参数是流编号,第2个参数是顶点缓冲区对象,第3个参数是缓冲区内顶点数据的起始点,第4个参数是顶点结构体的大小。...第1个参数(D3DPT_TRIANGLELIST)表示三角形列表,第2个参数是起始顶点索引,第3个参数是最小顶点索引,第4个参数是被绘制的总顶点数,第5个参数(0)表示要跳过的数据数量,第6个参数(4)

    41820

    WebGL简易教程(十五):加载gltf模型

    初始化顶点缓冲区 2.2.4. 其他 3. 结果 4. 参考 5. 相关 1. 概述 一般来说,图形渲染总是需要从磁盘数据开始,最终保存到磁盘数据中,保存这种数据的就是3D模型文件。...3D模型文件一般会把顶点、索引、纹理、材质等等信息都保存起来,方便下次直接读取。3D模型文件格式一般是与图形渲染工作强关联的,了解3D模型文件格式的组成,有助于进一步了解图形渲染的流程。...注意FileReader的读取方式都是异步读取,必须等到三个文件都读取完成,才调用onDraw()函数进行绘制。读取得到的对象也不用再多做处理,可以直接在后面的初始化步骤中使用。...byteOffset, gltfObj.bufferViews[indicesBufferViewId].byteLength / Uint16Array.BYTES_PER_ELEMENT); // 将顶点索引写入到缓冲区对象...其中,顶点数组可以通过 gl.vertexAttribPointer()函数做进一步分配,分别给着色器分配位置变量和纹理坐标变量(可以复习一下《WebGL简易教程(三):绘制一个三角形(缓冲区对象)》创建缓冲区对象的五个步骤

    4.9K20

    13.1 使用DirectX9绘图引擎

    顶层对象是Direct3D对象模型的顶级结构,它为应用程序提供了一组方法来进行3D图形渲染。...可以使用LPDIRECT3DVERTEXBUFFER9对象存储,同时还可以使用其他缓冲区类型如索引缓冲区(LPDIRECT3DINDEXBUFFER9)来存储索引数据,方便后续渲染处理。...在创建LPDIRECT3DVERTEXBUFFER9对象时,需要指定缓冲区大小、缓冲区用法等参数。...使用SetStreamSource函数设置使用的顶点缓冲区,其中第1个参数是流编号,第2个参数是顶点缓冲区对象,第3个参数是缓冲区内顶点数据的起始点,第4个参数是顶点结构体的大小。...第1个参数(D3DPT_TRIANGLELIST)表示三角形列表,第2个参数是起始顶点索引,第3个参数是最小顶点索引,第4个参数是被绘制的总顶点数,第5个参数(0)表示要跳过的数据数量,第6个参数(4)

    56840

    顶点属性、顶点数组和缓冲区对象

    缺点 是在需要修改特定属性时,将 造成顶点缓冲区跨距更新。当顶点缓冲区以缓冲区对象提供时,需要 重新加载整个顶点属性缓冲区。可以通过 将动态的顶点属性保存在单独的缓冲区 来避免这种效率低下的情况。...应用程序可以将顶点属性索引绑定到属性名称. glBindAttribLocation 命令可用于将通用顶点属性索引绑定到顶点着色器的一个属性变量,在下一次程序链接时生效。...glBindBuffer 用于指定当前缓冲区对象。第一次绑定缓冲区对象名称时,以默认状态保存,如果分配成功,则分配的对象为目标的当前缓冲区对象。...使用和不使用顶点缓冲区对象进行绘制的示例(例 6 - 5): #include "esUtil.h" #define VERTEX_POS_SIZE 3 #define VERTEX_COLOR_SIZE...esContext, 3, vertices, sizeof(GLfloat) * (VERTEX_POS_SIZE + VERTEX_COLOR_SIZE), 3, indices); } 每个属性使用一个缓冲区对象绘制

    84610

    Unity基础教程系列(新)(五)——计算着色器(Rendering One Million Cubes)

    这些点的索引要么落在缓冲区之外,要么与有效索引冲突,这会破坏我们的数据。 ? (超出边界) 只有当X和Y标识符组件都小于分辨率时,才可以通过存储它们来避免无效位置。 ?...当你不知道要在CPU端绘制多少实例,而是通过缓冲区向计算着色器提供该信息时,DrawMeshInstancedIndirect方法很有用。...现在,我们可以通过使用当前正在绘制的实例的标识符为位置缓冲区建立索引来检索点的位置。通过unity_InstanceID访问其标识符,该标识符可全局访问。 ?...然后在绘制之前在UpdateFunctionOnGPU中的材质上调用SetBuffer和SetVector。在这种情况下,我们不必为缓冲区提供内核索引。...最后,在绘制时,请使用当前分辨率的平方而不是缓冲区元素数。 ?

    4K12

    TinaLinux NPU开发

    NPU 模型转换 NPU 使用的模型是 NPU 自定义的一类模型结构,不能直接将网络训练出的模型直接导入 NPU 进行计算。这就需要将网络训练出的转换模型到 NPU 的模型上。...对所有检测到的目标框按照置信度从高到低排序; 应用非极大值抑制算法,筛选出重叠度较小的目标框,并将保留的目标框的索引存储在keep_index向量中; 遍历保留的目标框,对每个目标框进行绘制和标注; 在图像上用矩形框标出目标框的位置和大小...需要注意的是,该代码使用了OpenCV库中提供的绘制矩形框和添加文字的相关函数。...当程序接收到指定的信号时,会调用terminate函数进行处理。 具体而言,terminate函数会打印接收到的信号编号,并释放视频流捕获对象cap,然后调用exit(1)退出程序。...将plant_data设置为AWNN上下文的输入缓冲区。 运行AWNN上下文,执行模型推理。 使用detect_ssd函数对图像进行目标检测,得到检测结果的可视化图像。

    13010

    WebGL2系列之实例数组(Instanced Arrays)

    实例化数组 实例化是一种只调用一次渲染函数却能绘制出很多物体的技术,它节省渲染一个物体时从CPU到GPU的通信时间。...实例数组是这样的一个对象,使用它,可以把原来的的uniform变量转换成attribute变量,而且这个attribute变量对应的缓冲区可以被多个对象使用;这样在绘制的时候,可以减少webgl的调用次数...实例化 如果能够讲数据一次性发送给GPU,然后告诉WebGL使用一个绘制函数,绘制多个物体,就会更方便。这种技术,便是实例化技术。...然后一下代码定义四边形的顶点坐标、颜色和索引相关数据,这在WebGL1中多次使用,不在赘述: var positions = new Float32Array([ -1/count...count count个四边形的实例,需要注意的是,绘制实例的个数,不能多于attribute变量offset变量的对应的缓冲区的数据个数,前面代码offsetArray定义了countcount个数据

    1.7K30
    领券