讲一讲一种新型的字体渲染方式

新的方式,其实一点也不新,其实是一种称为signd distance field的矢量图保存和渲染方法。

早在二零零几年,就已经有一些游戏应用了这种技术,而他用于字体渲染也被发掘多时。

但是这个世界,技术成果转化的速度总是很慢很慢,这个优势明显的技术一直没有普及开来。

?

1.矢量的优势

我们先来说说矢量和位图的区别:

一个汉字,人眼看起来就是一个形状

这是位图,是上面那个汉子用位图存储方式放大后的一个局部

再来看看矢量化放大的效果

瞎子也能明白,矢量是适合缩放的。

现在游戏中,因为大量使用位图字体,而位图字体并不适合缩放,于是如果要用不同大小

位图放大后都是这个屌样子。

2.Signeddistancefield表示法

这也是为什么我们要引入signddistancefield,他是一种矢量表示法。

用位图,表示矢量,表示方法我随便一说,你随便一听,并不是太有所谓。因为我会给你一套东西,你能照猫画虎用起来。

还是这张图,把他存成一个很小的像素图,只不过每个像素存的不是颜色,而是离边的最短距离。

现在白色部分,在形状内,存为负值,黑色部分,在形状外,存为正值。

请忽略我拙略的绘图技巧。

这样保存后的图片,你可能会问我,一个像素分量是0~255,咋存正负,我会告诉你,128当零,行不行。

这个细节不深究,让我们换个方法来表示,本质上是为了区分边的内外。比如我设定颜色255在形状内最深的地方,127是形状边,0是离形状最远的地方,当然我们也不需要离边太远的数据,可以让离边超出一定距离的数据全是255和零,只有在边附近,有过度。

这是一个文字用signeddistancefield表示法保存后的结果。

如我们所言,255是离边最远,在形状内的部分,外边的纯透明部分,是alpha为零里边最远的部分。

?

这样的表示法,在还原成形状的时候,我们只要判断 >就行了,>127的部分画出来,就是原来的形状

>200的部分画出来,是个向内收缩的形状。

>100的部分画出来,是个向外扩张的形状。

我们如果要做描边,可以在shader里写个if

比如>127纯白 100-127 黑色。

你可能会发现一个问题,这种情况只有透明不透明,两种情况。

这个问题还不简单,你一次采样周围几个点,比如四个,加上自己,算出透明度平权,不就有5级透明度了么。

?

而且因为源数据是离边的距离,两个像素的插值就是当前像素离边的距离。

这个信息是线性的,插值数据不会偏离太远,抗缩放性能非常好。

3.实战SignedDistanceField

第一步,把图片或者字体保存为signeddistancefield

因为SDF实际上已经是应用很多的技术,所以工具并不缺乏。

我就找到了两个。

http://www.gamedev.net/topic/491938-signed-distance-bitmap-font-tool/

我们简称他BFTool,我很喜欢这个工具,因为很小巧,几百k,还包括源码和测试字体和图片。

还有龚敏敏的KLAYGE里面也提供了一个字体保存为signeddistancefield的工具

不过这玩意从他的一堆c++代码里剥出来要花点功夫。

我们这里就介绍一下BFTool

先下载这个工具

http://www.lonesock.net/files/SDFont.zip

他没有图形界面,but,whocare

找到这个文件

可以把一张png 或者一个ttf拖上去

然后输入一些参数,就会生成啦。

先找张图片

比如这个,至少1024以上

让我们把他输出成32*32的sdf图像

你可能无法期待这32*32个像素可以输出什么像样的效果。

来吧,见证奇迹的时刻到了。

这就是32*32的SDF图像还原出的效果,还顺便做了描边

更粗的描边

向内描边

使用的shader关键代码如下

http://code.taobao.org/p/fightbeta/src/trunk/dfbitmap/

?

很简单,就是ifif,描边没有任何开销,不过去狗牙要多几次采样。

能明白我再说什么的人自然明白。

4.关于字体

你已经看到了32*32的SDF图像能做到什么,如果你把文字生成为32*32的足够精细了。

一张2048的贴图,可以放4000个32*32的文字。

而且抗缩放,大小字号一图搞定。

只要把一个ttf字库拖入sdfont.exe

给他参数,你就能得到一张sdf图片,和一张字符uv描述文件

加油吧,骚年。

时间: 2024-10-07 04:46:13

讲一讲一种新型的字体渲染方式的相关文章

chrome css字体渲染方式

