webgl深度测试问题

weixin_41443034 2017-12-23 10:10:00
学习webgl发现一个问题
代码如下

var Geometry1 = new Object();
Geometry1.vertices = new Float32Array([
// Vertex coordinates and color(RGBA)
0.5, 0.4, -0.8, 1.0, 0.4, 0.4, // 黄色最后
-0.5, 0.4, -0.8, 1.0, 1.0, 0.4,
0.0, -0.6, -0.8, 1.0, 1.0, 0.4,

0.0, 0.5, -0.2, 0.4, 0.4, 1.0, // 最前面蓝色
-0.6, -0.5, -0.2, 0.4, 0.4, 1.0,
0.6, -0.5, -0.2, 1.0, 0.4, 0.4,

0.0, 0.5, -0.4, 0.4, 1.0, 0.4, //绿色中间
-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
]);
//顶点着色
Geometry1.VSHADER_SOURCE =
'attribute vec4 a_Position;'+
'attribute vec4 a_Color;'+
'varying vec4 v_Color;'+
//'uniform mat4 u_mat;'+
'void main(){'+
//'gl_Position = u_mat * a_Position;'+
'gl_Position = a_Position;'+
'v_Color = a_Color;'+
'}';
//像素着色
Geometry1.FSHADER_SOURCE =
'precision mediump float;'+
'varying vec4 v_Color;'+
'void main(){'+
'gl_FragColor = v_Color; '+
'}';
//下面是绘图代码
gl.clearColor(0,0,0,1);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


gl.bindBuffer(gl.ARRAY_BUFFER,this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);

gl.enableVertexAttribArray(this.a_Position);
gl.enableVertexAttribArray(this.a_Color);

var Fsize = this.vertices.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,Fsize*6,0);
gl.vertexAttribPointer(this.a_Color,3,gl.FLOAT,false,Fsize*6,Fsize*3);

