简介： 天猫618宣布的 3D 购物时代，相信有很多小伙伴好奇，这背后有哪些“黑科技”？橙子从以下三点为你揭秘——3D实景复刻、3D渲染、3D算法，上周讲了《天猫618宣布开启3D购物时代，实景逛街背后的技术是这样实现的》，本期将和大家分享 AceRay 极速渲染。

作者|躺平技术-3D技术与渲染平台组
编辑|橙子君
出品|阿里巴巴新零售淘系技术部

天猫618宣布的 3D 购物时代，相信有很多小伙伴好奇，这背后有哪些“黑科技”？橙子从以下三点为你揭秘——3D实景复刻、3D渲染、3D算法，上周讲了《天猫618宣布开启3D购物时代，实景逛街背后的技术是这样实现的》，本期将和大家分享 AceRay 极速渲染。

5月28日，天猫正式宣布开启3D场景购物时代，3D实景逛街从此走到了电子商务的最前线。用户足不出户便可逛各大卖场，在虚拟3D世界中，更可以享受自由搭配家具的畅快感受。

3D实景逛街意味着线下的卖场所有数据需要3D数字化，这涉及到3D内容生产，数据链路整合，3D渲染技术等多个领域，是一项规模浩大的工程，需要设计师，工程师，以及产业链方面的通力合作才能做到。

躺平设计家是阿里巴巴淘系技术部联合躺平推出的为商家和设计师服务的免费3D设计工具和渲染服务，是一个能够高效生产3D内容的平台工具。其中最新推出的依托于淘系技术部AceRay云渲染平台的极速渲染功能，大幅度提高了设计预览的速度，可以助力各商家和设计师更方便快速地制作3D内容，更好地融入3D场景化购物这一未来家装购物模式。

在躺平设计家里，用户可以非常方便地编辑3D场景，并利用极速渲染快速查看渲染效果。

AceRay 极速渲染云平台涵盖了大量的工程化设计和最新几何/渲染研究成果，包括3D资源的处理，服务器资源调度，以及图形渲染算法。

3D资源

在进入到渲染前，需要提前准备好渲染资源，这些资源包括模型、材质。

家装行业的业务复杂度很高，需要支持大量不同格式模型上传，同时需要为各个平台产出模型和材质。不同格式模型上传需要转成中间格式；目前家装模型通常三角面数都是非常高，需要通过几何优化手段把面数降下去；家装模型中的贴图通常都非常大，需要根据各个平台优化贴图；等等。

为了处理各个不同的问题，需要大量的服务器处理各个不同的问题，但是这些服务器怎样串通起来，怎样合理的调度能够使得这些服务器的综合效率最高，各个服务器间怎样并发处理大量的模型，为各个平台产出不同的模型格式，需要一个管控平台来处理这些问题。因此我们开发了模型中控平台，支持无上限提交模型，同时并发处理大量模型，为每个模型定制不同的处理流程，能够自由地控制每个模型的处理优先级。

模型中控平台中包含两个核心部分：流程引擎和调度引擎。

开始一个新模型转换流程时，第一步进入流程引擎，分析流程节点，找出第一个需要执行的节点；然后任务交付到调度引擎，调度引擎负责找出最合理的远程执行机器，将任务分给它，并等待它执行完毕；当远程机器执行完毕时，调度引擎将任务交回给流程引擎，流程引擎将当前模型流转到所属流程的下一个节点，再度交付到调度引擎。重复执行这样的过程，直到当前模型的全部流程被执行完。

模型中控平台上可以同时运行N种不同的处理流程，一种典型的处理流程如下：

解决了批量处理问题，我们有更多的单点问题需要解决，比如模型问题：

目前设计师或者工厂所涉及的家装模型通常三角面数都是非常高的，材质非常复杂。

高面数有利于增加模型的细节，但是对于极速渲染来说，这么多的三角面片就不是一件好事了。因此我们需要在渲染之前，预处理这些拥有大量三角面片的模型。目前市面上类似的工具应该说是形形色色，都能做到精简模型面片的功能。但是具体到细节上，减面后需要保持原模型的各种细节，要有精准的法线，uv等要求，最重要的是一套参数控制所有模型，能够达到非人工干预、自动化、规模化的模型处理工具，在工业界并不存在。因此我们自主开发了一套几何优化工具解决上述问题。

