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

为什么gl.drawArrays不需要重新绑定,而gl.drawElements需要重新绑定?

gl.drawArrays和gl.drawElements是WebGL中用于绘制图形的两个函数。

gl.drawArrays函数用于根据当前绑定的顶点缓冲区对象(Vertex Buffer Object,VBO)中的顶点数据进行绘制。它通过指定绘制的图元类型和顶点数量来确定绘制的范围。绘制过程中,顶点数据会按照顺序被读取,不需要额外的索引来确定顶点的顺序。

相比之下,gl.drawElements函数需要使用索引缓冲区对象(Element Buffer Object,EBO)来确定绘制的顶点顺序。它通过指定绘制的图元类型、顶点数量和索引缓冲区对象中的索引数据来确定绘制的范围。绘制过程中,顶点数据会根据索引缓冲区中的索引来确定顶点的顺序。

由于gl.drawArrays不需要使用索引缓冲区对象,它可以直接使用当前绑定的顶点缓冲区对象中的顶点数据进行绘制,无需重新绑定。而gl.drawElements需要使用索引缓冲区对象来确定顶点的顺序,因此在绘制之前需要重新绑定正确的索引缓冲区对象。

总结起来,gl.drawArrays适用于不需要指定顶点顺序的绘制场景,而gl.drawElements适用于需要指定顶点顺序的绘制场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WebGL2系列之图元重启

比如如下代码: for (var i = 0; i < num_objects; i++) { gl.drawArrays(gl.TRIANGLES,0,count); } 我们知道,每次调用一次...gl.drawArrays或者gl.drawElements方法都是一次很高的系统开销,如果调用方法的次数很多,会导致程序的性能降低。...而且使用这个函数,仍然需要将每一个分散的图形维护一组单独的顶点坐标/纹理坐标,这个是免不了的,这些数据仍然需要分开上传,还是会消耗一定的资源。...gl.TRAINGLE_FAN,gl.LINE_STRIP,gl.LINE_LOOP的时候 ,绘制的所有点都是按照特定的顺序被连接在一起的,以形成复杂的图形,也就是说最终的图形一定是又多个相连的三角形或者线段组成,不能是由分散的三角形或者线段组成...所谓图元重启,就是当我们使用gl.drawElements方法绘制图形的时候,可以在索引数组里面指定特定的重启标志,当drawElements方法遇到重启标志的时候,就会从头开始重新绘制一个图元,比如下面的索引数组

64240

WebGL2系列之顶点数组对象

