Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >shader技巧(持续更新)

shader技巧(持续更新)

作者头像
sofu456
发布于 2024-01-11 02:31:35
发布于 2024-01-11 02:31:35
19100
代码可运行
举报
文章被收录于专栏:sofu456sofu456
运行总次数:0
代码可运行
  • 数学函数: abs():绝对值函数。 acos():反余弦函数。 asin():反正弦函数。 atan():反正切函数。 ceil():向上取整函数。 cos():余弦函数。 cross():向量叉积函数。 distance():距离函数。 exp():指数函数。 floor():向下取整函数。 frac():小数部分函数。 length():向量长度函数。 log():自然对数函数。 max():最大值函数。 min():最小值函数。 pow():幂函数。 sin():正弦函数。 sqrt():平方根函数。 tan():正切函数。

  • 几何函数: normalize():向量归一化函数。 reflect():向量反射函数。 rotate():向量旋转函数。 scale():向量缩放函数。 translate():向量平移函数。
  • 纹理函数: texture2D():2D 纹理采样函数,输入sample和vec2,输出某个点的vec4向量 textureCube():立方体纹理采样函数,输入sample和vec2,输出某个点vec4向量
  • 高度计算 图像转为灰度图,灰度值表示点的高度 参考:https://search.bilibili.com/article?vt=12550451&keyword=shader%E7%AE%97%E6%B3%95
  • 随机函数,输入uv
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
float random (vec2 st) {
   return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
}
void main(){
   vec2 uv = gl_FragCoord.xy/iResolution.xy;
   gl_FragColor = vec4(vec3(random(uv)),1.0);
}