对比Max处理的模型，我们处理的模型在外形保持、细节保持和法线、UV保持都要更好。

细节保持效果：

外形保持效果：

在解决了面数问题后，我们需要进一步解决材质问题。在家装行业，比较常见的一种材质是Vray材质，这种材质的参数非常多，计算过程非常复杂，非常不利于极速渲染。而市面上又没有一种Vray材质转更简单材质的方法。因为我们自研了一套材质转换方案，将现存的材质转换到更简单的材质来提升极速渲染的速度。

以下是材质转换的效果：

3D云渲染服务

淘宝的商家依赖于我们的渲染服务，因此我们并非在开发一个单点渲染引擎，而是需要一个服务器集群来处理上大量的请求，这个服务器集群组成了云渲染平台。云渲染平台管理所有的渲染请求类型，包括离线渲染、极速渲染，以及布料仿真。云渲染平台隔离业务方和渲染服务器，并统一了渲染接口，调度器会为每个独立的请求寻找最合适的机器，最快速地完成这次渲染请求。

云渲染平台分为两层：调度集群和渲染集群。调度集群向渲染集群发送任务，渲染集群向调度集群上报状态。

渲染任务首先进入调度集群，调度集群根据上报的状态和发送历史，选择最优的渲染服务器，将任务发送给它；渲染服务器更新并上报它的机器状态，然后开始执行渲染。

AceRay极速渲染

设计工具通常都使用离线渲染器。离线渲染的效果很好，但是比较大的问题是渲染速度很慢，渲染一张图的时间短则几分钟，长则几小时。对于设计师来说，渲染速度慢无疑会降低生产3D场景的效率，特别是某些场景中有需要频繁调整的元素时，快速渲染的需求显得更为迫切。对于消费者，快速的效果预览也十分必要，人们通常没有耐心为了一张效果图等待太长时间。

AceRay极速渲染服务正是为了解决离线渲染速度慢的问题而诞生，渲染器的目标是要帮助设计师提高3D场景生产效率，提高消费者3D功能使用体验。

谈到渲染，效果永远是排在第一位的。如果没有优秀的渲染质量，那么再快的速度也失去了意义。我们使用 AceRay 云渲染平台，在十几秒内渲染了两张室内家装的效果图。

在保证上述的渲染效果时，极速渲染的渲染速度可以达到离线渲染的 20~30 倍，这无疑是一个很具有诱惑力的功能。在躺平设计家里，极速预览功能通常在3~5秒就能得到一张预览图像，极大提升了设计师的工作效率。

光栅化和光线追踪

首先简单介绍一下渲染原理。以游戏为代表的实时渲染业界通常使用光栅化渲染器，而以电影特效、设计工具为代表的离线渲染业界通常使用基于光线追踪的渲染器。

光栅化渲染的管线和光线追踪的渲染管线和有着很大的不同。传统的光栅化渲染管线包括顶点处理，图元组装，光栅化以及像素着色等阶段，是一套在游戏和实时渲染业界久经考研的渲染方案。自人类有图形硬件开始，图形硬件就在做一件事情，那就是加速光栅化渲染。然而光栅化渲染有着致命的缺陷，在渲染过程中，物体与物体之间的相互关系缺失。这个缺点导致了涉及到物体相互关系的光照效果都很难计算，需要设计特殊的算法，花费高昂的代价来实现。这些效果包括阴影，间接光照，镜面反射，环境光遮蔽等。正因如此，光栅化渲染的效果在很长一段时间内都难以比肩离线渲染，做不到真正的物理真实的渲染。

