webgl相关内容

使用 webgl 的粒子系统

对于图形课程，我们正在 WebGL 中实现粒子系统.用 JavaScript 做粒子模拟计算会很慢，我们教授要我们在 GPU 上做粒子模拟. 为了进行这个粒子模拟，我想我们上传一个包含粒子数据(位置、速度、质量等)的顶点缓冲区，然后让我的顶点着色器对模拟进行一些数学运算，并将结果写入不同的顶点缓冲区，表示粒子的下一个状态.然后我可以使用 gl.POINTS 使用不同的着色器程序来渲染我的粒子 ..

发布时间：2022-01-09 09:15:05 opengl-es webgl particle-system 其他开发

如何将模型矩阵包含到 VBO?

我想发送一个缓冲区列表(到 GPU/顶点着色器)，其中包含有关顶点位置、世界位置、颜色、比例和旋转的信息. 如果我的每个 3D 对象在矩阵中都有与变换相关的信息，我如何通过 VBO 将这个矩阵数组(除了其他顶点数据)传递给 GPU? 更新如有错别字请见谅: //绑定 &设置顶点.gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.verte ..

发布时间：2022-01-09 09:13:22 opengl opengl-es webgl vbo vertex-buffer 其他开发

为什么需要为片段着色器设置精度?

我学习 WebGL.下一个着色器工作正常: //vertex.shader//精度 mediump float;属性 vec4 a_Position;属性浮动a_PointSize；无效的主要(){gl_Position = a_Position;gl_PointSize = a_PointSize;} 和 //fragment.shader精度 mediump 浮点数；统一 vec4 u_ ..

发布时间：2022-01-09 09:11:42 opengl-es webgl shader precision 其他开发

线框着色器 - 使用共享顶点时重心坐标出现问题

我正在使用 WebGL 绘制地形.问题是我只使用 4 个顶点通过使用索引来共享顶点来绘制单个四边形.所以我不能为每个顶点上传唯一的重心坐标，因为它是共享的. 这是一张更清楚地显示问题的图片. 没有可用于问号的重心坐标.(0,1,0) 用于左上方，(0,0,1) 用于上方，(1,0,0) 用于左侧.因此，当我使用索引来保存顶点数时，我绝对无法做到这一点. 使用 4 个顶点而不是 6 ..

发布时间：2022-01-09 09:11:15 opengl-es indexing webgl 其他开发

试图理解 WebGL 中透视矩阵背后的数学

