Articles of webgl

如何管理平截头剔除

我有一个基于球形剪贴图的行星地形。 整个行星是由一个单位的环形几何形状组成,顶点着色器移动以覆盖整个600万单位半径的行星。 但是,只要这个几何体的起点不在相机的视野中(这是行星的99.9999%),就会被剔除。 什么是最好的解决scheme,以确保即使原来的网格是不可见的行星是可见的? 这是基于WebGL和Three.js 。

病房模型实现:镜面组件太弱

我试图实现Ward着色模型,各向异性,计算效率高的版本: 这是我做到的: float alphaX=0.5, alphaY=0.5; // asinotropic roughness float minFloat= 1.e-6; vec4 Ward(vec3 L, vec3 N, vec3 V) { vec3 H= normalize(L+V); float NdotL= max(dot(N,L),0.0); float NdotV= max(dot(N,V),0.0); vec3 e= vec3(1.0,0.0,0.0); vec3 T= normalize(cross(N,e)); vec3 B= normalize(cross(N,T)); float HdotT= max(dot(H,T),0.0); float HdotB= max(dot(H,B),0.0); float HdotN= max(dot(H,N),0.0); float beta= -2.0 * ( pow(HdotN/alphaX, 2.0) + pow(HdotB/alphaY,2.0) […]

如何有效地在WebGL中绘制许多相同的四边形?

