原创 Shader特效——“酷炫的 ❤️ Beating” 的實現【GLSL】
效果視頻 優酷視頻鏈接 Shader 特效——酷炫的HeartBeating 效果圖 GIF 壓縮有畫質損失 完整代碼與註釋 void mainImage( out vec4 fragColor, in vec2 fr
原创 Shader特效——“Generalized Kuwahara” 的實現 【GLSL】
目錄 引言 具體改進 代碼及詳解 效果圖 作者論文方法的效果圖
原创 非常方便的 VSCode 的 Shader 插件 —— Shader Toy
Visual Studio Code - Shader Toy 這個擴展可以在 VSCode 中查看 GLSL 着色器的 WebGL 實時預覽,通過提供 “Show GLSL Preview” 命令可以達到類似於訪問 shader
原创 ShaderJoy —— 6 種 LUT3D 濾鏡 【GLSL】
PS 一步一步製作 LUT3D 濾鏡參考地址(戳它) 效果圖 Amaro Nashville
原创 Shader特效——“震盪波” 的實現【GLSL】
效果如圖: 核心原理: 設震盪波的參數爲 a=10, b=0.8, c=0.2 如果我們着眼於某一個時刻 time(time 不變) ,有一段範圍 dist 的像素 [time -c, time+c],即它們處在畸變的範圍內,那麼令
原创 Shader特效——“Flow based eXtend Difference of Gaussian” 效果 【GLSL】
效果圖對比 原圖 不同參數下的效果-0
原创 ShaderJoy —— 三種 USM 銳化算法和實現 【GLSL】
效果圖 原圖 第三種算法的效果圖(頭髮和衣服紋理部分清晰了不少) 第一種算法簡述 (源圖像 – weight * 高斯模糊)/(1 - weight), 其中 weight 表示權重 [0.1, 0.9],默認爲 0.6
原创 Shader特效——“變換的五角星” 的實現 【GLSL】
效果圖 靜態圖 動態圖 圖解分析 爲啥需要旋轉 18 ° vec2 circlePoint(float ang) { // 調整五個點所構成的邊的角度 ang -= PIx2 * 0.05;
原创 Shader特效——“百葉窗” 的實現【GLSL】
效果圖: 靜態圖 動態圖 代碼及詳解: 代碼很簡單,讓我們直接來看代碼 varying vec2 texcoord; // uniform float iGlobalTime; // uniform vec2 i
原创 Shader特效——“愛心 ❤️ 轉場” 的實現 【GLSL】
效果視頻 Shader特效——“愛心❤的變換” 的實現 【GLSL】 靜態效果圖 ❤ 設計思路與核心代碼 首先我們將紋理座標 p 換算爲以 center 爲中心的座標系,如下所示 float inHeart (vec2
原创 Shader 特效——“水面波紋消散” 的實現 【GLSL】
視頻效果: bilibili: Shader 特效——水面波紋消散 youku: Shader 特效——水面波紋消散 圖片效果: 原理詳解:
原创 Shader 特效——“小 ❤️ 亂撞 ” 【GLSL】
效果視頻 Shader 特效 —— “碰撞出 ❤ 的火花” 效果圖 稍加修改的效果-0 稍加修改的效果-1 代碼和詳解 1.BufferA #iChannel0 "fil
原创 Shader特效——噪聲之美,大家一起 “噪” 起來 【GLSL】
本文是學習了 CandyCat 的博客之後寫的一個小結,女神的博客理論寫得非常詳盡,看完有種醍醐灌頂+如沐春風的感覺!!! 但是女神在計算 Simplex 噪聲單形的邊長時,沒有說清單形(二維上是等邊三角形)的邊長 是怎麼計算的到的,我
原创 Shader 特效——“透視投影” 的實現 【GLSL】
效果視頻 Shader 特效——左右透視投影 Shader 特效——上下透視投影 更進一步可以實現更加複雜的效果: Shader 特效——立方體透視投影 算法原理
原创 兩種更加自然的 “翻頁 ”效果的原理和實現
使用純 Shader 實現翻頁效果 效果視頻 更自然的翻頁效果 Shader 特效——更自然的翻頁效果 該效果可以隨着鼠標移動、任意角度,更加流暢自然。 還有一個翻頁效果,都是純 shader 實現,其中原理也是相通