opengl(es)
opengl或opengl es相关文章
含影
高交互性3D内容生产/协作,
跨平台3D引擎,
跨平台渲染引擎,
高性能计算
展开
-
GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture 错误
Opengl/webgl(opengles) 环境下 FBO 使用不当可能出现如下错误:GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.出现这个问题的情景描述: 首先 创建一个 FBO对象实现 MRT的操作, framebufferTexture2D 绑定了两张 RTT 纹理(这里命名为: RTT0 和 RTT1), 即: gl.framebufferT...原创 2021-08-17 15:11:45 · 3324 阅读 · 0 评论 -
Opengl FBO Error: GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete
今天在使用 FBO组件的时候,因为误操作将绑定到 FrameBufferATTACHMENT0 上的纹理,又绑定到同一个Frame Buffer的ATTACHMENT1上,就出现了 GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete 这个错误。因为是误操作,所以查了一阵子,真是手误耽搁时间,欲哭又止。...原创 2020-09-08 16:03:17 · 5612 阅读 · 0 评论 -
OpenGL Insights: Performance Tuning for Tile-Based Architectures
原创 2020-08-18 18:40:39 · 190 阅读 · 0 评论 -
反射和折射的混合
折射效果和反射效果可以通过各种形式混合,就能呈现不同的材质感觉原创 2019-01-01 11:41:32 · 369 阅读 · 0 评论 -
快速实现GLSL Shader(支持GLES2/GLES3)的一个辅助小系统<Ver1>(源码下载)
这个辅助的系统在浏览器环境下运行,用于快速预览和测试片段着色器。下载资源链接(如果找不到,可能还未通过审核。如有不便请留言, 实在下载不了请加QQ群: 722973433):https://download.csdn.net/download/vily_lei/10795631下载之后解压缩,请看ReadMe.本系统简洁轻巧,用于快速实现基于glsl es2/es3 的demo以方...原创 2018-11-20 12:22:53 · 1068 阅读 · 0 评论 -
WEBGL_draw_buffers RENDER WARNING: texture bound to texture unit 0 is not..错误解决方案
今天在调整渲染系统中的一个MRT机制,结果不小心改错了逻辑,运行报错信息:[.WebGL-00000000051B4190]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.折腾了半天...原创 2018-10-16 22:17:07 · 2279 阅读 · 0 评论 -
纯GLSL分步实现电影般画面的湖光山色<Step2>: 艳阳蓝天和碧水(WebGL实现)
上一篇:https://blog.csdn.net/vily_lei/article/details/83144725这一篇加了水,模拟了水面的反射和折射。Demo1(水面只有反射和自发光):http://www.artvily.com/sdf?sample=column&clip=lakeMountain/baseLake2precision highp float;...原创 2018-10-19 12:41:31 · 1066 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(9): 构建SDF空间模型六个重要基石
A.Transform(一般的缩放旋转平移以及旋转中心的更改)B.距离场函数及相应的变体(我把距离场函数描述的空间区域叫做距离场空间分布函数)C.Reapeat(某个区域或者整个空间重复某部分场函数计算)D.过渡/混合(Blend)(用于一个场函数描述的空间与另一个有过渡的衔接)E.布尔运算(交集,合并,差)F.Displace(置换)(以一个空间作为另外一个空间计算的因子)SDF: 这六个...原创 2018-09-30 16:33:20 · 2363 阅读 · 0 评论 -
对纹理进行混合运算也可以是很酷的效果Demo(WebGL实现)
Demo:http://www.artvily.com/sample?sample=sdftoy_4lXGRB主要就是纹理取值的混合操作,可以做的更复杂。上面这个算法相当于多张图由小放大层层叠起来的三维数据,效果立体感强多了Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=toy4lXGRB2...原创 2018-10-09 15:10:27 · 485 阅读 · 0 评论 -
渲染系统中MRT和RTT的应用组合(WEBGL2 GLSL ES3实现)
Demo:http://www.artvily.com/sample?sample=mrtgl2上图是先实施了两个目标输出的MRT然后绘再使用这个MRT的输出结果来制场景到一个RTT中最后又被一次绘制CUBE使用,之后输出到屏幕。(其实MRT和RTT只是输出目标是多个和一个的区别, 当然glsl代码也有区别)我的渲染系统的设计思路是用 RTT/MRT控制对象来管理这个流程。我的渲染系统...原创 2018-10-18 21:00:30 · 1110 阅读 · 0 评论 -
渲染系统中MRT和RTT的应用组合(WEBGL1 GLSL ES1实现)
Demo:http://www.artvily.com/sample?sample=mrtgl1a效果图:上图是先实施了两个目标输出的MRT然后绘再使用这个MRT的输出结果来制场景到一个RTT中最后又被一次绘制CUBE使用,之后输出到屏幕。(其实MRT和RTT只是输出目标是多个和一个的区别, 当然glsl代码也有区别)我的渲染系统的设计思路是用 RTT/MRT控制对象来管理这个流程...原创 2018-10-18 20:54:39 · 850 阅读 · 0 评论 -
加入反射和折射的多目标实时环境映射(WebGL Engine 实现的 Demo)
请见Demo:http://www.artvily.com/renderCase?sample=cubemapMult原创 2019-01-01 20:50:38 · 507 阅读 · 1 评论 -
GodRay应用<2>: 屏幕(像素)空间高效模拟光束,高速尾迹等效果
请见Demo:http://www.artvily.com/renderCase?sample=godrayShaftLight01效果图:现实中,很多时候都能见到光束(光散射),现在实时渲染中已经有很多方式(体积光效果更好)来模拟这种自然现象,来增强画面的表现力。这里是使用了最基本的径向后处理机制来实现这样类似的效果。原理很简单, 一般情况下绘制场景对象的时候,如果认为这个对象...原创 2019-01-24 09:09:31 · 787 阅读 · 0 评论 -
Deferred Lighting: 2640 dynamic lights in single view(WebGL Demo)(没有使用Computer Shader)
Demo:http://www.artvily.com/renderCase?sample=deferredManyLights2Rendering Effect Screenshot:原创 2019-06-26 20:33:12 · 180 阅读 · 3 评论 -
Deferred rendering Gbuffer优化: 单张Float16纹理存储更多信息来“模拟“MRT
请见Demo:http://www.artvily.com/renderCase?sample=oneFloatTexToMRT光照在 Deferred rendering 机制下性能会更好, 尤其是基于tile base rendering 或者 cluster rendering 的光照数据检索原理,会让性能更优。但是gbuffer在使用的时候,一般都需要硬件对MRT的支持, 即使支持...原创 2019-04-22 12:32:48 · 577 阅读 · 0 评论 -
DirectX clip space and Opengl clip space
OpenGL’s clip space extends from −1.0 to 1.0 in all three axes with the z-axis pointing out of the screen.DirectX’s z-axis points into the screen, and the near plane is mapped to z=0.0 rather than z=...原创 2019-03-15 15:32:08 · 449 阅读 · 2 评论 -
10样本值采样核心 SSAO (屏幕空间环境遮蔽)优化(WebGL实现Demo)
Demo:http://www.artvily.com/renderCase?sample=ssao6效果图:SSAO 采样越少渲染效率越高,但是如果不加优化图像质量必然越差。以上效果是10个采样核心的样本在比较大半球半径情况下生成的SSAO(当然采样次数改为9次也可以)。主要优化的点有三个。1.对于一个表面点来讲距离这个点太近或者太贴近这个点的切面的位置其实对环境遮蔽影响不大...原创 2019-02-20 20:55:42 · 902 阅读 · 0 评论 -
Opengl报错 INVALID_OPERATION: bindTexture: textures can not be used with multiple targets. 原因
前段时间调整渲染系统的"渲染命令机队列"的运行结构和机制,以保证在渲染执行阶段尽可能的没有逻辑运算和判断来提升性能(主要优化cpu instruction cache),今天在测试一个比较复杂的实时组合不同类型的多重纹理的demo,结果直接报了INVALID_OPERATION: bindTexture: textures can not be used with multiple targe...原创 2019-02-14 15:24:24 · 2037 阅读 · 2 评论 -
16样本值采样核心 SSAO (屏幕空间环境遮蔽)(WebGL实现)
Demo:http://www.artvily.com/renderCase?sample=ssao5如果一段时间加载不到资源,请刷新页面再试SSAO是实时渲染中常用的一种屏幕空间环境遮蔽效果,它能很好的更好的表现光照明暗的层次感和立体感,使用SSAO的画面感觉更真实细节也更丰富。上面所给的Demo为了清晰展示SSAO效果,所以场景中的显示对象都是纯色的。请见下面的两个效果图比较....原创 2019-02-18 10:25:58 · 756 阅读 · 0 评论 -
3D纹理展示方式之RayMarch(光线投射)(glsl源码说明)
Demo:http://www.artvily.com/renderCase?sample=tex3DRayMarch3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学,游戏等等。一般来说3D纹理,可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就...原创 2019-02-14 23:56:51 · 1448 阅读 · 5 评论 -
3D纹理展示方式之Slice(切片)
Demo:http://www.artvily.com/renderCase?sample=tex3D3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学,游戏等等。一般来说3D纹理,可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就是一张图片(实...原创 2019-02-14 23:24:26 · 2418 阅读 · 0 评论 -
通过纹理数据以及其他参数在合适的纹理表现位置来"干扰"法线,来增强纹理表现的质感
demo:http://www.artvily.com/renderCase?sample=defaultLightInit以上demo使用了3个点光源(ADS光照)一般光照分为漫反射和镜面反射,这两部分可以分开计算法线的方式和混合比例来适应对应的表面材料的表现。而且干扰的算法和输入的干扰的参数可以是专门的纹理数据也可以是别的数据光照结果和源纹理混合也可以使用混合参数来调节这些...原创 2019-01-09 14:04:16 · 234 阅读 · 1 评论 -
纯GLSL分步实现电影般画面的湖光山色<Step1>: 艳阳蓝天(WebGL实现)
在实时渲染领域,呈现一个绚丽的画面除了艺术美术的功力之外,还需要大部分的技术支持: 数理几何原理和渲染技术。GLSL(OpenGL的Shader语言,用于对GPU渲染过程实现编程控制)就是这些技艺和呈现之间的桥梁。一个稍微复杂的画面,用纯GLSL实现,除了要熟悉这个语法以及对应的GPU功能之外还需要熟悉数理原理和一些技巧,所以包含的内容比较多。湖光山色是一个富有诗意的画面,在Shade...原创 2018-10-18 12:33:00 · 599 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(12): Shadow And AO(WebGL实现)增强立体感
Demo1:http://www.artvily.com/sdf?sample=codeDemo&clip=shadowAndAO3Demo2:http://www.artvily.com/sdf?sample=codeDemo&clip=shadowAndAO2AO(Ambient Occlusion) 中文翻译为环境遮蔽, 这个功能可以在渲染中有效增强立体感。可...原创 2018-10-08 13:18:29 · 961 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(11): 阴影(WebGL实现)
Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=shadow01Thanks very much:http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm在常见的3D渲染引擎中,阴影一般都会用shadowmap, 这样可以尽可能的优先利用硬件资源。而S...原创 2018-10-08 12:42:06 · 1268 阅读 · 1 评论 -
GLSL中 Billboard和Point的顶点空间变换
Billboard(永远朝向摄像机的平面, 但是会有近大远小的透视效果):顶点空间变换的代码: +"attribute vec2 a_vs;" +"attribute vec2 a_uvs;" +"uniform mat4 u_viewMat;" +"uniform mat4 u_projMat;" +"un...原创 2018-09-06 12:51:05 · 580 阅读 · 0 评论 -
基于GL_POINTS的粒子系统会节省很多显存和带宽
demo:1.http://www.artvily.com/sample?sample=gpuPointParticle2.http://www.artvily.com/sample?sample=pointParticle原创 2018-09-08 14:43:31 · 734 阅读 · 0 评论 -
Opengl跨平台开发小记
跨平台开发,要保证同样的输入就能得到一致的输出。所以在使用Opengl API的时候,就要注意它是不是能保证各个平台的一致性。最近解决了一个Bug, 在windows 系统环境下显示正常,但是到了web环境就出问题了,开始还以为是某些编译参数或者基本逻辑的问题,完全没想到是有同事吴用某些API的问题。后面才知道是用了 glGetActiveUniform 这个API来实现一个Material的功能...原创 2018-08-31 12:34:01 · 806 阅读 · 0 评论 -
Opengl中使用Framebuffer要注意的一些问题
1.Framebuffer身上附加的Texture id要保存好,防止被意外glDeleteTextures(..) 删除掉。如果这个 Texture id 被删除,则会出现意想不到的错乱。你在将绘制目标设置为这个Framebuffer的时候,最终得到的结果可能是别的Framebuffer的内容。2.不要将清理Framebuffer和将Framebuffer身上attachment 的text...原创 2018-08-13 11:22:43 · 937 阅读 · 0 评论 -
多重纹理的应用: 表现岩石地表间的湖泊的动态效果
demo:http://www.artvily.com/sample?sample=multTex使用了三重纹理表现岩石地表间的湖泊原创 2018-07-28 11:57:22 · 245 阅读 · 0 评论 -
WebGL实现的一个Depth Blur(深度模糊/或景深模糊)的动态效果
demo:http://www.artvily.com/sample?sample=depthBlur移动端Demo:http://www.artvily.com/sample?sample=depthBlur3实现原理: 在渲染到贴图(RTT)的过程记录下深度值(最好用float texture format),然后不同的深度取不同的模糊值(这里只做了距离摄像机越远,越模糊),这里...原创 2018-07-30 14:22:33 · 2725 阅读 · 2 评论 -
glsl 实现的热气流动及其变体的效果(源码地址)
请见: https://www.cnblogs.com/vilyLei/articles/9271698.html原创 2018-07-06 09:56:16 · 363 阅读 · 0 评论 -
glsl 实现的热气流动及其变体的效果(源码)
上图(因为webgl的限制,无法再web跑):glsl:void main(){ vec4 color; float cosV = cos(vTime); color = texture(texSampler, 0.5 * vec2((uv.x + vTime * 0.1),(uv.y + vTime * 0.1))); float e = color.r; float seg = ...原创 2018-07-05 20:32:28 · 745 阅读 · 0 评论 -
WebGL glsl fragment 着色器实现的纹理动画: 神秘海洋
效果链接:点击打开链接glsl代码:this.vshdCode = "precision mediump float;" +"attribute vec3 a_vtx_pos;" +"attribute vec2 a_vtx_uv;" +"varying highp vec2 v_texUV;" ...原创 2018-07-04 21:43:36 · 1100 阅读 · 1 评论 -
WebGL glsl fragment 着色器实现的纹理动画: 雷达扫描效果
Demo:http://www.artvily.com/palette?sample=palette&clip=texRadar截图:glsl代码:this.vshdCode = "precision highp float;" +"attribute vec3 a_vtx_pos;" +"attribute ...原创 2018-07-04 21:38:59 · 1603 阅读 · 0 评论 -
glsl(WebGL演示)白云朵朵效果
Demo:http://www.artvily.com/sample?sample=pointCloud代码在浏览器缓存中(代码是基于自己渲染引擎的简化版,但是有详细分类)原创 2018-09-10 20:35:49 · 1187 阅读 · 1 评论 -
3D空间物体的朝向和速度方向一致的演示及源码
Demo:http://www.artvily.com/sample?sample=objectDirection实现的原理: 目标朝向和当前朝向的矢量叉乘的normalize()作为旋转轴,他们两者之间的夹角作为旋转角(弧度),使物体只做了缩放旋转变换的矩阵转向目标朝向。还有原理请见:https://blog.csdn.net/vily_lei/article/details/45397...原创 2018-09-18 19:26:38 · 600 阅读 · 1 评论 -
Opengl(WebGL)前向渲染中的基本光照(包括多光源)
Demo:http://www.artvily.com/sample?sample=lightBaseDemo:http://www.artvily.com/sample?sample=lightGroup如果打开报错,请清理一下缓存。上面两张图分别为固定的简单光源和任意组织的多光源(lightGroup: 环境光, 平行光,点光源,聚光灯, 以及BlinnPhong光源)...原创 2018-09-18 19:53:09 · 863 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(7): 距离场函数-基于CUBE计算方式产生的若干变体A
SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数,这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数,来实现其各种各异的变形,下面的demo只是展示了基本的变体(改变cube的计算方式生成的Cube变体)。Demo1:http://www.artvily.com/sample?sample=sdfStep09distortion3效果图:...原创 2018-09-29 10:01:03 · 4666 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(6): 空间复制(repeat)(生成大规模显示对象)
Demo1:http://www.artvily.com/sample?sample=sdfStep09distortionDemo2:http://www.artvily.com/sample?sample=sdfStep09distortion2通过这种方式和SDF独有的计算方式可以绝对轻松的"制造"非常大规模的"显示对象",效果图如下:...原创 2018-09-28 19:20:27 · 1176 阅读 · 0 评论