最近我试图在过去的几个月里开发一个更为基本的“落砂”/“粉末游戏”风格的游戏( 见这里 ),然后在一个简单的canvas上进行原型devise,然后尝试使用PIXI.js,我决定尝试和推出我自己的基于WebGL的解决scheme,以便我可以控制整个管道。 目前,我只是遍历代表canvas(500×500)的像素的二维数组,然后调用glDrawElements在指定位置绘制像素大小的四元组。 很明显,在这样的游戏中,事情变得非常快,帧速率很快就会降低到不可用状态。 在OpenGLES / WebGl中,我无法在一个DrawTelements调用中find在不同位置绘制四边形批处理的示例,因为没有实例支持,但是人们似乎已经提到了它。 任何人都可以提供任何指针? 这是我非常简单的顶点着色器: attribute vec2 position; uniform mat3 modelViewProjectionMatrix; void main() { gl_Position = vec4(modelViewProjectionMatrix * vec3(position, 1.0), 1.0); } 这里是我的相关呈现代码JavaScript方面: this.setSandBuffers(); material = this.materials.sand; this.gl.vertexAttribPointer(this.positionAttribute, 2, this.gl.FLOAT, false, 0, 0); this.gl.uniform4fv(this.uColor, material.uColor); for (var x = 0; x < this.grid.length; x++) { for (var y = 0; […]

低端Android平板电脑和手机上的HTML5 / WebGL性能不可靠吗?

我开发了一些WebGL游戏,并在Android上试用。 但是,我发现他们在我的平板电脑上运行得非常慢。 例如,一个有10个精灵的游戏以5fps的速度运行。 我试过Chrome和CocoonJS,但是速度相当慢。 我也尝试过其他游戏,即使只有5个左右的游戏也是如此。 这似乎与其他人的报告不一致,例如这个基准 。 通常,当人们谈论HTML5游戏性能时,他们会提到知名的高端手机和桌面。 虽然我的7英寸平板电脑很便宜(我相信这是一个重新标记的Allwinner平板电脑,显然是用Mali 400 GPU),但我发现它的游戏性能一般,我试过的所有游戏都运行得很顺畅,同时开发了一个OpenGL ES 2 demo (在Java中)与200个阴影的3D对象,它运行在60fps。 我怀疑WebGL引擎对许多低端和白标签设备的支持是无法接受的(例如,没有明显的原因依靠软件回退),这意味着可能有大量的游戏玩家你不会到达你select这个作为你的平台。 我听说过有关不同设备上的HTML5和WebGL性能不一致的传闻,但没有一个清晰的图像出现。 我想听听您是否有任何与HTML5或WebGL有类似的经验,或者我能否find有关设备的百分比的信息,我可以期待有良好的performance。 编辑 :作为一个“彻底”的方式来certificate我的观点,我已经开始了我自己的WebGL实现,看看我能做得比CocoonJS更好。 目前的结果是有前景的。 在上述平板电脑上,我可以画出10,000个精灵,速度为60fps,全部通过WebGL兼容的API更新和绘制成JS。 看看这里的APK。 所以,我想这certificate了现有的WebGL实现真的做错了。 我现在正在使我的游戏在我的框架中可玩。

在WebGL或OpenGL中使用鼠标在3D对象上绘制线条的技巧?

任何人都可以点我的技术,绘制线,用鼠标,WebGL或OpenGL中的3D对象? 以下是使用WebGL的效果: http : //www.spacegoo.com/cadillac/ 我可以想象一般的想法 – 将光线投射到表面上,然后使用法线和UV,将交点转换为UV空间,然后在纹理上绘制线条,将其映射到对象上。 尽管如此,我也很想find一些适当的文献。

片段着色器编译在webGL中,但不是在OpenGL中

我在Haxe编程(语言编译到多个平台),我写了一些着色器。 我的片段着色器在html5中运行良好,但是当我尝试为本机(OS X和/或Neko,Haxe的VM)编译时,出现着色器编译错误,但没有详细信息(我正在使用平台抽象为我做这些事情)。 这是着色器: precision mediump float; varying vec4 v_color; void main() { gl_FragColor = v_color; } 非常简单,你可以看到。 它在webGL中运行良好,但似乎不会在OpenGL中编译。 我不是着色器方面的专家,所以我不知道什么可能是错的。 我使用一些只存在于webGL中的语法? 还有,以防万一,这里是我的顶点着色器(编译好): attribute vec3 a_position; attribute vec4 a_color; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 v_color; void main() { gl_Position = uMVMatrix * vec4(a_position, 1); v_color = a_color; }

在线网页游戏多人游戏的图书馆?

我想制作一个html5 canvas / javascript游戏,类似于agar.io。 我知道一点node.js,我想我明白在线多人游戏的作用方式,但是现在我明白了,我意识到如果我想从socket.io中完成这个任务,将会是一大堆工作。 。 我的问题是:有没有图书馆可以帮助我的游戏(发送游戏包等)的多人游戏方面,如果是这样的话,图书馆的performance足够快,足以运行我的游戏? (具有至less和agar.io一样低的延迟)

为什么深度testing在我的代码中不能正常工作?

http://jsfiddle.net/w9WqJ/31/ 旋转相机时,会显示一些应该隐藏的部分。 我应该创造更多的三角形,或者我在这里做错了什么?

多纹理:任意数量的纹理和UV集

在Photoshop或Effetcs工作后,我们的用户可以合成任意数量的图层,并驱动片段颜色和不透明度的结果。 一层是: 纹理或任意大小(静态图像文件或video帧)或着色器计算的程序色彩 紫外线设置 一个不透明的值 合并操作:混合(对于颜色)或者多(对于alpha) 在下面的例子中,网格有2个UV集和5个层(从上到下): 沿着紫外线组1重复一个小的64×64方形纹理(操作:mult来驱动alpha) 哑光512×512纹理(紫外线1,多) 一个半透明的1024×256彩虹纹理(紫外线2,混合) 一个完全不透明的512×512棋盘(紫外线1,混合) 在这里从未显示的着色器计算的基本颜色具有完全不透明的上层 目前,我将UVs集作为varying vec2和层信息arrays int[TEXTURES_ARRAY_SIZE]给合并操作标识符的统一arrays int[TEXTURES_ARRAY_SIZE] ,纹理arrays sampler2D[TEXTURES_ARRAY_SIZE]等。 #if USE_MAPPING_0 varying vec2 vUv0; #endif #if USE_MAPPING_1 varying vec2 vUv1; #endif #if USE_MAPPING_2 varying vec2 vUv2; #endif // … etc until USE_MAPPING_8 #if TEXTURES_ARRAY_SIZE > 0 uniform sampler2D layersTexture[TEXTURES_ARRAY_SIZE]; uniform int layersMapping[TEXTURES_ARRAY_SIZE]; uniform float layersOpacity[TEXTURES_ARRAY_SIZE]; uniform […]

如何在OpenGL中创建带有文本的菜单?

我将如何去创建一个OpenGL的字体菜单系统? 我想制作一个地牢爬行器,并需要一个武器库存和统计数据的菜单。 我可以画出一个由块组成的世界,但我不太确定如何做到这一点。 我想我需要使用glortho适用于matrix堆栈的matrix。 具体来说,我使用的WebGL,我没有访问字体,所以它似乎我必须创建自己的。 任何帮助,我将如何去做这个,将不胜感激。