ShaderJoy —— 如何在 ShaderToy 上绘制字符（三种方法）

清疚 2023-07-11 11:28 8阅读 0赞

# 绘制的效果 #

第一种方法：  
![绘制字符的最终效果][20200305171558589.png]  
第二种方法：  
![其他绘制字符的方法][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ_size_16_color_FFFFFF_t_70]  
第三种：直接采样 Shadertoy 提供的字符纹理贴图（1024x1024大小的纹理，16x16个字符）

![文字贴图效果][2020042122430634.gif_pic_center]

# 第一种字符绘制方法 #

## 以 ‘a’ 举个栗子 ##

我们这里使用的字符是 [Simplex Hershey Vector Font][]  
它是一种比较简单的基于 Hershey 字符集的向量化的字体。

其中，‘a‘ 的绘制需要用到 16 个点，对应的字符绘制代码如下

// CHAR: 97 :a
    /// @param uv: 纹理坐标</

[20200305171558589.png]: https://img-blog.csdnimg.cn/20200305171558589.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305184058472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmRhMTIzNGxlZQ==,size_16,color_FFFFFF,t_70
[2020042122430634.gif_pic_center]: https://img-blog.csdnimg.cn/2020042122430634.gif#pic_center
[Simplex Hershey Vector Font]: http://paulbourke.net/dataformats/hershey/

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 matlab如何在地图上绘制圆圈

要在 Matlab 中在地图上绘制圆圈，可以使用 `geopoint` 函数创建圆圈的圆心位置，然后使用 `geobubble` 函数绘制圆圈。示例代码如下： l

朱雀/ 2024年03月25日 14:37/ 0 赞/ 101 阅读

相关如何在IDEA中集成Tomcat【提供三种方法】

1、在IDEA中配置Tomcat ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

红太狼/ 2023年09月29日 07:20/ 0 赞/ 6 阅读

相关绘制矩形在图片上

rectangle(src, boundRect[i], Scalar(0, 255, 0)); 转载于:https://www.cnblogs.com/wllwqd

╰半橙微兮°/ 2023年08月17日 16:27/ 0 赞/ 57 阅读

相关 shaderToy学习篇

觉得shadertoy上的一些网友的作品写得很好，加上自己对glsl一些内置函数，内置变量不是很熟悉，于是决定开始学习一下上面一些大佬的代码。今天的案例是这个： ![12

分手后的思念是犯贱/ 2023年08月17日 15:42/ 0 赞/ 85 阅读

相关 ShaderJoy —— 如何在 ShaderToy 上绘制字符（三种方法）

绘制的效果第一种方法： ![绘制字符的最终效果][20200305171558589.png] 第二种方法： ![其他绘制字符的方法][watermark_

清疚/ 2023年07月11日 11:28/ 0 赞/ 9 阅读

相关如何在IDEA中集成Tomcat【提供三种方法】

1、在IDEA中配置Tomcat ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

落日映苍穹つ/ 2023年07月03日 06:14/ 0 赞/ 14 阅读

相关 ShaderJoy —— 方向向量场的绘制【GLSL】

效果图 ![20201208033030531.gif][] 圆形向量场 ![20201208040658424.gif][] ♥ 形向量场完整代码和详细注释：

- 日理万妓/ 2022年12月27日 04:48/ 0 赞/ 193 阅读

相关如何在IDEA中集成Tomcat【提供三种方法】

1、在IDEA中配置Tomcat ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

Dear 丶/ 2022年12月17日 01:23/ 0 赞/ 170 阅读

相关 Vue之数据三种显示在模板上的方法

\{ \{\}\}:双大括号会将数据解析成纯文本 <div id="app1">{ {msg}} </div> v-text:会将数据解析

客官°小女子只卖身不卖艺/ 2022年04月22日 10:20/ 0 赞/ 203 阅读

相关 Revit 绘制斜楼板的三种方法

方法一建筑 - 楼板 - 绘制 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

小灰灰/ 2022年02月15日 02:25/ 0 赞/ 547 阅读