WEBGL - 技术教程文章
javascript-如何在three.js或WebGL中模拟“溢出：隐藏”？【代码】
我目前正在为我的游戏开发WebGL GUI,我真的想深入研究GPU图形,因为它比WebKit CSS渲染平滑得多. 当超出父网格的边界时,是否可以使内部网格遵循溢出规则隐藏的滚动视图？ 也许着色器可以工作,有什么建议吗？ 谢谢！解决方法:您可以使用“模板测试”来实现.模具测试允许您针对表示为“模具”的像素掩盖后续的几何渲染. 就您正在做什么而言,您可以使用模板技术来： >将滚动区域的内部(矩形？)指定为“模具”.此时,您将“绘制”一个矩形...
javascript-如何使用WebGL drawElements偏移量？【代码】
这是一个相当具体的WebGL问题.我在理解特定于WebGL的drawElements实现时遇到麻烦.这是API规范. From the WebGL specification. 我如何精确地使用偏移量？我可以使用偏移量来模仿更经典的glDrawRangeElements吗？void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset)(OpenGL ES 2.0 2.8, man page) Draw using the currently bound element array buffer. The given offset is in bytes, and must be a va...
javascript-如何使用WebGL在运行时更新多维数据集的材质？【代码】
我正在使用three.js制作动画.我想动态更新立方体网格的材质.这是示例：// create cube geometry var material1 = [new THREE.MeshBasicMaterial({color:0xBEE2FF}),.....]; var geometry = new THREE.CubeGeometry(50, 50, 50,0,0,0,material1 ); var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());// ...var material2 = [new THREE.MeshBasicMaterial({color:0xFFFFFF}), ...]; cube.geometry.materials = ma...
javascript – 使用webGL绘制元素【代码】
我有面部索引(指向点)和点,并希望在循环中绘制三角形. Web控制台给我这个错误：WebGL: drawElements: bound element array buffer is too small for given count and offset这是我的代码：for(var i=1;i<38000;i++){var vtx = new Float32Array([points[faces[i][1]][1],points[faces[i][1]][2],points[faces[i][1]][3],points[faces[i][2]][1],points[faces[i][2]][2],points[faces[i][2]][3],points[faces[i][3]][1],points[face...
javascript-在Autodesk Viewer中出现webGL错误【代码】
我收到如下错误：未捕获的TypeError：无法读取null的属性’__webglFramebuffer’ 当我转到另一个页面时,该页面链接到附加了Autodesk Viewer的页面.我不知道为什么会这样.我正在为我的网站使用angularjs,该页面的控制器中没有关于查看器的代码.解决方法:之所以收到此错误,是因为您没有破坏左页面上的查看器实例,因此当接收到诸如页面大小调整之类的事件时,查看器将尝试重新呈现,并且由于WebGL上下文已被破坏,它将引发此错误. 只需放...
javascript-为webgl中的每个对象使用不同的顶点和片段着色器【代码】
我在webgl中有一个包含多个对象的场景.对于每个对象,我想使用不同的顶点和片段着色器.我的第一个问题是,是否可以为每个对象设置一个着色器？我知道在opengl中是可能的. 这就是我所想到的类似的伪代码.任何示例将不胜感激.glenableshader draw triangle gldisableshaderglenableshader draw square gldisableshader谢谢解决方法:您几乎可以查找任何WebGL示例并将其转换为多个着色器示例. 伪代码// At init time for each shader pro...
javascript – 是否有一个网站,我可以看到在不同的浏览器中支持哪些HTML 5标签？和WebGL？
我想制作一个HTML / Javascript网络应用程序.有没有一个网站可以比较webrowser已经支持HTML 5标签的内容？和WebGL？解决方法:是的,有很多.以下是每对夫妇：(HTML)http://a.deveria.com/caniuse/(HTML)http://quirksmode.org/dom/html5.html(WebGL)http://wakaba.c3.cx/w/webgl.html(WebGL)http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation 其他海报的答案也很好.
javascript – 在鼠标移动中创建涂抹/液化效果,使用webgl连续动画回原始状态【代码】
我试图找到可用于创建涂抹/液化效果的信息或示例,这些效果会持续动画回原始状态. 最初我正在考虑使用three.js或pixi.js渲染一些文本,然后使用鼠标事件和光线投射将网格拖出位置,我发现最接近的是这个. https://codepen.io/shshaw/pen/qqVgbglet renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { transparent: true });我认为理想情况下我会将文本渲染为图像,然后涂抹效果将应用于像素,并且它们会慢慢...
javascript – 如何在不模糊的情况下拉伸WebGL画布？风格“图像渲染”不起作用【代码】
我创建了一个宽度为16且高度为16的画布.然后我使用WebGL渲染图像.这就是它的样子：之后,我使用宽度：256px和高度：256px来缩放画布.我还将图像渲染设置为像素化：canvas {image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */image-rendering: -moz-crisp-edges; /* Firefox */image-rendering: -o-crisp-edges; /* Opera */i...
javascript – 使用WebGL重复纹理【代码】
我需要在单个元素中重复纹理.它甚至可以在WebGL中使用吗？ 我试过以下任何一种,但没有运气.ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE); ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.REPEAT); ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.REPEAT);谢谢你的帮助！解决方法:重要的是要知...
javascript – 无论如何都有检测到“老鼠,WebGL遇到障碍？”【代码】
我们知道有些人在我们的WebGL应用程序中出现“老鼠”错误.我们不知道为什么.我们确实要求他们报告他们的硬件配置.似乎没有相应的错误记录到我们的javascript日志记录系统.因此,我们的假设是WebGL错误主要是从控制台中被抑制的.结果,我们无法检测“Rats”类型错误. 对于非webgl驱动的浏览器,我们有一个后备策略,但要在“大鼠”情况下激活它,我们需要知道发生了“老鼠”.我们怎么做？解决方法:您应该能够通过检查webglcontextlost事件...
javascript – pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);【代码】
如果使用OpenGL ES,我一直试图找出相应的行,UNPACK_FLIP_Y_WEBGL.我一直无法找到解决方案. 有人可以帮我找一个等价的吗？ 问候解决方法:它在ES 2.0中不存在. 解决方案从最好到最差 >在编译时翻转图像. 这是专业人士所做的.为什么浪费内存和代码以及为什么让用户等待翻转图像,如果你不需要？>将图像上下颠倒,(libpng有该选项)>装载后翻转. 假设每个通道图像有一个RGBA 8比特,那么要翻转的代码是类似的void flipInPlace(unsigned cha...
javascript – WebGL：如何在一些web gl 3d对象上绘制交互式div(如文本输入)并仍然是交互式的？
所以我看了https://github.com/mrdoob/three.js/个样本,但我认为没有办法将html交互式表单(带有css和东西)绘制到一些web gl对象上……所以任何人都可以提供一个如何在一个球体上绘制一些交互式html输入表单的示例还是立方体？ 更新： 实际上有一个非常好的样本与视频示例http://mrdoob.github.com/three.js/examples/canvas_materials_video.html 所以有可能在一些真实的世界html div上尝试它的风格……解决方法:好吧,你不能只放一...
javascript – WebGL显示帧缓冲？【代码】
我使用了WEBKIT_WEBGL_depth_texture扩展.并初始化缓冲区.但是我怎么能画这个帧缓冲？我现在完全被卡住了. -.-function InitDepthtextures (){var size = 256;// Create a color texture var colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.tex...
javascript – 使用WebGL索引缓冲区绘制网格物体【代码】
3 index buffers问一个更难的问题,但我觉得他们的主要问题归结为我的：有没有办法使用索引缓冲区在WebGL中多次访问同一个顶点而不是复制顶点？我能找到的只是使用索引缓冲区将纹理,法线等与模型中的顶点相关联.我无法找到一种方法来使用索引缓冲区来告诉drawArrays访问位置数组中顶点的顺序.解决方法:是的,使用gl.drawElements并将带有顶点索引的缓冲区上传到gl.ELEMENT_ARRAY_BUFFER.... upload vertex data to buffers, vertexAt...
javascript – 将Unity WebGL项目导入Angular2组件【代码】
我希望将Unity WebGL项目集成到Angular2应用程序中.将所有这些脚本移动到Angular2组件的正确方法是什么？ 首先,Unity WebGL会像这样导出index.html：<!DOCTYPE html> <html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Unity WebGL Player | Espoo web manager (Prefab preview)</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><li...
javascript – WebGL基准测试 – 我应该创建什么样的测试？
(我不确定这是否应该在https://softwareengineering.stackexchange.com/上,如果您这么认为,请发表评论) 我即将为我的学士论文创建WebGL实现的基准.我不确定我应该创建什么样的测试,如果我只测量每秒的帧数,如果我能得到一些其他有用的数据来进行基准测试… 目前我只是考虑过这样的测试： > 1个单色物体> 1个多色物体> 1纹理对象> 1个带有混合的纹理对象> 1带闪电的纹理物体> 1个带有多个照明点的纹理对象> 1个场景渲染到纹理并在另...
javascript – 如何在mousedrag上围绕webgl中的场景旋转(模拟在相关位置移动的相机)【代码】
好的,所以我在过去的几个小时里一直在阅读,我已经设法使用以下矩阵计算让鼠标拖动到x轴上工作,但y轴没有运气：哪里newX =新鼠标X coordpreviousX =上次更新时的鼠标X坐标position =摄像头位置mvMatrix =模型视图矩阵或’世界矩阵’angle = 0.01*(newX-previousX); rM = mat4.create(); mat4.identity(rM);rM[0] = Math.cos(angle); rM[2] = Math.sin(angle); rM[8] = -Math.sin(angle); rM[10] = Math.cos(angle);mat4.multiplyVec...
javascript – 为什么WebGL比Canvas慢？
我刚开始玩canvas和webgl,阅读一些文章等等.根据我的知识,WebGL应该比canvas快得多,但是在接下来的测试中,它明显变慢了： > http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays> http://jsperf.com/three-js-canvas-vs-webgl/2 我在Chrome和Firefox中运行它们,在两个浏览器中,差异大约为80％. 为什么画布渲染速度更快？ jsperf是不准确的吗？画布在浏览器中变得更加优化吗？ (PS：我不是测试的作者,我刚刚发现它们.)解决方法...
javascript – 如何使用webgl处理和更新大型数组？
我有两个大的Uint8Array.尺寸为：1024和2048 我想在每个帧中更新这些数组. 1024长度阵列适合256 vec4制服,或16 * 16图像.但我不认为,这是正确的做法. 如何从javascript向GLSL发送大型数组？ 编辑 我的纹理问题是,为了更新每个帧中的图像,我必须将数据复制到ImageData对象中.然后我必须将imageData绘制到画布上.之后,我必须获取画布的dataURL,并更改图像的src属性解决方法:纹理是在WebGL中处理大型数据集的适当方式.您可以将数据存储...
WebGL编程指南入门基础篇【代码】【图】
WebGL编程指南笔记-入门基础篇 着色器介绍着色器分为顶点着色器 跟 片元着色器顶点着色器 描述顶点特性,包括位置,颜色等 片元着色器 进行每个片元的处理过程,如光照等;在三维场景中,仅仅用线条和颜色把图形画出来是远远不够的从js文件到浏览器渲染结果的处理流程示意图画点多基本缓冲区模型 颜色缓冲区: gl.COLOR_BUFFER_BIT 深度缓冲区: gl.DEPTH_BUFFER_BIT 模板缓冲区: gl.STENCIL_BUFFER_BIT 画点关键代码片段// HelloPo...
Javascript高级编程学习笔记（95）—— WebGL(1) 类型化数组【代码】
WebGL webgl 是针对 canvas 的 3D上下文，与其它Web技术不同，WebGL并非是W3C制定的标准，而是由 Khronos Group 制定的。 类型化数组 WebGL所涉及的复杂运算需要提前知道数值的精度，但是标准的 JS 无法支持这一诉求。 因此WebGL引入了类型化数组这一概念，类型化数组也是数组，与一般的数组没有什么区别，只不过这种数组中所有元素的值都被指定为某一特定类型。 类型化数组的核心在于 ArrayBuffer 这一数据类型，每个 ArrayBu...
WebGL编程指南理论分析之物体层次模型（局部运动）【图】
书中340页，开始讲到层次模型（关节模型），也就是整个物体，可以自由控制其各部位单独运动，就像关节一样，互不干扰或者有一定关联。就像图中，左右键控制整个物体（arm1和arm2）的Y轴旋转，上下键控制arm2的X轴旋转。 如果你只是扣教程上的字眼的话，会指出上面这句话是错的，但是如果你理解了教程中的代码之后，你会说我是对的。 一、教程中的相关代码对于两段手臂，分别是这样画的，首先，传入一个位于（0,0,0）立方体cube的顶...
基于HTML5的WebGL应用内存泄露分析【代码】【图】
上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。 http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 图形组件设计架构上主要就是在规划Data模型，View视图和Event事件...
WebGL入门(三十六)-HUD（平视显示器）实现【代码】【图】
HUD（平视显示器）实现 1. demo效果2.实现要点2.1 什么是HUD2.2 HUD实现2.2.1 准备画布2.2.2 绘制三维图形2.2.3 绘制HUD信息3.demo代码 1. demo效果如上图，在三维场景中叠加了二维文本 2.实现要点 2.1 什么是HUD HUD是 平视显示器 (head up display) 的简称，最早用于飞机驾驶显示器上，将飞机的一些重要信息投影到前方的玻璃上，这样就不用低头看仪表盘了，在游戏中，也经常会在三维场景上叠加一些二维文本或二维图形信息 2.2 HU...
canvas 与 webGL , openGL
通常我们将 CANVAS 与 webGL 区分开 ， 移动端和WEB端区分开 类似于这种关系 let [canvas, webgl, opengl] = [‘2d’, ‘web端’, 移动端]//? 通过方法getContext()获取WebGL上下文 ? ? var?gl=canvas.getContext('webgl'); ? ? console.log(gl);//通过方法getContext()获取2D上下文 ???????var c2d=canvas.getContext('2d');; ????????console.log(c2d);
WebGL 是什么？【代码】【图】
我们生活在一个 3D 世界中，但我们与计算机及计算机化设备的几乎所有交互都发生在 2D 用户界面上。直到最近，高速、流畅、逼真的 3D 应用程序（曾经是计算机动画师、科研用户和游戏爱好者的专属领域）对于主流 PC 用户还是遥不可及的。（见边栏：3D 硬件进化：简史。）如今，所有主流 PC 的 CPU 都内置了 3D 图形加速，并且游戏 PC 有额外的专用高性能图形处理单元（GPU）来处理 3D 渲染。手机和平 板电脑中基于精简指令集计算（RI...
化繁为简 -webgl -framebuffer的使用【代码】【图】
fbo在webgl中很常见，但在cesium的开发工作中基本用不到，而源码修改时，这又是必经的一条道，因此，转头回去学习了一下fbo的使用；由于原文的fbo使用了贴图，相对复杂，不利于理解，本人在理解的时候就移除了部分内容； fbo一词尝与离屏渲染相关联， webgl系统默认绑定的是窗口缓冲区，即绑定的shader program 会把对应的数据直接绘制到屏幕上，但是很多时候，绘制的直接结果不是我们想要的，因此可以使用fbo 即帧缓冲区。 渲染流...
webgl入门
1-刷底色的基本步骤1.在html中建立canvas 画布<canvas id="canvas"></canvas>2.在js中获取canvas画布const canvas=document.getElementById(canvas’);3.使用canvas 获取webgl 绘图上下文const gl=canvas.getContext(webgl’);4.指定将要用来清空绘图区的颜色gl.clearColor(0,0,0,1);5.使用之前指定的颜色，清空绘图区gl.clear(gl.COLOR_BUFFER_BIT);整体代码<canvas id="canvas"></canvas><script> const canvas=document.get...
谷歌浏览器打开WebGL项目窗口有闪屏，花斑现象处理【图】
谷歌浏览器打开WebGL项目窗口有闪屏，花斑现象处理 问题效果如图： 1.在谷歌浏览器搜索：chrome://flags/；如下图： 2.在该页面搜索：WebGL Draft Extensions，修改值为Enabled，该选项的意思是：允许谷歌浏览器浏览本地的WebGL;如下图： 3.搜索：Accelerated 2D canvas，修改值为Disabled，该选项的意思是：是否使用GPU来执行2D画布的渲染，而不适用软件来渲染；如下图： 4.搜索：GPU rasterization，修改值为Disabled，该选项...