如何在 ShaderToy 上繪製字符（三種方法）

原創 panda1234lee 2020-06-29 23:32

繪製的效果

第一種方法：
繪製字符的最終效果
第二種方法：
其他繪製字符的方法
第三種：直接採樣 Shadertoy 提供的字符紋理貼圖（1024x1024大小的紋理，16x16個字符）

文字貼圖效果

第一種字符繪製方法

以 ‘a’ 舉個栗子

我們這裏使用的字符是 Simplex Hershey Vector Font
它是一種比較簡單的基於 Hershey 字符集的向量化的字體。

其中，‘a‘ 的繪製需要用到 16 個點，對應的字符繪製代碼如下

// CHAR: 97 :a
/// @param uv: 紋理座標
/// @param s: 控制字體的大小
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Shader特效——“酷炫的 ❤️ Beating” 的實現【GLSL】

效果視頻 優酷視頻鏈接 Shader 特效——酷炫的HeartBeating 效果圖 GIF 壓縮有畫質損失     完整代碼與註釋 void mainImage( out vec4 fragColor, in vec2 fr

panda1234lee 2020-06-30 01:19:32

Shader特效——“Generalized Kuwahara” 的實現 【GLSL】

目錄 引言 具體改進 代碼及詳解 效果圖 作者論文方法的效果圖

panda1234lee 2020-06-30 00:19:31

非常方便的 VSCode 的 Shader 插件 —— Shader Toy

  Visual Studio Code - Shader Toy 這個擴展可以在 VSCode 中查看 GLSL 着色器的 WebGL 實時預覽，通過提供 “Show GLSL Preview” 命令可以達到類似於訪問 shader

panda1234lee 2020-06-30 00:19:31

ShaderJoy —— 6 種 LUT3D 濾鏡 【GLSL】

 PS 一步一步製作 LUT3D 濾鏡參考地址（戳它）    效果圖   Amaro   Nashville  

panda1234lee 2020-06-29 23:32:39

Shader特效——“震盪波” 的實現【GLSL】

效果如圖：   核心原理： 設震盪波的參數爲 a=10, b=0.8, c=0.2 如果我們着眼於某一個時刻 time（time 不變） ，有一段範圍 dist 的像素 [time -c, time+c]，即它們處在畸變的範圍內，那麼令

panda1234lee 2020-06-29 23:32:39

Shader特效——“Flow based eXtend Difference of Gaussian” 效果 【GLSL】

效果圖對比 原圖   不同參數下的效果-0  

panda1234lee 2020-06-29 23:32:39

ShaderJoy —— 三種 USM 銳化算法和實現 【GLSL】

效果圖 原圖   第三種算法的效果圖（頭髮和衣服紋理部分清晰了不少）     第一種算法簡述 (源圖像 – weight * 高斯模糊)/(1 - weight), 其中 weight 表示權重 [0.1, 0.9]，默認爲 0.6

panda1234lee 2020-06-29 23:32:39

Shader特效——“變換的五角星” 的實現 【GLSL】

  效果圖   靜態圖   動態圖  圖解分析  爲啥需要旋轉 18 ° vec2 circlePoint(float ang) { // 調整五個點所構成的邊的角度 ang -= PIx2 * 0.05;

panda1234lee 2020-06-29 23:32:39

Shader特效——“百葉窗” 的實現【GLSL】

  效果圖：   靜態圖   動態圖   代碼及詳解： 代碼很簡單，讓我們直接來看代碼  varying vec2 texcoord; // uniform float iGlobalTime; // uniform vec2 i

panda1234lee 2020-06-29 23:32:39

Shader特效——“愛心 ❤️ 轉場” 的實現 【GLSL】

效果視頻 Shader特效——“愛心❤的變換” 的實現 【GLSL】   靜態效果圖 ❤   設計思路與核心代碼  首先我們將紋理座標 p 換算爲以 center 爲中心的座標系，如下所示 float inHeart (vec2

panda1234lee 2020-06-29 23:32:39

Shader 特效——“水面波紋消散” 的實現 【GLSL】

  視頻效果： bilibili: Shader 特效——水面波紋消散   youku: Shader 特效——水面波紋消散   圖片效果： 原理詳解：

panda1234lee 2020-06-29 23:32:28

Shader 特效——“小 ❤️ 亂撞 ” 【GLSL】

效果視頻   Shader 特效 —— “碰撞出 ❤ 的火花”   效果圖   稍加修改的效果-0   稍加修改的效果-1   代碼和詳解  1.BufferA #iChannel0 "fil

panda1234lee 2020-06-29 23:32:28

Shader特效——噪聲之美，大家一起 “噪” 起來 【GLSL】

本文是學習了 CandyCat 的博客之後寫的一個小結，女神的博客理論寫得非常詳盡，看完有種醍醐灌頂+如沐春風的感覺！！！ 但是女神在計算 Simplex 噪聲單形的邊長時，沒有說清單形（二維上是等邊三角形）的邊長  是怎麼計算的到的，我

panda1234lee 2020-06-29 23:32:28

Shader 特效——“透視投影” 的實現 【GLSL】

效果視頻 Shader 特效——左右透視投影   Shader 特效——上下透視投影   更進一步可以實現更加複雜的效果： Shader 特效——立方體透視投影   算法原理

panda1234lee 2020-06-29 23:32:28

兩種更加自然的 “翻頁 ”效果的原理和實現

使用純 Shader 實現翻頁效果   效果視頻   更自然的翻頁效果 Shader 特效——更自然的翻頁效果   該效果可以隨着鼠標移動、任意角度，更加流暢自然。   還有一個翻頁效果，都是純 shader 實現，其中原理也是相通

panda1234lee 2020-06-29 23:32:28