body { text-shadow: #707070 0.05px 0.05px 0.05px } * { font-family: Arial, "???è?ˉé??é??"; } * { font-weight: 400!important; } @font-face { font-family: "???è?ˉé??é??"; src: local("Source Han Sans Bold") } @font-face { font-f

(转)简述47种Shader Map的渲染原理与制作方法

在Shader中会使用各种不同图参与渲染,所以简单地总结下各种图的渲染原理.制作方法,最后面几种是程序生成图. 1. Albedo 2. Diffuse(Photographic) 从上图可以看出来,Albedo是去掉Diffuse的光照和阴影生成的,而在pbr工作流下必须要用Albedo. 转换方法:How to Make an Albedo Texture from a Diffuse Texture 3. Alpha Map 注意:jpg没有alpha通道,png也没有alpha通道,显示

5分钟读完华为区块链白皮书关键信息:推动构建一种新型价值网络

昨天,华为全球分析师大会(2018HAS)在深圳举行,华为云BU总裁郑叶来对外发布了<华为区块链白皮书>. 下面是玺哥整理的<华为区块链白皮书>中的关键内容,以飨各位. 一.华为看区块链兴起 1.华为认为:电子现金交易的本质是货币(或类货币)资产价值的转移.实际上区块链所带来的分布式记账理念不仅仅能够为电子现金交易服务,它可以被用于处理更广义上的价值转移:各类有形资产和无形资产的所有权归属和流通理论上都可以运用区块链技术进行记录和追踪,并完成点对点的价值交换.这对于社会商业的信息和

Galera Cluster——一种新型的高一致性MySQL集群架构

原文链接:https://www.sohu.com/a/147032902_505779,最近被分配定位mysql的问题,学习下. 1. 何谓Galera Cluster 何谓Galera Cluster?就是集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版本,分别是Percona Xtradb Cluster及MariaDB Cluster,都是基于Galera的,所以这里都统称为Galera Cluster了,

讲一讲什么叫阻塞非阻塞同步异步

1.讲一讲什么叫阻塞非阻塞同步异步全是用来形容方法的,形容一个方法返回值状态的. 2.io读取,网络读取,jdbc读取,这些流的操作都是bio的,都是阻塞的. 3.所以沃恩一般在处理io操作时,都采用多线程来提高bio的效率. 4.io操作,就是本地文件,网络,数据嘛嘛.所以在这三种读取数据时,都要采用多线程提高效率. 5.多线程处理阻塞方法时,只不过是避免了主线程的阻塞,但是让子线程,也就是处理每个http request的线程去发生阻塞了. 6.传统的古老的开发方式: 单线程执行阻塞方法->

好好讲一讲,到底什么是Java高级架构师!

一. 什么是架构师 曾经有这么个段子: 甲:我已经应聘到一家中型软件公司了,今天上班的时候,全公司的人都来欢迎我. 乙:羡慕ing,都什么人来了? 甲:CEO.COO.CTO.All of 程序员,还有会计.司机都来了. 乙:哇,他们太重视你了,人才啊,这么多人迎接你! 甲:没有啊,就一个人! 乙:靠,#%¥$%... 很多的创业公司,一人身兼数职的情形还是很常见的.至少,我是经历过的,一个人包办了所有的开发过程,连测试我都做了,绝对的一条龙,但是经常踩钢丝.骑独轮车总会有失足的时候,结果有一次

经典面试题|讲一讲JVM的组成

JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和运行时数据区组成部分,一般开发者关注的和面试官问的都是后者,但本文会详细讲解以上两个组成部分. 一.JVM 整体组成 JVM 整体组成可分为以下四个部分: 类加载器(ClassLoader) 运行时数据区(Runtime Data Area) 执行引擎(Execution Engine) 本地库接口

FastReport中的frxRichView如何设置二种不同的字体 [问题点数:100分,结帖人LIULIVERYOK]

FastReport中的frxRichView如何设置二种不同的字体 [问题点数:100分,结帖人LIULIVERYOK] 在frxRichView中有几段文字,如何给第一段文字设置不同的字体? 感激大虾们能给下答案!!! 来源:http://bbs.csdn.net/topics/390952125?page=1 解答: frxReport1->LoadFromFile(L"D:\\ccrun\\123.fr3"); TfrxRichView *f = (TfrxRichVie

由横瓜先生发起的一种新型的引力波网络传输技术的大讨论

Uyuw's Concert Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 6587   Accepted: 2611 Description Prince Remmarguts solved the CHESS puzzle successfully. As an award, Uyuw planned to hold a concert in a huge piazza named after its great d