而离线渲染使用的基于光线追踪原理，简单来说是从相机的位置出发，向屏幕上的每个像素的位置发射光线，通过模拟光线的各种反射/折射/散射的过程，从而实现真实的渲染效果。光线追踪的原理是简单的，但是要达到真实的渲染效果，每个像素需要大量的光线和计算，这是导致离线渲染速度慢的最主要原因。尽管现在CPU通常都是多核设计，但是这些计算硬件在离线渲染巨大的计算量面前还是显得力不从心，要真正能做到能够在十几秒甚至几秒内渲染出效果图，这个效率还是远远不够的。

基于光线追踪的离线渲染器，本质来说是使用光线追踪的功能，利用蒙特卡洛方法，对高维的渲染方程做数值估计。而蒙特卡洛方法使用了随机采样，为了达到较好的渲染质量，需要很高的采样数量。

AceRay极速渲染采用定制的优化算法，很好的解决了离线渲染中需要很高采样数的问题，在较快的时间内使用光线追踪算法获得平滑的光照效果。

直接光照

间接光照

最终效果

总结

虽然图形学和光线追踪已经有相当长的历史了，基于光线追踪的快速渲染还是一个相对较新的领域。如何更好地利用硬件计算能力，结合当前业务的需求，做出快速而高质量的渲染器是一个相当富有挑战性的工作。虽然用户通常只会接触到最终的渲染效果图，然而渲染之前的模型处理，场景处理，服务器调度等工作是整个渲染服务的基石。3D业界的数据流目前是非常多样化的，如何兼容各种数据流，处理成为统一的渲染器输入格式，高效调度服务器资源，完成渲染，这背后的工作值得更多的关注和赞赏。

更多极速渲染效果图：

1、-webkit-line-clamp

可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示"..."

这是正常的展示

display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必须为vertical*/
-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/
overflow: hidden;

这是加了 line-clamp 后的展示

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

2、all

将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

all: unset; /*initial | inherit | unset*/

initial 改变该元素所有属性的值至初始值。

inherit 改变该元素的值 至 从父元素继承的值

unset 如果该元素的属性的值是可继承的，重置为父元素的继承的值，反之则改变为初始值。

3、box-decoration-break

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-decoration-break

4、caret-color

用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

caret-color: red;

5、clip-path / shape-outside

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。类似的裁剪还有 svg 的 clipPath。

clip-path 的取值有以下几种图形

inset(xxx): 裁剪为长方形

circle(xx): 裁剪为原型

ellipse(xxx): 裁剪为椭圆

polygon(xx): 裁剪为多边形

none: 不裁剪

例子前的准备

<div
  style="width: 500px; height: 500px;text-align: left;background-color:gray;color:white"
>
  <img
    class="clip-mode"
    style="float: left; margin:20px"
    data-original="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"
    width="150"
  />
  We had agreed, my companion and I, that I should call for him at his house,
  after dinner, not later than eleven o’clock. This athletic young Frenchman
  belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
  as a pastime. After having exhausted all the sensations that are to be found
  in ordinary sports, even those of “automobiling” at a breakneck speed, the
  members of the “Aéro Club” now seek in the air, where they indulge in all
  kinds of daring feats, the nerve-racking excitement that they have ceased to
  find on earth.
</div>

不裁剪

clip-path: none;

圆形裁剪

clip-path: circle(40%);  //半径为40%，圆心默认为中心

椭圆裁剪

clip-path: ellipse(130px 140px at 10% 20%);

多边形裁剪

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

我们可以看到上面图形如何裁剪，外面的看不见的框始终是矩形，也就是说文字始终是按矩形的样式在周围环绕。

那么有办法让文字紧紧的贴在裁剪的图形周围呢？
有的，使用 shape-outside 属性

shape-outside 定义了一个可以是 非矩形的形状，相邻的内联内容应围绕该形状进行包裹。默认情况下，内联内容包围其矩形边距;

默认矩形环绕

clip-path: none;
shape-outside: none

圆形环绕

clip-path: circle(40%);
shape-outside: circle(40%);

椭圆环绕

clip-path: ellipse(130px 140px at 10% 20%);
shape-outside: ellipse(130px 140px at 20% 20%);

多变性环绕

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

当然你不一定在圆形裁剪上，使用圆形环绕，你可以在圆形裁剪上使用多边形环绕，在多边形裁剪上，使用菱形环绕。总之这两个之间没关系，不是两两匹配的。都随你便，自己定义

