glsl
DBBH
成都有合适webgl/webgpu岗位的请私信我
展开
-
glsl 心型绘制分析
void mainImage( out vec4 fragColor, in vec2 fragCoord ){ // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy *2.0 -1.0; // Time varying pixel color vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4)); vec2原创 2022-02-22 10:30:16 · 417 阅读 · 0 评论 -
threejs 第四十一用 shader实现蜂窝六边形纹理
实现原理是参考的shaderbook,做法和那书上也有点点的不一样,灵光一闪,这个可以生成到rtt上,然后贴给几何图形,我其实比较喜欢这个形状的,很有科技感。threejs交流群511163089...原创 2019-11-03 14:31:20 · 1408 阅读 · 0 评论 -
web端的shader效果九 three.js里shader实现较平静的水面
具体做法可以参考threejs的reflector实现的拿到反射的部分 refactor实现的拿到折射的部分 然后我搭配的dudvMap 再加一个普通的phong 看起来还是比较像水面的...原创 2019-10-24 22:35:29 · 2310 阅读 · 0 评论 -
glsl进阶学习6
这是个好东西 是来自TDM这个大佬的代码out p;float tm=0.0;float tx=1000.0;float hx=map(o+d*tx);if(hx>0.0)return;float hm=map(o+d*tm);for(int i=0;i<STEP;i++){ float tmid=mix(tm,tx,hm/(hm-hx)); p=o+...原创 2019-01-11 16:58:36 · 209 阅读 · 0 评论 -
threejs第二十二用 bloom单个或者几个选定的对象
参考的learnOpenGL的bloom这个单个对象还能半透明发光 不过半透明看着。。我感觉是么有实心的看起来亮 图上是实心的效果然后深度冲突的问题得看看怎么解决。解决掉遮挡的问题了。之后需要看看U3D UE4的处理手法 感觉我这个发光太朴素 没有炫的感觉最后还是使用UE4的shader来发亮 看起来很好看这个unrealBloom是模糊1次 再把模糊后的...原创 2019-02-25 13:58:04 · 2793 阅读 · 2 评论 -
glsl进阶学习7
float hash(vec3 p){ float h=dot(p,vec3(327.73333,10675.23857,1736.4243589)); return fract(sin(h)*42387.2355837);}float noise3D(vec3 p,float res){ p*=res; vec3 i=floor(mod(p,res)); ...原创 2019-03-06 11:36:39 · 343 阅读 · 0 评论 -
Pbr学习 没有环境贴图的pbr部分
从learnOpenGL学习的D部分正态分布函数DD,或者说镜面分布,从统计学上近似的表示了与某些(中间)向量hh取向一致的微平面的比率。举例来说,假设给定向量hh,如果我们的微平面中有35%与向量hh取向一致,则正态分布函数或者说NDF将会返回0.35。目前有很多种NDF都可以从统计学上来估算微平面的总体取向度,只要给定一些粗糙度的参数以及一个我们马上将会要用到的参数Trowbridge...原创 2019-03-10 14:56:01 · 462 阅读 · 0 评论 -
web端的shader效果
我用glsl在threejs框架下撸的。看着效果还行吧原创 2019-03-29 02:08:17 · 609 阅读 · 0 评论 -
web端的shader效果3
这个glsl扫描还是比较简单的。如果改改颜色 应该有些场景还是用得上的原创 2019-04-20 18:42:16 · 511 阅读 · 0 评论 -
web端的shader效果2
扫光的glsl 看起来还是比较花哨的下面还有动图看链接:https://pan.baidu.com/s/1BkMTAxvFoP_WF9nRgEzrDg提取码:qbsq原创 2019-04-19 23:07:25 · 775 阅读 · 0 评论 -
glsl中 矩阵和向量的一些常见用法
http://en.wikibooks.org/wiki/GLSL_Programming/Applying_Matrix_Transformations原创 2019-07-29 10:46:56 · 1150 阅读 · 0 评论 -
web端的shader效果6 黑白方格
https://www.shadertoy.com/view/WtjSRz中午碎不着的时候看看 帮助你睡眠threejs交流群511163089原创 2019-08-03 14:59:08 · 371 阅读 · 0 评论 -
glsl进阶学习8
我们来画出平躺着的圆环//SDFfloat value1 = sqrt(x*x+y*y)-r1;float value2 = sqrt(value1*value1+z*z)-r2;return value2;但是。。这个东西怎么旋转平移喃。。我还需要再学习学习...原创 2019-08-02 08:56:24 · 220 阅读 · 0 评论 -
web端的shader效果七 线框模型 科技感
线框模型,初步实现了一下 侧面 我的这个做法房顶需要单独搞才会正常 不过我没有单独的房顶,没有搞来看原创 2019-08-21 15:21:14 · 1392 阅读 · 0 评论 -
glsl 进阶学习3
绘制一个box sphere min可以求并集 有一个小于0就绘制max 可以求交集 都小于0 都相交才绘制感觉。。差应该是物体直接减去交集吧。。重点是平滑的过渡 看效果应该是如果两个部分挨得很近。还没挨着,不知道究竟挨着没有,这种时候就处理一下像素来平滑的过渡float sdf_smin(float a, float b ){ float k = 32.0;...原创 2018-12-07 14:21:19 · 238 阅读 · 2 评论 -
glsl进阶学习5
看了一位老师傅的水波纹shader 大概讲的是距离P的距离关联一些距离 时间因素 作为sin(r)中的r 然后得到z 这个z用颜色来表达 感觉又多了一点3维函数的感觉 之前都考虑的是x变化了得到y, y就作为颜色了 但是这样操作就变为x y共同联动得到Z z作为颜色color=a*(sin(r+time*speed))+d这是用到的那个公式 。...原创 2018-12-14 10:48:32 · 141 阅读 · 0 评论 -
QT OpenGL shader基础光照
用cube那个工程 自己去把顶点补充一个QVector3D的顶点法向量 然后把需要传入的uniform补上摄像机位置 灯颜色 灯位置 model矩阵 MVP矩阵VERT#ifdef GL_ES// Set default precision to mediumprecision mediump int;precision mediump float;#endifuniform mat4 mvp_m...原创 2018-05-08 19:56:30 · 1190 阅读 · 0 评论 -
QT OpenGL 天空盒
正常加载shader program 就是图片不一样了 立方体贴图 可以看看learnopenglQT里面封装了QOpenGLTexture这个类设置target就可以加载立方体贴图initTextures(){ const QImage posx = QImage(":/left.jpg").mirrored().convertToFormat(QImage::Format_RGB...原创 2018-05-27 15:37:39 · 885 阅读 · 2 评论 -
OpenGl阴影
先使用FBO装一个深度贴图 此处要先将镜头移到光源 然后保存深度 这时候z值保存的是最近可见的片元的深度值,这里是重点。按原始场景来 每个片元 转到光源坐标系下面进行透视除法,然后看看深度是否大于阴影贴图的 大于则在阴影中。vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w;curD=projCoords.zm...原创 2018-08-09 17:46:40 · 583 阅读 · 2 评论 -
webGL绘制不同物体基本内容
跟OGL一样 需要先有VBO 再用vertexAttribute传定点属性 然后draw这个是一个基本例子 包含创建使用VBO EBO 创建使用shaderProgram<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&原创 2018-08-14 14:11:18 · 509 阅读 · 0 评论 -
webGL拾取
原理:首先 给object一个key 然后keyToColor 然后 fragment里面 uniform这个 keyToColor 然后画出来 画在FBO上面 每一个object就会有独特的颜色在这张图片上面了。 拾取就readpixel 是读这张FBO 得到rgba 转化为key 然后key反向找一个object 就找到了栗子 第一个object key=1 color弄成0 0 1 0...原创 2018-11-09 13:31:26 · 690 阅读 · 1 评论 -
glsl 内置内容
转自 https://blog.csdn.net/hgl868/article/details/7876257OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中,有些是针对固定硬件的,所以这部分只能用在某个特定的着色器上。 内建函数基本上可以分为一下三类:(1)它们使用一些简便的方式提供必要的硬件功能,如材质贴图。这些函数...转载 2018-11-02 16:35:22 · 245 阅读 · 0 评论 -
glsl smoothstep step
smoothstep (x y a )参数 y必须大于x 然后 a如果小于x 返回 0 如果a>y 返回1 在x y之间 返回 3a^2-2a^3step (x a)参数 如果a小于x就是0 否则 返回1 相当于比较大小...原创 2018-11-21 18:45:54 · 4827 阅读 · 0 评论 -
glsl mix
mix(x,y,a) a控制混合结果 return x(1-a) +y*a 返回 线性混合的值原创 2018-11-21 18:48:44 · 9520 阅读 · 0 评论 -
glsl clamp
clamp(a x y) 返回中间大小的值 例如 clamp(5 1 4) 返回的是4 。 -3 1 2返回1 第一个和第二个比 选出大的temp 然后temp和第三个比 选出小的原创 2018-11-23 11:08:02 · 4217 阅读 · 0 评论 -
glsl进阶学习 一
shadertoy上面的环境 一开始会有一个逻辑尺寸和画布尺寸的比值uv先来尝试一个plane这主要计算一个t P是平面上一个点 另一个点是光线与平面交点 叫P1吧P1=o+dt t是时间?反正dt就是方向上的距离 o+dt就是新的点与normal dotproduct==0就是P1在平面上了(P-P1)▪N=0 ==》(P-(o+dt))▪N=0 P▪N=o▪N...原创 2018-12-03 10:17:41 · 165 阅读 · 0 评论 -
glsl 进阶学习2
关于求一个盒子 p=point c=center s=size d=distance float box(p,c,s){ vec3 ans=abs(p-c); 这样求出这个点到中心的距离 ans-=s;这样算出了x y z三个面跟size的比较 在内部就都<0float d=max( max(ans.x,ans.y),ans.z; 有一个大于0了就没在盒子里了 所以...原创 2018-12-05 10:34:15 · 167 阅读 · 0 评论 -
glsl 进阶学习4
怎么旋转视角呢。屏幕就是你视线方向,那移动eyeposition就可以了 但是你光是人动了 眼睛一直看一个地方 很奇怪的 所以要调整面朝方向 。我感觉相当于你站的方向调整为要正对着dir 就是光射出去的方向。 就像mvp那种做法 这里也构造一个viewMatrix face up right 然后 三个vec3加起来normalize 就作为此时的dir了。栗子 一个target 0 0...原创 2018-12-07 20:57:39 · 547 阅读 · 0 评论 -
QT OpenGL blinnphong
就是normalize(eyedir+lightdir)求一个halfwaydireyedir=eyepos-fragpos lightdir=lightpos-fragpos fragpos=a_position*modelpow(max( dot(eyedir,halfwaydir),0) ,material.shininess)=specspecular = light.specular...原创 2018-05-15 10:02:51 · 222 阅读 · 0 评论