gl.drawArrays(gl.TRIANGLES,0,Geometry1.vertices.length /6);
开启深度测试后 发现黄色居然在前面 就没有搞懂了 为什么是反的??
求大神解答 最好有相关资料
...全文
397 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
第1部分 本书目录: 第1章WebGL概述 1.1系统需求 1.2WebGL提供的渲染类型 1.3WebGL应用程序结构 1.4HTML5canvas的生成方式 1.5访问WebGL上下文环境 1.6WebGL状态机 1.7加载3D场景 1.8本章小结 第2章渲染几何体 2.1顶点和索引 2.2WebGL渲染管线概述 2.3在.WebGL中渲染几何体 2.4将属性关联至VBO 2.5渲染机制 2.6整合过程 2.7渲染模式 2.8缓冲区操控 2.9高级几何体加载技术:JSON和AJAX 2.10使用AJAX+JSON加载圆锥体对象 2.11本章小结 第3章光照 3.1光照、法线和材质 3.2在管线中使用光源、法线和材质 3.3着色方案和光照反射模型 3.40penGLES着色语言ESSL 3.5编写ESSL程序 3.6返回至WebGL 3.7位置光源 3.8本章小结 第4章相机 4.1WebGL不存在相机对象 4.2法线转换 4.3WebGL实现方式 4.4模型一视见矩阵 4.5相机矩阵 4.6透视矩阵 4.7WebGL示例结构 4.8本章小结 第5章实现方案 5.1矩阵栈 5.23D场景的动画操作 5.3计时策略 5.4体系结构更新 5.5连接矩阵栈和JavaScript计时器 5.6参数曲线 5.7优化策略 5.8插值方案 5.9本章小结 第6章颜色、深度测试以及Alpha混合 6.1在WebGL中使用颜色 6.2使用对象中的颜色 6.3使用光照颜色 6.4体系结构的更新操作 6.5通过iQueryUI实现互动性 6.6有向点光源 6.7使用场景中的颜色值 6.8深度测试 …… 第7章纹理 第8章拾取操作 第9章整合方案 第10章高级话题
第2部分 本书目录: 第1章WebGL概述 1.1系统需求 1.2WebGL提供的渲染类型 1.3WebGL应用程序结构 1.4HTML5canvas的生成方式 1.5访问WebGL上下文环境 1.6WebGL状态机 1.7加载3D场景 1.8本章小结 第2章渲染几何体 2.1顶点和索引 2.2WebGL渲染管线概述 2.3在.WebGL中渲染几何体 2.4将属性关联至VBO 2.5渲染机制 2.6整合过程 2.7渲染模式 2.8缓冲区操控 2.9高级几何体加载技术:JSON和AJAX 2.10使用AJAX+JSON加载圆锥体对象 2.11本章小结 第3章光照 3.1光照、法线和材质 3.2在管线中使用光源、法线和材质 3.3着色方案和光照反射模型 3.40penGLES着色语言ESSL 3.5编写ESSL程序 3.6返回至WebGL 3.7位置光源 3.8本章小结 第4章相机 4.1WebGL不存在相机对象 4.2法线转换 4.3WebGL实现方式 4.4模型一视见矩阵 4.5相机矩阵 4.6透视矩阵 4.7WebGL示例结构 4.8本章小结 第5章实现方案 5.1矩阵栈 5.23D场景的动画操作 5.3计时策略 5.4体系结构更新 5.5连接矩阵栈和JavaScript计时器 5.6参数曲线 5.7优化策略 5.8插值方案 5.9本章小结 第6章颜色、深度测试以及Alpha混合 6.1在WebGL中使用颜色 6.2使用对象中的颜色 6.3使用光照颜色 6.4体系结构的更新操作 6.5通过iQueryUI实现互动性 6.6有向点光源 6.7使用场景中的颜色值 6.8深度测试 …… 第7章纹理 第8章拾取操作 第9章整合方案 第10章高级话题
所支持的Unity版本 5.2.0 及以上版本 WebGL Showcase | WebGL压力测试|文档|论坛 这个插件允许您通过生成真正容积的程序光束来大大改善场景的照明。 这是模拟聚光灯和手电筒的密度,深度和音量的完美,简单而便宜的方法。 简单高效的体积照明解决方案兼容各种平台(Windows PC,Mac OS X,Linux,WebGL,iOS,Android,VR)! 即使在移动设备上,也能为您的聚光灯和手电筒模拟密度,深度和体积的完美,简单且便宜的方式! 它通过自动高效地生成真正的体积程序光束来渲染高质量的光轴光线效果,从而极大地改善了场景的照明。 特征: - 真正的体积效果:即使你在光束中也能工作。 - 非常容易使用和集成/需要零设置。 - 程序生成:一切都是在引擎盖下动态计算的。 - 在任何地方添加无限光束:替代解决方案通常只需要实时灯光:此插件不需要。您可以制作烘烤的光量,甚至可以在没有任何光线的情况下添加光束。 - 动态3D噪声功能,用于模拟动画体积雾/雾/烟雾效果。 - 体积粉尘颗粒功能可模拟高度详细的防尘灯和微尘效果。 - 动态遮挡:可以通过移动几何体来阻挡光束。 - 您可以实时移动和旋转光束。 - 触发区域功能:您可以跟踪通过光束的对象。 - 完全动态:在游戏时间内从脚本,动画师或时间轴更改或动画每个属性。 - Super FAST:不需要任何后处理,命令缓冲区和计算着色器:即使在移动设备和WebGL等低性能平台上也能很好地工作。 - VR Ready:支持Normal和VR Single pass立体声。 - 平滑交叉并与几何和相机混合。 - 自定义截头圆锥几何体。 - 支持许多图形变体:延迟和前向渲染路径,Gamma和线性颜色空间,HDR颜色,多种混合模式。 - 调整分层图层和图层顺序,以使用2D精灵调整光束渲染。 - 开箱即用的透视和正交相机。 - 支持Unity内置雾。 - WYSIWYG:在场景视图中立即可以看到每个修改:无需在编辑器和播放模式之间切换以查看您的更改。 - 完整源代码可用/无DLL。光束设置和处理通过功能强大的API完全暴露。 - 详细的文件。 - 支持从Unity 5.2到最新的2017.X和2018.X版本。 - 示例场景包括:展示演示。 请注意,此资产不是全屏后期处理/图像效果。这与Unity内置的Sun Shafts图像效果不相似。 相反,体积光束将产生优化的几何形状和材料光谱。这种技术有几个优点: - 更精细:独立精确定制每个光束。 - 您可以在任何地方添加光束,即使在没有光线的地方也是如此。 - 当连接到聚光灯时,它支持实时,烘焙和混合模式。 - 您可以渲染的光束数量没有限制。 - 更容易与您自己的管道集成:无需与您自己的图像效果或后处理堆栈混合,没有命令缓冲区,不需要计算着色器功能。 - 运行得更快。没有后期处理添加到您的相机。 - 支持移动等低端平台。 如何使用它? 体积光束设计非常易于使用。无需设置。您不必将多个对象链接在一起。您只需要使用一个简单的新组件。你可以通过2次点击添加一个新的光束! 您可以通过调整一组用户友好的属性来精确定制每个光束的渲染。为了获得更好看的效果,一些属性会自动绑定到附加的聚光灯。 限制: 目前,此资产的当前版本有一些小的限制: - 此资产仅支持“聚光灯”(形状像锥形的光束)。不支持点光源(光线向各个方向平等)。 - “3D噪声”功能要求着色器功能等于或高于Shader Model 3.5 / OpenGL ES 3.0。 2012年之后发布的任何移动设备都应该支持它。 - 仅在Unity 5.5或更高版本上支持“体积粉尘颗粒”。 - “动态遮挡”功能计算遮挡的近似值,但尚不支持“部分遮挡”。

722

社区成员

发帖
与我相关
我的任务
社区描述
Cocos2d-x相关内容讨论专区
社区管理员
  • Cocos2d-x
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