6、object-fit / object-position

object-fit 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-position 属性来指定被替换元素的内容对象在元素框内的对齐方式。

注: 其中可替换元素有 iframe，video，embed，img，还有一些在特性情况也是可替换元素，option，audio，canvas，object

例子前的准备

<div style="width: 300px; height: 300px; background-color:gray;">
    <img class="clip-mode" style="height: 100%; width: 100%;" data-original="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg">
</div>

图片一定能要设置为宽高 100%，即不能超过父容器，才可以设置 object-fit，否则没意义。

fill 填满 图片会拉变形，宽度和高度都被拉到父容器的 100%，以适应父容器

object-fit: fill;

contain 包容 图片不会变形，图片会按照自身比例进行缩放，整个图片放入父容器中，较短的边会出现自动填充的空白。

object-fit: contain;

cover 覆盖 图片不会变形，图片会按照自身比例进行缩放，整个图片放入父容器中，按照图片最短的边，纳入父容器为基准。较长的边会溢出

object-fit: cover;

none 和父容器的宽高没关系。展示其图片最原始的宽高比，以自身图片的“中心”为基点，放置到父容器的“中心”位置。

object-fit: none;

scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

object-fit: scale-down;

如果图片比父容器尺寸大，那么按照 contain 的效果，如果图片比父容器小，那么按照 none 的效果。

在上面 object-fit 的展示中，我们发现可替换元素的对齐方式都是自动的。

比如 object-fit: fill; 的左上角和父容器的左上角对齐。

object-fit: none;的中心和父容器的中心对齐等等。

但是我们想手动更改对齐方式呢？？

可以使用 object-position 属性， 规定了可替换元素的内容，在其内容框中的位置。

object-position: 10px 10px; 可以设置 px，第一个值代表距离父容器左边的距离，第二个值代表距离父容器顶部的距离。只有一个数值则只代表距离父容器左侧的距离。也可以设置%数值，但此时只有某一边有空白才会起作用，如果没有空白，刚好铺满父元素，则不起作用。设置 px 就没有这样的问题，任何之后都会起作用。

object-position: right top;可以设置关键字，第一个值关键字可设置（left|center|right），第二个关键字可设置(top|center|bottom),此时不表示距离左侧或者顶部的距离，而表示放置在父元素的什么位置。

object-fit: fill;
object-position: 50px 50px;   //距离左侧10px，距离顶部10%

加 object-position 前后对比图:

object-fit: contain;
object-position: right top;  //停留子 右上方

加 object-position 前后对比图:

7、font-stretch

为字体定义一个正常或经过伸缩变形的字体外观，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

normal 默认字体

semi-condensed, condensed, extra-condensed, ultra-condensed 小于默认字体

semi-expanded, expanded, extra-expanded, ultra-expanded 大于默认字体

8、font-variant-caps

可以控制大写字母特殊字符的使用。

• normal 关闭一切特殊字符变体的使用。
• small-caps 允许小型大写字母的使用（OpenType 特性：smcp）。小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。
• all-small-caps 将大小写字母全部转化为小型大写字母。（OpenType 特性: c2sc, smcp）。
• petite-caps 允许特小型大写字母的使用（OpenType 特性: pcap）。
• all-petite-caps 将大小写字母全部转化为小型大写字母。（OpenType 特性: c2pc, pcap）。
• unicase 允许将大写字母转化为小型大写字母与普通小写字母的混用 （OpenType 特性: unic）。
• titling-caps 允许首字母大写（OpenType 特性: titl）。大写字母变体字符通常被设计成与用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。

9、font-variant-east-asian

控制对东亚字符(如日语和汉语,韩语等)使用替代符号。

值有一下几种:
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width

10、max-content / min-content / fill-available / fit-content

这几个值都可用在 width, height, min-width, min-height, max-width 和 max-height 属性上。

display 必须为 inline-block 或者 block，否则上面的值不起作用。

fill-available

元素撑满可用空间。参考的基准为父元素有多宽多高。

