草庐IT

webgl_interactive_voxelpainter

全部标签

WebGL 及其在 WebRTC 中的应用

摘要:了解WebGL的基础概念并进行实践,更好的理解不同框架带来的便捷及优势。文|WebSDK开发团队  前言 1、什么是WebGL? WebGL的全称是WebGraphicsLibrary,是一种3D绘图协议。 WebGL允许把JavaScript和OpenGLES2.0结合在一起,通过增加OpenGLES2.0的一个JavaScript绑定,WebGL可以为HTML5Canvas提供硬件3D加速渲染。Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型,还能创建复杂的导航和数据视觉化。  2、OpenGL与GLSL 在了解WebGL之前,我们需了解下什么是OpenGL与G

webgl 系列 —— 初识 WebGL

其他章节请看:webgl系列初识WebGL什么是WebGLwebgl在支持canvas的浏览器中进行2d或3d渲染。webgl程序除了有Html、javascript,还需要加入着色器语言(GLSLES)。WebGL使得网页在支持HTML标签的浏览器中,不需要使用任何插件,便可以使用基于OpenGLES2.0的API在canvas中进行3D渲染——MDNWebGL教程通过caniuse得知webgl(98.15%)和webgl2.0(94.12%)的支持情况。请看下图:Tip:个人计算机上,绘制三维最广泛使用的技术有Direct3D和OpenGL,前者是微软的,后者是开源免费的。OpenGL有

webgl 系列 —— 初识 WebGL

其他章节请看:webgl系列初识WebGL什么是WebGLwebgl在支持canvas的浏览器中进行2d或3d渲染。webgl程序除了有Html、javascript,还需要加入着色器语言(GLSLES)。WebGL使得网页在支持HTML标签的浏览器中,不需要使用任何插件,便可以使用基于OpenGLES2.0的API在canvas中进行3D渲染——MDNWebGL教程通过caniuse得知webgl(98.15%)和webgl2.0(94.12%)的支持情况。请看下图:Tip:个人计算机上,绘制三维最广泛使用的技术有Direct3D和OpenGL,前者是微软的,后者是开源免费的。OpenGL有

webgl 系列 —— 绘制一个点(版本2、版本3、版本4、版本5)

其他章节请看:webgl系列绘制一个点我们初步认识了webgl,本篇主要围绕绘制一个点的示例,逐步实现下面功能:点的位置从js传入着色器点的大小由js传入着色器通过鼠标点击绘点通过鼠标点击绘点,并改变点的颜色绘制一个点(版本2)需求在上篇中我们在canvas中心绘制了一个点(效果如下),但这点的位置是直接写在顶点着色器中gl_Position=vec4(0.0,0.0,0.0,1.0);。需求:点的位置从js传入着色器思路将位置信息从js传入着色器有两种方式:attribute变量、uniform变量attribute-传输的是那些与顶点相关的数据uniform-传输的是那些对于所有顶点都相同

webgl 系列 —— 绘制一个点(版本2、版本3、版本4、版本5)

其他章节请看:webgl系列绘制一个点我们初步认识了webgl,本篇主要围绕绘制一个点的示例,逐步实现下面功能:点的位置从js传入着色器点的大小由js传入着色器通过鼠标点击绘点通过鼠标点击绘点,并改变点的颜色绘制一个点(版本2)需求在上篇中我们在canvas中心绘制了一个点(效果如下),但这点的位置是直接写在顶点着色器中gl_Position=vec4(0.0,0.0,0.0,1.0);。需求:点的位置从js传入着色器思路将位置信息从js传入着色器有两种方式:attribute变量、uniform变量attribute-传输的是那些与顶点相关的数据uniform-传输的是那些对于所有顶点都相同

webgl 系列 —— 三角形

其他章节请看:webgl系列三角形有人说三维模型的基本单元是三角形。比如复杂的游戏角色,也只是用许多三角形画出来的。不管上述说法是否属实,本篇先把三角形画出来。如何绘制一个三角形鼠标点击绘点示例我们写了这样的代码:points.forEach(item=>{gl.vertexAttrib3f(a_Position,item.x,item.y,0.0);gl.drawArrays(gl.POINTS,0,1);})这种方法一次只能绘制一个点。比如需要绘制一个三角形,应该是一个连贯的动作。比如在顶点着色器中一次性画三个点,然后用线连接;而不是绘制一个点,在绘制一个点,在绘制一个点...,不应该是零

webgl 系列 —— 三角形

其他章节请看:webgl系列三角形有人说三维模型的基本单元是三角形。比如复杂的游戏角色,也只是用许多三角形画出来的。不管上述说法是否属实,本篇先把三角形画出来。如何绘制一个三角形鼠标点击绘点示例我们写了这样的代码:points.forEach(item=>{gl.vertexAttrib3f(a_Position,item.x,item.y,0.0);gl.drawArrays(gl.POINTS,0,1);})这种方法一次只能绘制一个点。比如需要绘制一个三角形,应该是一个连贯的动作。比如在顶点着色器中一次性画三个点,然后用线连接;而不是绘制一个点,在绘制一个点,在绘制一个点...,不应该是零

【Oculus Interaction SDK】(五)设置不同的抓握手势

前言前段时间Oculus的SDK频繁更新,很多已有的教程都不再适用于现在的版本了。本系列文章的主要目的是记录现版本常见功能的实现方法,便于自己后续开发。当然,不排除我文章刚写完SDK又变了的可能性,所以如果有人发现文章的内容已经不适用于新版本了,也可以留评论或者私信我,我会持续更新文章内容。当前适用版本:Unity版本:2021.3.7f1c1OculusInteractionSDK版本:47.0文章最近更新日期:2023.02.09 设置不同的抓握手势之前在玩ALEX的时候,发现从不同的方向拿起同一件物品时会有不同的抓握手势,这种新奇的交互感受让我的游戏体验大幅提升。现在,使用新版本的SDK

【Oculus Interaction SDK】(五)设置不同的抓握手势

前言前段时间Oculus的SDK频繁更新,很多已有的教程都不再适用于现在的版本了。本系列文章的主要目的是记录现版本常见功能的实现方法,便于自己后续开发。当然,不排除我文章刚写完SDK又变了的可能性,所以如果有人发现文章的内容已经不适用于新版本了,也可以留评论或者私信我,我会持续更新文章内容。当前适用版本:Unity版本:2021.3.7f1c1OculusInteractionSDK版本:47.0文章最近更新日期:2023.02.09 设置不同的抓握手势之前在玩ALEX的时候,发现从不同的方向拿起同一件物品时会有不同的抓握手势,这种新奇的交互感受让我的游戏体验大幅提升。现在,使用新版本的SDK

【Oculus Interaction SDK】(六)实体按钮 & 按压交互

前言前段时间Oculus的SDK频繁更新,很多已有的教程都不再适用于现在的版本了。本系列文章的主要目的是记录现版本常见功能的实现方法,便于自己后续开发。当然,不排除我文章刚写完SDK又变了的可能性,所以如果有人发现文章的内容已经不适用于新版本了,也可以留评论或者私信我,我会持续更新文章内容。当前适用版本:Unity版本:2021.3.7f1c1OculusInteractionSDK版本:47.0文章最近更新日期:2023.02.10 添加按压交互交互器实现按压交互需要在控制器和手的交互器列表中添加对应的PokeInteractor我们使用的OculusInteractionSampleRig