是一个扩展对象,该扩展对象的名称是OES_vertex_array_object;而在WebGL2中可以直接使用;如果你在WebGL1中已经使用过OES_vertex_array_object,那么你只需要了解在...顶点数组对象 顶点数组对象( VAO )是这样一种对象: 它封装了与顶点处理器有关的所有数据,它记录了顶点缓存区和索引缓冲区的引用,以及顶点的各种属性的布局不是实际的数据。...在之后绘制对象时候,不需要在手动来导入对象的引用和状态,VAO替你记住了它。 通过VAO可以简化缓冲区的绑定过程,即可以减少代码的调用次数,也提升了WebGL状态切换的效率。...VAO对象,这两行代码的作用是: 后面关于顶点缓冲对象的操作和状态,都会被记录到这个VAO对象中,以后绘制的时候,只需要调用gl.bindVertexArray方法,绑定该对象,就会自动使用相关的状态。...减少代码量,提高开发效率 提高绘制效率(因为减少了WebGL相关函数的调用,并且WebGL内部对VAO进行了优化) WebGL1中如何使用VAO 在WebGL1.0中VAO是通过扩展方式提供的,首先需要获取对应的扩展对象

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

    gl.drawArrays(gl.TRIANGLES, 0, amount_of_vertices); } 但是这种做法的一个缺点是:当绘制的对象的数量巨大之后,执行的效率就会变的很慢了;这是因为每一次绘制的时候...,都需要调用很多webgl 的很多方法,比如绑定VAO对象,绑定贴图,设置uniform变量,告诉GPU从哪个缓冲区区读取顶点数据,以及从哪里找到顶点属性,所有这些都会是CPU和GPU的资源消耗过多。..., count, instanceCount); gl.drawElementsInstanced(mode, count, type, offset, instanceCount); 这两个方法和 gl.drawArrays...与gl.drawElements类似,不同的是多了第四个参数 instanceCount,表示一次绘制多少个对象。...可以看出,一次绘制调用,绘制出了100个对象; 如果通过WebGL1的方式需要遍历100次绘制。因此可以看出减少了绘制的遍历。

    1.6K30

    cocos2d-js Shader系列1:cocos2d-js Shader和OpenGL ES2.0

    cocos2d的Shader也就是差不多直接跟GPU打交道了,跟Flash的Stage3D(AGAL)类似,不过没有AGAL这么恶心,不需要直接编写汇编语言。...Fragment Shader又跟Flash的pixelbender类似。 本文以cocos2d-js为例,但cocos2dx其他版本也是同理的,只是函数名略有不同而已。...4、设置shader的参数 5、每帧draw的时候,gl.drawArrays推送到GPU绘制 1、Shader语法      语法有点类似Flash的pixelbender,但是一个更完整的C程序,...this.shader.use(); this.shader.setUniformsForBuiltins(); //如果shader中使用了cocos2d默认附加的一些uniform参数,就需要每帧设置...zh-cn/library/ie/dn302460(v=vs.85).aspx                函数第一个参数:表示shader程序的第几个attribute参数 5、draw call gl.drawArrays

    2K30

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

    注意这里关于纹理坐标的计算,在《WebGL简易教程(五):图形变换(模型、视图、投影变换)》这篇教程中曾经提到过,在经过顶点着色器之后,顶点坐标会归一化到-1到1之间;纹理坐标是在0到1之间的,所以这里需要坐标变换一下...buffer.num, buffer.type, false, 0, 0); gl.enableVertexAttribArray(a_attribute); } 当然,顶点数据索引也同时分配到顶点缓冲区,需要的时候绑定缓冲区对象即可...gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); //... } 对于WebGL/OpenGL而言,任何缓冲区对象都是需要绑定到目标上...在帧缓冲区进行绘制(gl.bindFramebuffer()) 在需要在帧缓冲区绘制的时候调用绑定帧缓冲区对象,在需要在颜色缓冲区绘制的时候接触绑定。...绘制到颜色缓存 绘制到颜色缓冲区的步骤也是一致的,只不过在绘制之前需要调用gl.bindFramebuffer(gl.FRAMEBUFFER, null)解除帧缓冲区绑定,将绘制目标切换到当前的颜色缓冲区

    2.7K20

    WebGL简易教程(三):绘制一个三角形(缓冲区对象)

    之前的例子只能绘制一个点,如果需要绘制如三角形、矩形或者立方体等稍微复杂的图形,需要怎么做呢?这个时候就需要一种很方便的机制——缓冲区对象(buffer object)。...像C或者JS这样的编程语言去申请数据,总是保存在内存中——也就是说,需要把内存中的数据传输到显存,OpenGL/WebGL才能进行绘制。...,创建缓冲区之后还需要将其绑定到不同目标上,参数gl.ARRAY_BUFFER表示缓冲区对象存储的是关于顶点的数据。...其绑定函数gl.bindBuffer()的具体说明如下: ?...4) 基本图形绘制 与前两篇教程中绘制点不同,这里绘制的是一个三角形: // 绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, 3); 可以看到这里同样是用的函数gl.drawArrays

    95540

    WebGL: 从 2D 开始

    它利用图形硬件( GPU )加速绘制,而且直接在浏览器( 浏览器的支持情况 )中运行不需要额外的插件支持。...WebGL的绘制代码相对于canvas 2d来说会显得非常复杂,比如绘制一个矩形,canva 2d只需要不超过20行代码即可,利用WebGL的话,也许会写出将近200行。...WebGL是一种即时模式API,每一帧都需要完全重新绘制,WebGL没有提供能保存绘制物体状态的API,所以需要代码自己提供对绘制物体状态的保存。...片段可以先理解为一个像素,但是在逐片段绘制阶段会因为深度、融合等过程丢弃一些片段,所以webgl中的片段和像素还是有区别的。...在WebGL中有两个方法绘制缓冲数据: drawArrays 要使用drawArrays方法,需要将buffer对象(由createBuffer方法创建)绑定到ARRAY_BUFFER上,然后把数据写入到

    4.9K10

    【愚公系列】2023年08月 WEBGL专题-canvas和webgl的区别 | 技术创作特训营第一期

    (gl.TRIANGLE_FAN, 0, 4);gl.drawArrays(gl.TRIANGLE_FAN, 4, 4);gl.drawArrays(gl.TRIANGLES, 8, 36);requestAnimationFrame...我们使用getAttribLocation函数获取了coordinates和color属性,在后面的代码中使用它们来绑定缓冲区数据。...它可以在浏览器中直接使用,不需要安装额外的插件或软件。WebGL2的主要作用包括:支持更先进的图形效果和更高的图形性能,可以渲染比WebGL1更复杂的场景。...在创建顶点缓冲区、绑定其位置属性和绘制之前,我们还需要清除画布并设置背景颜色。最后一行代码使用 gl.drawArrays() 函数绘制了三角形。...但是,WebGL需要开发者有更深入的计算机图形学和数学知识,因此对初学者来说可能会比较困难。因此,对于初学者来说,需要根据自己的需求和技术水平来选择使用Canvas还是WebGL。

    60531

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

    indexBuffer) { console.log('Failed to create the buffer object'); return -1; } // 将缓冲区对象绑定到目标...顶点索引绘制 如果通过前面的知识进行绘制一个矩形体,一个矩形有6个面,每个面有2个三角形,每个三角形有3个点,也就意味着需要定义36个顶点。...但是我们知道一个矩形体只需要有8个顶点就可以了,定义36个顶点意味着内存和显存的浪费。为了解决这个问题,WebGL提供了通过顶点索引进行绘制的方法:gl.drawElements()。...只不过不绑定到gl.ARRAY_BUFFER上绑定到gl.ELEMENT_ARRAY_BUFFER上。这个参数表示,该缓冲区的内容是顶点的索引值数据。...()函数绘制出来: // 绘制矩形体 gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); 通过顶点索引的方式绘制三维物体,能够很明显的节约内存和显存的开销

    1.7K30

    Hooks与事件绑定

    等Hooks来管理组件状态和副作用,在处理事件绑定的时候,我们也只需要将定义的事件处理函数传入JSX就好了,也不需要this也不需要bind。...其实类比来看,类组件类似于引入了this和bind的心智负担,Hooks解决了类组件的心智负担,又引入了新的心智负担,但是其实换个角度来看,所谓的心智负担也只是需要接受的新知识而已,我们需要了解React...DOM事件的话,就不需要像DOM2事件流模型一样还得保持原来的处理函数引用才能进行卸载操作,否则是卸载不了的,如果不能保持引用的地址是相同的,那就会造成无限的绑定,进而造成内存泄漏,如果是DOM0的话,...我们只需要覆盖即可,不需要去保持之前的函数引用。...那么为什么会出现这个情况呢,其实这就是所谓的React Hooks闭包陷阱了,其实我们上边也说了为什么会发生这个问题,我们再重新看一下,Hooks实际上无非就是个函数,React通过内置的use为函数赋予了特殊的意义

    1.9K30

    几个简单的小例子手把手带你入门webgl

    然后今天他就来了, 废话不多说,读完今天的这篇文章你可以学到以下几点: 为什么需要有shader ? shader的作用是什么???? shader 中的每个参数到底是什么意思??怎么去用???...,「直到bindBuffer绑定另一个当前缓冲区」。...gl.STATIC_DRAW) 因为「JavaScript与WebGL通信必须是二进制的」,不能是传统的文本格式,所以这里使用了ArrayBuffer对象将数据转化为二进制,因为顶点数据是浮点数,精度不需要太高...首先我们需要启用对应属性 gl.enableVertexAttribArray(aposlocation) 最后是从缓冲中读取数据绑定给被激活的「aposlocation」的位置 gl.vertexAttribPointer...} ` 这里有一个小知识 , gl_Position 他的值范围是 「-1 -1」 但是片元着色 他是颜色 他的范围是 「0 - 1」 , 所以呢这时候呢,我们就要 做一个范围转换 所以为什么

    1.3K21

    基于滑动场景解析RecyclerView的回收复用机制原理

    ,但有时一行的5个卡位只有3个卡位需要重新绑定数据,有时却又5个卡位都需要重新绑定数据,这是为什么呢?...Q2: 在这个过程中,为什么当 RecyclerView 再次向上滑动重新显示第一行的5个卡位时,只有后面3个卡位触发了 onBindViewHolder() 方法,重新绑定数据呢?...,至于2、3、4卡位则去 ViewPool 里找,刚好 ViewPool 里缓存着3个 ViewHolder,所以第一行的5个卡位都是用的复用的,从 ViewPool 里拿的复用需要重新绑定数据,才会这样只有三个卡位需要重新绑定数据...,有时却又5个卡位都需要重新绑定数据,这是为什么呢?...至于为什么会创建了17个 ViewHolder,那是因为再第四行的卡位要显示出来时,ViewPool 里只有3个缓存,第四行的卡位又用不了 mCachedViews 里的2个缓存,因为这两个缓存的是

    2.9K60

    抢占系统调用执行时间过长的goroutine(22)

    表示其它所有的p都已经与工作线程绑定且正忙于执行go代码,这说明系统比较繁忙,所以需要抢占当前正处于系统调用之中实际上系统调用并不需要的这个p并把它分配给其它工作线程去调度其它goroutine。...这里有几个问题需要澄清一下: 有sysmon监控线程来抢占剥夺,为什么这里还需要主动解除m和p之间的绑定关系呢?...原因主要在于这里主动解除m和p的绑定关系之后,sysmon线程就不需要通过加锁或cas操作来修改m.p成员从而解除m和p之间的关系; 为什么要记录工作线程进入系统调用之前所绑定的p呢?...因为记录下来可以让工作线程从系统调用返回之后快速找到一个可能可用的p,不需要加锁从sched的pidle全局队列中去寻找空闲的p。...为什么要把进入系统调用之前所绑定的p搬到m的oldp中,不是直接使用m的p成员?

    1.4K30

    WebGL简易教程(四):颜色

    那么,如果这些数据(与顶点相关的数据,如法向量、颜色等)需要继续传送到片元着色器该怎么办呢? 例如这里给三角形的每个顶点赋予不同的颜色,绘制一个彩色的三角形。...这个时候就需要用到之前(《WebGL简易教程(二):向着色器传输数据》)介绍过的varying变量了。 2....第一次传送位置数据的时候是从初始位置开始的,所以offset是0;第二次传送颜色数据的时候需要偏移第一个位置数据,所以offfset是2(size)。...理解 1) 图形装配和光栅化 更进一步思考下,这里虽然给每个顶点赋予的颜色值,但是为什么三角形的表面都赋予了颜色,并且是平滑过渡的效果呢?...图形装配的输入数据就是顶点着色器中gl_Position得到的值,由gl.drawArrays()中第一个参数值来确定装配成什么样的图元。

    90320

    聊聊我对现代前端框架的认知

    事实上在早几年是没有这个问题的,我们不需要选择,那时候我们写前端就是jQuery一把梭,就是干,干就完了。 ? 那为什么现在人们需要选择各种框架了呢?...大家肯定都明白如果我们只写一个纯展示信息的页面,没有任何交互功能的页面,其实即便是现在,我们也是不需要选择框架的,我们只需要写几行CSS和HTML就可以完成任务。...是为了局部更新视图,换句话说是为了局部重新渲染。 jQuery是命令式的操作DOM,命令式的局部更新视图,现代主流框架Vue,React,Angular等都是声明式的,声明式的局部更新视图。...jQuery是两个行为,状态+DOM操作。 所以声明式为什么可以简化维护应用代码的复杂度? 因为它让我们可以把关注点只放在状态的维护上。...现代前端框架对渲染的处理 当应用在运行时,内部状态会不断的发生变化,这时用户页面的某个局部区域需要不停的重新渲染。 如何重新渲染?

    75720

    精读《SolidJS》

    为什么要介绍 SolidJS 不是其他前端框架?...这个设计自然也不依赖渲染函数执行多次,同时因为使用了依赖收集,也不需要手动申明 deps 数组,也完全可以将 createSignal 写在条件分支之后,因为不存在执行顺序的概念。...初始化逻辑:将变量插入模板;更新状态逻辑:由于 insert(_el, count) 时已经将 count 与 _el 绑定了,下次调用 setCount() 时,只需要绑定的 _el 为了更完整的实现该功能...因为最后一个变量插入直接放在 _el 末尾就行了,中间插入位置需要 insert(_el, count, _el 精读 SolidJS 的神秘面纱已经解开了,下面笔者自问自答一些问题。... SolidJS 本身渲染函数仅执行一次,所以不存在 React 重新执行函数体的场景, createSignal 本身又只是创建一个变量,createEffect 也只是创建一个监听,逻辑都在回调函数内部处理

    1.6K10

    【愚公系列】2023年03月 其他-Web前端基础面试题(VUE专项_58道)

    $route.params接受 11、query传参和params传参有什么区别 1.params传参可以提前在路由离定义好成为路由的一部分query不需要 2.params传参或存在参数刷新丢失的情况....prevent 阻止当前事件的默认行为 .self 事件绑定的元素本身触发时才触发回调 .once 绑定的事件只会被触发一次 21、v-for 为什么需要绑定Key 当Vue用 v-for...单页面的优点是用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的专场动画)。...不需要你手动存取 storage,而是直接将状态保存至 cookie 或者 localStorage中。 或使用pinia解决 45、Vuex 为什么要分模块并且加命名空间?...2、inserted:被绑定元素插入父节点时调用。 3、update:被绑定元素所在的模板更新时调用,不论绑定值是否变化。通过比较前后的绑定值。

    7.2K20

    React 新特性 React Hooks 的使用

    一般来说,在函数退出后变量就会”消失”, state 中的变量会被React保留。 useState需要哪些参数? useState() 方法里面唯一的参数就是初始state。...不同于class的是,我们可以按照需要使用数字或字符串对其进行赋值,不一定是对象。在示例中,只需使用数字来记录用户点击次数,所以我们传了0作为变量的初始 state。...> this.setState({ count: this.state.count + 1 })}> Click me 在函数中,已经有了setCount和count变量,所以不需要...我们不需要特殊的 API 来读取它,它已经保存在函数作用域中。Hook使用了JavaScript的闭包机制,不用在JavaScript已经提供了解决方案的情况下,还引入特定的React API。...componentWillUnmount只会在组件被销毁前执行一次而已,useEffect里的函数,每次组件渲染后都会执行一遍,包括副作用函数返回的这个清理函数也会重新执行一遍。

    1.3K20

    一文弄懂React 16.8 新特性React Hooks的使用

    一般来说,在函数退出后变量就会”消失”, state 中的变量会被React保留。 useState需要哪些参数? useState() 方法里面唯一的参数就是初始state。...不同于class的是,我们可以按照需要使用数字或字符串对其进行赋值,不一定是对象。在示例中,只需使用数字来记录用户点击次数,所以我们传了 0 作为变量的初始 state。...> this.setState({ count: this.state.count + 1 })}> Click me 在函数中,已经有了setCount和count变量,所以不需要...我们不需要特殊的 API 来读取它,它已经保存在函数作用域中。Hook使用了JavaScript的闭包机制,不用在JavaScript已经提供了解决方案的情况下,还引入特定的React API。...componentWillUnmount只会在组件被销毁前执行一次而已,useEffect里的函数,每次组件渲染后都会执行一遍,包括副作用函数返回的这个清理函数也会重新执行一遍。

    1.7K20
    领券