类似子元素的 div 撑满父元素的宽，fill-available 不仅可以撑满宽还能撑满高。

例子前的代码

<div style="width: 300px; height: 100px; background-color:gray;">
  <span style="display:inline-block;background-color: burlywood;"
    >这是子元素的内容</span
  >
</div>

给 span 上设置 fill-available 时的不同表现

假如里面的有个元素，是 img 呢？它也是 inline-block，应该也满足情况。

我们可以看到 img 和 span 的不同在于，设置 width 或者 height 其中一个时，整个 image 会按照自身比例缩放。

max-content

它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个长度最长(按照文字不换行时计算)的元素即可。
参考的基准为子元素有多宽多高。

<div class="parent">
  <div class="current" style="width: 200px; height: 300px; background-color:gray;">
    <p>这是普通的p元素行，内容为文字</p>
    <img data-original="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"/>
  </div>
</div>

给 current div 设置 max-content 时得不同表现。

min-content

它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可，剩余超长的要么换行，要么溢出
参考的基准为子元素“最小宽度值”有多宽多高。

什么是“最小宽度值”？
比如图片，最小宽度值，就是图片原始的宽高；如果是一串中文，则最小宽度值为单个汉字的宽高；如果是一串英文，则最小宽度值为里面单词最长的那个。

fit-content

表示元素自动伸缩到内容的宽度，和 max-content 的区别为，都是刚刚好容纳下子元素中那个长度最长的元素即可。

不同的是 max-content 在计算时按照文字不换行时计算，如果超过父元素，则不换行，直接产生滚动条； 而 fit-content 在超过父元素后，换行，不产生滚动条。

11、fit-content()

这个不同于上面的 fit-content 值，它是函数，用在 grid 布局当中。

(略)

具体查看 grid 布局。

12、resize

比较简单，可以查看

官方文档

13、scroll-behavior

当用户通过 API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为， 平滑到达还是立即到达

可以查看
官方文档

14、max() / min()

max 在两者这件取最大；min 函数在两者之间取最小。

max，min 可以用在任何可以设置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

width: max(50vw, 300px);
width: min(50vw, 300px);

15、clamp()

clamp 函数会在定义的 三个值之间，取中间的那个值，是大小在中间，不是位置在中间，

clamp(MIN, VAL, MAX)

和 max，min 函数一样，可以用在任何可以设置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

font-size: clamp(1px, 3px, 2px);    //中间值为2px
font-size: clamp(1px, 3px, 5px);    //中间值为3px
font-size: clamp(4px, 3px, 5px);    //中间值为4px

width: clamp(200rem, 25vw, 150px);  //在这三个之间取中间值

16、conic-gradient()

在渐变中我们知道，有:

• 线性渐变,linear-gradient，从一个方向，沿着另一个方向，颜色线性过渡。

• 径向基渐变，radial-gradient，从某一个点，沿圆环向外慢慢辐射。

除此之外，还有一种渐变，叫"锥形渐变"。它是围绕中心点按照扇形方向进行旋转的渐变(而不是从中心点辐射)

这是锥形和径向渐变的区别图

background: conic-gradient(red, orange, black, green, blue);

默认从时钟 12 点，按照顺时针旋转

18、:out-of-range / :in-range

比较简单，可以查看官方文档

:out-of-range

:in-range

19、writing-mode

定义了文本水平或垂直排布以及在块级元素中文本的书写方向

horizontal-tb 表示水平书写，从上(top)到下(bottom)书写

vertical-rl 表示垂直书写，从右(right)向左(left)(古人书法就这么写的)

vertical-lr 表示垂直书写，从左向右

注意没有 horizontal-bt,不要杜撰

20、inline-size

和元素的 width，height 效果一样，都会改变盒子的大小。但是会覆盖 width，height 值。

不同在于，width 是绝对的水平方向，height 是绝对的竖直方向；

而 inline-size 是相对的水平方向，可通过 writing-mode 模式，改变方向

21、block-size

类似于 inline-size，只不过和 inline-size 刚好相反，block-size 默认设置的是 height 方向的值。