WebGL 的所有矩阵库都有某种 perspective 函数，您可以调用该函数来获取场景的透视矩阵. 例如，perspective 方法"noreferrer">mat4.js 文件是 gl-matrix 的一部分，其编码如下: mat4.perspective = function (out, fovy, aspect, near, far) {var f = 1.0/Math.tan(f ..

发布时间：2022-01-09 09:04:44 math matrix opengl-es webgl perspectivecamera 其他开发

WebGL 是如何工作的?

我希望深入了解 WebGL 的工作原理.我想在大多数人不太关心的水平上获得知识，因为这些知识对普通的 WebGL 程序员没有必要有用.例如，整个渲染系统的每个部分(浏览器、图形驱动程序等)在获取屏幕上的图像时扮演什么角色?是否每个浏览器都必须创建一个 javascript/html 引擎/环境才能在浏览器中运行 WebGL?为什么 chrome 在兼容 WebGL 方面领先于其他所有人? 那 ..

发布时间：2022-01-09 09:03:41 opengl-es webgl 其他开发

WebGL/three.js 中的 3D 纹理使用 2D 纹理解决方法?

我想为在 WebGL 中渲染的对象使用一些 3D 纹理.我目前在片段着色器中使用以下方法，如 WebGL 和 OpenGL 差异: //tex 是一个纹理，立方体的每个切片水平放置在纹理上.//texCoord 是一个 3d 纹理坐标//size 是立方体的大小，以像素为单位.vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float s ..

发布时间：2022-01-09 09:02:57 opengl-es three.js webgl fragment-shader 3d-texture 其他开发

使用 2D 和 3D 上下文的画布 3D 绘图

由于 webgl/opengl 不支持文本绘制，所以可以使用 3D 上下文绘制 3D 对象和使用 2D 上下文绘制文本? 解决方案 不，很遗憾没有. HTML 5 规范 说，如果你在已经位于不同 getContextrel="noreferrer">上下文模式且两个上下文不兼容则返回null. 不幸的是，“webgl"和“2d"画布不兼容，因此您将得到 null: var c ..

发布时间：2022-01-09 08:58:37 html opengl-es canvas webgl 前端开发

`precision mediump float`是什么意思?

在 learningwebgl 教程1中，我在片段着色器中发现了一条有趣的行. 精度 mediump float; 我找到了一篇关于它的文章 在这里，但我还是不明白是什么意思? 如果我删除这条线，什么都不会改变.一切都是一样的.那么precision mediump float是什么意思呢? 解决方案 这决定了 GPU 在计算浮点数时使用的精度.highp 是高精度的，当然比 m ..

发布时间：2022-01-09 08:57:09 javascript opengl-es webgl terminology fragment-shader 前端开发

如何在 float 和 vec4、vec3、vec2 之间转换?

这个问题和这里的问题非常相关(如何将 vec4 rgba 值转换为浮点数?). 已经有一些与此问题相关的文章或问题，但我想知道大多数文章都没有确定哪种类型的浮动值.只要我能想出，下面有一些浮点值打包/解包公式. 无符号归一化浮点数 有符号归一化浮点数 有符号范围浮点(我能找到范围限制的浮点值) 无符号范围浮点数 无符号浮点数 有符号浮点数 但是，这些实际上只是 2 个案 ..

发布时间：2022-01-09 08:56:14 opengl-es webgl glsles 其他开发

WebGL 着色器:可变变量的最大数量

来自 OpenGL ES 规范第 2.10.4 节(着色器变量:变量): 可用于处理可变变量的插值器数量由依赖于实现的常量 MAX_VARYING_VECTORS 给出. 这个值表示可以插值的四元素浮点向量的个数；声明为矩阵或数组的变量将使用多个插值器. 链接程序时，顶点着色器写入或片段着色器读取的任何可变变量都将计入此限制. 着色器访问超过 MAX_VARYING_VEC ..

发布时间：2022-01-09 08:55:59 opengl-es opengl-es-2.0 webgl 其他开发

点击放大 WebGL

我需要在 WebGL 中实现相当于“谷歌地图"风格的缩放效果.具体来说，我有一个始终垂直于相机的简单二维场景.当用户点击场景时，相机应该缩放到点击上方但更接近二维场景的位置. 例如看这个jsfiddle，它实现了场景但没有缩放: http://jsfiddle.net/JqBs8/4/ 如果您有启用 WebGL 的浏览器，您应该会在 Z 轴的 -7 处看到一个三角形和一个正方形( ..

发布时间：2022-01-09 08:55:30 opengl-es webgl 其他开发

使用 ShaderMaterial 复制 MeshLambertMaterial 会忽略纹理

我注意到 THREE.js 在内部使用着色器来创建核心材质“例如 MeshLambertMaterial"，因此我决定将 Lambert 着色器从 Three.js 代码复制到一个新的着色器中并在其上构建. 这是我得到的代码(忠实地从 Three.js r66 复制) THREE.MyShader = {制服:THREE.UniformsUtils.merge([三.UniformsLib ..

发布时间：2022-01-09 08:46:56 javascript opengl-es three.js webgl shader 前端开发

如何在 Three.js 中处理动画模型?

我有一个关于 Three.js 的基本问题.我用谷歌搜索但没有找到任何有用的东西......如何在 Three.js 中处理动画模型?我知道如何导入 .js 文件，并且我有一个从搅拌机导出为 .js 格式的动画立方体.我已经用 JSONLoader 导入了它，但是动画不会自己播放.所以这就是我的位置，我不知道怎么玩. 我已经检查了文档，但我不知道我应该使用什么...尝试了 MorphAnim ..

发布时间：2022-01-02 09:34:06 javascript animation model three.js webgl 前端开发

Three.js/GLSL - 将像素坐标转换为世界坐标

我的 Three.js 应用程序中有一个简单的着色器，它将屏幕着色为红色.但是，我想将给定世界位置右侧的所有像素着色为不同的颜色. 我看过一些 答案 建议使用改变 vec4 worldCoord = gl_ModelViewMatrix * gl_Vertex;，但由于 WebGL 使用 GLSLES，我无法使用 gl_Vertex 之类的变量. 顶点着色器 #ifdef GL_ES ..

发布时间：2021-12-31 19:00:20 three.js glsl webgl glsles 其他开发

使用 Three.js 加载 Maya 模型

我正在关注关于如何加载 Maya 的本教程使用 Three.js 的模型. 一切都很好，但教程只解释了如何加载具有一种纹理的模型. 这是教程中的源代码: function createScene(geometry, x, y, z, scale, tmap) {zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial ..

发布时间：2021-12-31 18:58:15 javascript html three.js webgl maya 前端开发

Three.js - 加载一次 JSON 模型并多次添加

是否可以一次加载一个 JSON 模型并以不同的比例、位置等将其多次添加到场景中? 如果我将 Object3D() 添加到数组中，给数组中的对象一个位置和比例，将它添加到场景中，然后重复这个过程，数组中每个对象的位置和比例都会被覆盖. 我想不出任何有效的方法，所以我希望有人能给我一个我正在努力完成的工作的例子. 这是我失败的尝试(其中之一).如果我的解释不够充分，应该让您对我正在尝 ..

发布时间：2021-12-31 18:56:22 javascript json three.js webgl 前端开发

更改 Three.js collada 对象的纹理和颜色

我最近从官方网站获得了使用 ColladaLoader.js 处理我的 collada 对象 (.dae) 的three.js 示例.现在我的问题是，如何更改加载的 collada 对象颜色属性并添加自定义纹理?我尝试添加纹理但没有运气. 这是我的代码(与原始示例略有不同): function load_model(el) {if (!Detector.webgl) Detector.ad ..

发布时间：2021-12-31 18:54:03 javascript three.js webgl textures collada 前端开发

WebGL单帧“截图"webGL的

尝试寻找类似的东西，但我没有运气.我正在尝试使用我的 webgl 图像当前状态的屏幕截图打开一个新选项卡.基本上，它是一个 3d 模型，能够更改显示的对象、这些对象的颜色和背景颜色.目前，我正在使用以下内容: var screenShot = window.open(renderer.domElement.toDataURL("image/png"), 'DNA_Screen'); 这一行成功 ..

发布时间：2021-12-31 18:52:37 three.js webgl screenshot dat.gui 其他开发

THREE.js - 广告牌顶点着色器

我需要将 THREE.Mesh 的一个实例定向为始终面向相机.我知道我可以只使用 [THREE.Mesh].lookAt() 方法，但我正在尝试更多地处理我的 GLSL 切片，并希望能够在顶点着色器中执行此操作. 我已经通读了NeHe 的广告牌教程，这对我来说很有意义.好吧，除了将这些方向向量应用于每个顶点的位之外. 我觉得我已经非常接近完成这项工作了，但就目前而言，我的顶点着色器看起 ..

发布时间：2021-12-31 18:52:07 javascript opengl-es three.js glsl webgl 前端开发