参考:https://blog.csdn.net/a_codecat/article/details/127563784

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
别人用 Shader 画了个圆,你却只能画椭圆?
由于主流的 Shader 编程网站,如 ShaderToy, gl-transitions 都是基于 GLSL 开发 Shader ,加上 MSL 和 GLSL 语法上差别不大,后面系列文章将以 GLSL 为主来介绍 Shader 编程。
字节流动
2023/09/04
8320
OpenGL & Metal Shader 编程:ShaderToy 内置全局变量
前面发了一些关于 Shader 编程的文章,有读者反馈太碎片化了,希望这里能整理出来一个系列,方便系统的学习一下 Shader 编程。
字节流动
2023/09/04
1.3K0
OpenGL & Metal Shader 编程:ShaderToy 内置全局变量
阅后即焚的燃尽图实现
我最开始是在一本书上掠过燃尽效果,当时就是觉得很有意思。但是最近才真正动手去实践它。我知道这个效果要用噪声实现,但是实际做的时候才发现不知道如何应用。于是,去shadertoy上搜索了一番。选取了三个例子,有了一点心得。
winty
2024/01/03
3310
阅后即焚的燃尽图实现
OpenGL ES Shader 怎样绘制一颗“心”
今天讲一下绘制心形的两种方式,主要是为了扩展一下绘制复杂形状的思路,为后面讲特效做一些简单的铺垫。
字节流动
2023/09/04
4870
OpenGL ES Shader 怎样绘制一颗“心”
OpenGL & Metal Shader 编程:解决图片拉伸变形问题
前面发了一些关于 Shader 编程的文章,有读者反馈太碎片化了,希望这里能整理出来一个系列,方便系统的学习一下 Shader 编程。
字节流动
2023/09/04
8020
OpenGL & Metal Shader 编程:解决图片拉伸变形问题
OpenGL & Metal Shader 编程:GLSL 重要的内置函数
为啥要单独写一篇讲讲 GLSL 的几个常用内置函数?主要是为了避免新手在 Shader 编程中看到一些关键字,如 ceil,f ract, smoothstep 等一脸懵。
字节流动
2023/09/04
2.2K1
OpenGL & Metal Shader 编程:GLSL 重要的内置函数
shadertoy绘图
shaderoty.com使用片段着色器绘图的网站,上面每周都会有很牛的绘图算法公布
sofu456
2020/08/13
8880
shadertoy绘图
Shader 入门与实践
Shader(着色器)是一种用于在计算机图形学中进行图形渲染的程序。它们是在图形处理单元(GPU)上执行的小型程序,用于控制图形的各个方面,如颜色、光照、纹理映射、投影等。
KhalilH
2024/05/16
9970
webgl实现径向模糊
径向模糊,是一种从中心向外呈幅射状,逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果,在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊。径向模糊(Radial Blur)可以给画面带来很好的速度感,是各类游戏中后处理的常客,也常用于Sun Shaft等后处理特效中作为光线投射(体积光)的模拟。
用户3158888
2020/08/27
1.6K0
用 Shader 写个完美的波浪~
根据我多年喝奶茶的经验,像这种效果用 Shader 做就再简单不过了,最终的效果如下:
陈皮皮
2020/09/10
1.9K0
渲染画(笑脸怎么画)
开始学习ShaderToy, 往往不知所措,看不太懂;不容易懂,背后全是数学公式;请看这篇了解一下原理和基础。 实践方法:请打开网站 https://www.shadertoy.com,点击新建开始实验。
全栈程序员站长
2022/07/31
1.9K0
渲染画(笑脸怎么画)
【前端er入门Shader系列】02—GLSL语言基础
Shader 一般由顶点着色器和片段着色器成对使用,GLSL 则是编写 Shader 着色器的语言,而 GLSL ES 是在 OpenGL Shader 着色器语言的基础上针对移动端和嵌入式设备的简化版。本章介绍 GLSL 语言相关语法。
CS逍遥剑仙
2025/01/08
8120
OpenGL ES Shading Language 2.0 参考笔记
声明 struct matStruct { vec4 ambientColor; vec4 diffuseColor; vec4 specularColor; float specularExponent; };
用户2615200
2018/08/02
8230
Shader 优化 | OpenGL 绘制网格效果
除了介绍 KodeLife 的使用之外,还附带了一个 Shader 绘制网格效果的代码。Shader 讲解
音视频开发进阶
2020/05/26
1.8K0
活用 Shader,让你的页面更小,更炫,更快
可编程着色器(shader)是运行在 GPU 中的程序,是现代图形渲染技术的基础。shader 赋予了开发者「逐像素着色」的能力。桌面/移动设备的图形程序 API 诸如 OpenGL,OpenGL ES,DirectX 以及新一代的 Vulkan,shader 都是重中之重,核心中的核心。
音视频开发进阶
2020/11/10
8840
活用 Shader,让你的页面更小,更炫,更快
GLSL-内置函数
GLSL内置了若干类内置的便利函数,用于标量和向量的计算。其中很多内置函数可以用于多个类型的Shader,也有一些是提供了直接操作硬件的方法,这种一般只适用于特定的Shader。 内置函数大致分为三类: 提供方便的函数来操作硬件,比如提供操作texture map的函数。在GLSL中没有其他的方式可以模仿这些函数实现对应的功能。 提供很多小的工具函数,比如clamp、mix等等,可以供开发者很方便的调用,都是非常常用的,有一些是直接操作硬件的。编译器把这些函数映射到复杂的编译指令集是一件困难的事情。
wxdut.com
2018/06/19
6.3K1
开源 2D 实时水面反射效果,源码详解!
引言:插件 Easy NavMesh、BenchMark 性能检测的作者孙二喵,从开发者王师傅的论坛分享中获得启发,实现了 2D 实时水面反射效果,Demo 免费开源。
张晓衡
2023/02/23
7190
开源 2D 实时水面反射效果,源码详解!
后处理——深入相机变形特效
后处理(Post-processing),是针对原有的游戏画面进行算法加工,达到提升画面质量或增强画面效果的技术,可通过着色器Shader程序实现。
Y.one
2021/05/31
1.6K0
后处理——深入相机变形特效
不瞒你说,我被这个特效感动哭了
浏览博客时,偶然间发现这个"跳动的心"特效,瞬间被感动了,当得知这个特效是用纯代码实现( GLSL 实现)的,确实又被惊到了。
字节流动
2020/06/02
9920
OpenGL YUV 和 RGB 图像转换出现偏色问题怎么解决?
早上知识星球里的一位同学,遇到 yuv2rgb 偏色问题,这个问题比较典型,今天展开说一下。
字节流动
2023/11/17
1.2K0
OpenGL YUV 和 RGB 图像转换出现偏色问题怎么解决?
相关推荐
别人用 Shader 画了个圆,你却只能画椭圆?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验