用OpenGL绘制图像
如何用openGL/opentk(来自无人机的视频)绘制映射(gmap.net) 我的问题是如何在地图上绘制视频图像,因为可以在地图上以不同的角度查看视频,并且图像应该在地图上梯形而不是四尖? 我从其他问题中复制了图像...当前我的代码bellow绘制四边形,但在四边形中,我看到了2个三角形,它们不相等. 当前代码: public override void OnRender() { if (!backgroundColor.HasValue) backgroundColor = new Pen(Fill).Color; GL.Color4(backgroundColor.Value); lock (bitmapSync) { if (bitmap != null) createTexture(); } GL.Enable(EnableCap.Texture2D)
0 2024-04-17
编程技术问答社区
我必须为每个webgl程序创建单独的缓冲区吗?
如果我有两个程序,我必须创建单独的WebGlbuffers还是可以在每个程序中使用相同的程序? this.program = gl.createProgram(); gl.attachShader(this.program, vs); gl.attachShader(this.program, fs); gl.linkProgram(this.program); //gl.useProgram(this.program); this.cellProgram = gl.createProgram(); gl.attachShader(this.cellProgram, cvs); gl.attachShader(this.cellProgram, cfs); gl.linkProgram(this.cellProgram); //gl.useProgram(this.cellProgram);
0 2024-04-04
编程技术问答社区
在WebGL中绘制多个模型
问题约束: 我不使用三个或类似,而是纯WebGl WebGl 2也不是一个选项 我有几个型号已加载为Vertices和Normals数组(来自STL读取器). 到目前为止,两个型号的尺寸都没有问题.每当我加载2个不同的模型时,浏览器中会显示一个错误消息: WebGL: INVALID_OPERATION: drawArrays: attempt to access out of bounds arrays所以我怀疑我没有正确操纵多个缓冲区. 使用以下打字稿方法加载模型: public AddModel(model: Model) { this.models.push(model); model.VertexBuffer = this.gl.createBuffer(); model.NormalsBuffer = this.gl.createBuffe
2 2024-04-04
编程技术问答社区
WebGL;实例渲染--设置除数
我正在尝试使用Intanced Rendering(ANGLE_instanced_arrays)在WebGL中绘制很多立方体. 但是,我似乎无法围绕如何设置除数.我有以下缓冲区; 36个顶点(用3个三角形使用3个顶点制成6个面孔). 每个立方体6种颜色(每张面1颜色). 1个翻译每个立方体. 重用每个立方体的顶点;我将其设置为0. 对于颜色,我将除数设置为2(即使用相同的颜色作为两个三角形 - 一个脸). 对于翻译,我将除数设置为12(即相同的翻译为6个面 * 2个面孔的三角形). 我打电话给渲染 ext_angle.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 36, num_cubes); 但是,这似乎并没有使我的立方体呈现. 使用翻译分隔1的方法,但颜色却遥不可及,立方体是单个纯色. 我认为这是因为我的实例现在是完整的立方体,但是如果我限制了count(即每个实例的顶点),我似乎并没有通过顶点缓冲区一
2 2024-04-04
编程技术问答社区
使用WebGL API进行数学
标题说明了一切,但我的问题是,这是可以在浏览器中使用WebGL API(例如Google Chrome)来解决一些数学问题吗? 假设我想使用WebGL API乘以两个数字,这通常是可能的,如果是,我该怎么做? 请原谅我没有分享任何代码,因为我没有提出任何答案. 解决方案 仅乘以2个数字是您在WebGL中要做的事情.只需乘以2个数字即可进行50-70的设置调用. 如果您想将200万个数字乘以200万个数字,那么这更适合WebGL.有很多使用GPU进行数学的例子.首先,GPU所做的就是数学.恰好是,最常见的数学人要求它做的是渲染3D或2D图形. 您需要搜索的术语是 gpgpu . 弄清楚如何调整解决方案以拟合 GPU的工作原理. WebGL从纹理读取数据并将数据写入纹理的基本点.什么是纹理?它们实际上只是2D值的值.因此,您将数据放入那些2D数组(纹理)中,使用WebGL从这些2D数组(纹理)中读取数据,然后将数据写入其他2D数组(纹理).
2 2024-04-03
编程技术问答社区
是否可以使用WebGL的最大纹理尺寸?
我正在研究一个较高分辨率总是更好的应用程序. ,但我遇到了WebGL max_texture_size问题.我创建了一个大小的图像,正好是此维度(我的笔记本电脑上的16384x16384)和WebGl崩溃的图像: gl_invalid_enum:glbindframebuffer:target是gl_read_framebuffer_angle gl_invalid_enum:glbindframebuffer:target是gl_read_framebuffer_angle webGl:context_lost_webgl:losecontext:上下文丢失 当我尝试使用最大值的0.75时,也会发生同样的情况.仅在最大分辨率的一半工作起作用,但这意味着我的图形内存中只有1/4的像素! 所以我的问题是是否可以使用最大纹理大小,如果没有,那么如何找到最大的纹理WebGL可以吃?我发现有关此在线的很少的文档(如果有). 以防万一,这是我绑定纹理的方式: g
2 2024-04-03
编程技术问答社区
webgl边框颜色着色器
如何编写着着色器以绘制纯色的多边形,它的边框是不同的. 基本上,我有3D中的六角形地图,如果用户要求,我需要能够用黑色边框概述每个六角形.如果我可以控制边界宽度,也会很好. 谢谢. 解决方案 从我的头顶上方,一种方法是在中心用第7个顶点创建一个六角形 1---2 /\ /\ / \ / \ 6----0----3 \ / \ / \/ \/ 5---4 添加纹理坐标,其中点0具有UV = {0,0},而点1、2、3、4、5、6具有UV坐标{0、1}. 然后让您的着色器选择基于v的颜色 顶点着色器 attribute vec2 a_texCoord; varying vec2 v_texCoord; ... void main() { ... v_texCoord = a_texCoord; // pass texcoord to fragment shader } 碎片着色器 ..
2 2024-04-02
编程技术问答社区
我如何告诉frag-shader在外部生成的3D文件的每个顶点使用哪种纹理(以前加载的许多纹理)?
我试图找出将纹理3D模型加载到我的WebGL应用程序中的最佳方法,但我对此有一些麻烦.我的3D型号具有1个以上的纹理,我不知道如何告诉着色器每个顶点使用哪种纹理,因为我到目前为止所研究的3D文件似乎还没有包含在此信息中. 我举一个例子:我为搅拌机中的皮革座椅/垫子建模了木椅.我应该出口哪种格式,以使提取椅子易于提取: - Vertice位置; - 面部/索引信息定义哪个顶点属于每个脸部. - 紫外线坐标; - 正常 - 纹理文件名称/位置. - 每个顶点使用哪种纹理. 我假设一旦我在JS中有顶点textureid对,我可以将其作为属性(基于每个vertex)传递给着色器,让它知道该特定顶点要使用的纹理一次),但我不知道该如何开始这些信息. 到目前为止,我在Web上找到的所有文章,Howtos和教程仅具有1个纹理.我还注意到三分似乎已经解决了这个问题,但是我有点想直接在WebGL上使用它,然后再进入这些库之一(例如Thrim.Js,Glge,caste.sj,spider.sj
2 2024-04-01
编程技术问答社区
在场景中定位儿童对象(汽车<->车轮层次)。
我需要将汽车型号添加到场景中,将车轮作为分离的对象,以便易于旋转和可能更换.问题是车轮定位 - 它们需要在与汽车车身有关的确切位置.如何以正确的方式进行?在WebGL演示和触发中,有现有的车轮位置 - 它们是3D场景的预定义 - 但是如何?这些位置可以以某种方式映射到搅拌器模型坐标吗? 我试图将一个轮子与身体分开,将枢轴点设置为中心,节省坐标并将车轮网格添加到三个.JS场景中施加搅拌器位置(当然是缩放) - 但是比例似乎不匹配. 我找到了带有层次结构导入的OBJLOADER,但它是非核心三. 谢谢. 解决方案 您可以尝试将所有汽车元素放在不同的THREE.Object3D中: 汽车模型 左前轮 右前轮 左后轮 左后轮 通过将每个元素添加到新THREE.Object3D中,您将为每个元素获得一个新的枢轴点(它将简化进一步的移动和旋转命令).您必须记住要根据其父级设置正确的元素位置(THREE.Object3D). 然后,您只需将2
2 2024-04-01
编程技术问答社区
Three.js导出的Blender模型中的材料不工作
我正在尝试使用用搅拌机创建的三个模型.JS模型非常基本,两个立方体彼此之间.一个立方体是红色的,另一个是绿色的. 我已经使用搅拌机出口商插件导出了模型. loader.load("model.js", function ( geometry, material ) { material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } ); mesh = new THREE.Mesh( geometry, material); scene.add(mesh); animate(); }); 没有任何问题,如 > 但是,当我删除该行时: material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } ); 使用模型的材料.产生三个错误的错误: TypeError:程序不确定[打破此错误] p_unifo
2 2024-04-01
编程技术问答社区
Morph Targets Three.js
我正在尝试开始使用变形目标和三个.但是,似乎没有太多关于此主题的文档. 当我看源代码时,morphTargetInfluences[]似乎是魔术. 这是如何工作的?我该如何使用?价值是1个全强度吗?我如何区分同一模型上的不同变体目标? 我只是想了解morphTargetInfluences[] 预先感谢 解决方案 变形目标是它们之间自动插值的几何顶点位置集.您可以使用用morphTargetInfluences[0], morphTargetInfluences[1], morphTargetInfluences[nSet]编写的不同顶点位置实时更改几何外观.您可以同时混合许多几何形状的外观(morphtargetinflence).最好的方法是JSONLOADER格式,WCHICH您可以从3DSMAX导出:frame0 as morphTargetInfluences[0],frame1 as morphTargetInfluences[1],ect.
2 2024-04-01
编程技术问答社区
从Blender导出一个带有纹理的简单模型到three.js中
注意:我想避免在JavaScript代码中修改模型,并在Blender内部进行所有模型设计. 注释#2:虽然这个问题很长,但实际上是一个基本问题(标题说明了一切).以下是问题的"步行". 我正在尝试将搅拌机模型导出到 trixjs.org 作为DAE模型,但对具有纹理的模型有问题(我尝试过JSON和OBJ+MTL格式): 使事情变得更简单,以下是我执行的步骤(并且失败)将纹理添加到包含多维数据集,相机和光的简单"启动文件"中: 选择立方体 在材料面板中,请确保选择该立方体的默认材料. 在纹理中面板,确保选择" Tex"(材料的默认纹理). 对于此纹理,设置类型 to"图像或电影" 在面板的图像部分中,打开一个grass1.jpg(512x512图像)作为纹理. 在映射部分中,将坐标更改为uv. 将模型导出为 Collada 模型,检查"包括紫外线纹理","包括材料纹理"和"复制"复选框. 您可以然后,我使用以下代码加载DAE模型,但是我遇到了此错误
14 2024-04-01
编程技术问答社区
在GLSL中转换intBitsToFloat,在Javascript中转换floatBitsToInt
我正在尝试使用intBitsToFloat(我使用的是Highp Output Float Vector)将GLSL 3.3阴暗器中的整数标识符编码为浮点输出,然后我使用readPixels将此值将其获取到pixelData = new Float32Array(4)中.然后,我使用floatToIntBits(pixelData[0])将其解码为INT,其中 var int8 = new Int8Array(4) var int32 = new Int32Array(int8.buffer, 0, 1) var float32 = new Float32Array(int8.buffer, 0, 1) var floatToIntBits = function (f) { float32[0] = f return int32[0] } 现在我有一个非常奇怪的结果.即,当我: 在glsl中编码一个范围[0,2^23-1]的值,我总是在js
4 2024-03-31
编程技术问答社区
如何像sketchfab那样在WebGL中绘制全屏背景图?
我知道如何绘制模型,但我不知道如何绘制全屏背景图像. 我认为我应该在相机的Zfar上画它.但是我不知道如何计算其大小... 在SketchFab中,似乎背景图像可以实现CSS属性background-size: cover.我注意到SketchFab不会由CSS实施. 我真的很想知道如何实施! 解决方案 如何在WebGl中绘制全屏背景图像,例如样式background-size: cover? 创建一个简单的着色器,该着色器绘制纹理,没有任何转换: 顶点着色器: precision mediump float; attribute vec2 inPos; varying vec2 vertPos; void main() { vertPos = inPos; gl_Position = vec4( inPos, 0.0, 1.0 ); } 碎片着色器: precision mediump float
6 2024-03-27
编程技术问答社区
WebGL - 使用网格作为背景图像的掩码
我有以下问题要解决的问题: 想象一下相机前的网眼.网格实际上并没有被阴影,而是它的"剪影"总体上是用来揭示背景图像作为某种掩码或模板的背景图像.所以例如您将拥有一个带有白色背景的输出图像,并且带有纹理/图像的轮廓形状是该位置的背景. (我想要使用的网格显然比球体更复杂)) 实现这种效果的最佳方法是什么?我考虑过要么从相机的角度将背景纹理投影到网格上的一种投影映射.还是也许是模具缓冲区的路?从我阅读的内容来看,此时的支持还不高.也许还有一种更简单的方法来解决我错过的这个问题? 解决方案 有很多方法可以做到这一点,这对您来说是最好的. 使用模板缓冲区 将网格绘制到模板缓冲区中,然后用模板测试集绘制图像,因此仅在绘制网格的地方绘制 var geoVS = ` attribute vec4 position; uniform mat4 matrix; void main() { gl_Position = matrix * positi
2 2024-03-26
编程技术问答社区
Three.js可以作为网站的背景吗?
我一直在考虑在网站上使用三分js进行有趣的实验.我想使用当前的实验(我已经有代码)并将其用作我网站的背景. 有人知道该怎么做吗? 我在这里看到了: http://janjorissen.be/ 三个JS API: https://github.com/mrdoob/three. JS/Wiki/Api Reference 解决方案 通常我为此使用iframe.因此,您与基本页面没有冲突. iframe { z-index : -9999; position: absolute; top : 0; left : 0; width : 100%; height : 100%; margin : 0; padding : 0; } 一个例子 http://je
2 2024-03-26
编程技术问答社区
Three.js在Azure中加载.OBJ时出错,但在本地没有。
我正在使用three.js for webgl加载.obj 但是我在Windows Azure运行Windows Server中加载.obj时有问题 我使用Google Chrome浏览器,并在下面给出错误: 获取 404(找不到) 即使,我使用他们的原始源代码加载.OBJ文件,它具有相同的错误 ,当我尝试在服务器中导航其他图像文件时,我可以预览它 例如:( weblity.net/images/test.gif) - 我可以在浏览器中查看test.gif 中的图像 但是当我导航到.obj时,我在浏览器中收到错误: (例如:webling.net/obg/test.obj) 404-找不到文件或目录. 您要寻找的资源可能已被删除,更改其名称或暂时无法使用. 我可以在本地查看我的.obj,但是当我将其放入Azure时,我不能! 谁能帮我吗?谢谢! 解决方案 [已解决]加载.obj(wavefront)Windows主机中的文件返回404错误[已解决
12 2024-03-23
编程技术问答社区
在WebGL/Javascript中,是否有一种快速的方法来处理几个帧缓冲器的平均颜色?
我是WebGL主题的新手. 我要做的是计算6种不同框架的平均颜色,例如图片中的下面的颜色.现在,我想知道最好的方法是什么? 我试图做 gl.readPixels(0, 0, 256, 256, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues); ,但这似乎很慢... 有办法可以在图形卡上发生吗? this is how the FBO is set up - I have this from a tutorial: ... 解决方案 您有两个选项 写一个片段着色器,通过渲染四元(1 x textureHeight)并通过行中的所有像素来运行一次,该片段着色器每行(每个纹理)运行一次(每个纹理).在平均行上重复此过程,您将拥有整个图像的平均值.这就是称为致电 glgenerateratemipmap Level MIPMAP(获取此MIPMAP的参数,通过 glgettexlevelvelparameter.xml ).现在,您可
2 2024-03-21
编程技术问答社区
对象的着色器线框
我想看到一个没有对角线的物体的线框,例如 目前,我根据顶点添加行,问题是在我经历了一些重大性能退化之后. 例如对于我的三个版本来说,要么太新了,要么不起作用(我在那里评论了). 所以我想尝试实现着着色器. 我尝试使用此着色器: https://stackoverflow.com/a/31610464/4279201 零件的形状,我会遇到WebGL错误. 这就是我的使用方式: const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } ` const fragmentShader = ` #version 150 compatibility fla
2 2024-03-20
编程技术问答社区