[{"data":1,"prerenderedAt":2580},["ShallowReactive",2],{"page-CEDEC-1":3,"page-count-CEDEC":2579},[4,638,1287,1620,2020],{"id":5,"title":6,"body":7,"date":618,"description":13,"extension":619,"meta":620,"navigation":623,"path":631,"seo":632,"stem":633,"tags":634,"__hash__":637},"blogs\u002F_legacy\u002F2021\u002F2021-11-16-note-blue-protocol-anime-render.md","CEDEC2021-《Blueprotocol》的渲染实现笔记",{"type":8,"value":9,"toc":592},"minimark",[10,14,25,28,32,35,38,41,48,51,56,59,62,193,196,199,202,207,210,220,223,228,231,243,248,251,256,261,264,267,272,275,278,281,339,342,346,349,352,360,363,368,371,374,377,385,390,393,396,399,404,407,410,413,418,420,424,427,430,433,438,441,446,449,452,455,469,472,475,480,483,486,489,492,495,498,501,504,507,510,513,516,520,523,526,531,535,538,541,544,549,552,557,561,564,569,579,582,585,588],[11,12,13],"p",{},"CEDEC2021上《BLUE PROTOCOL》的分享的渲染部分。",[11,15,16,17,24],{},"PPT：[",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fcedil.cesa.or.jp\u002Fcedil_sessions\u002Fview\u002F2389",[22],"nofollow","BLUE PROTOCOLにおけるアニメ表現技法について　～実装編～"," ]。",[11,26,27],{},"《BLUE PROTOCOL》虽然是用UE4进行实现的，但是由于他们的方法有对引擎进行改造，所以对于不希望进行引擎修改的情况可能不是很有参考作用。",[29,30,31],"h2",{"id":31},"简介",[11,33,34],{},"渲染实现上，是基于UE4的PBR渲染的。为了实现动画风格的渲染，在UE4的材质系统上，添加了一个新的ShaderModel，对BasePass和PostProcess进行了改造。",[11,36,37],{},"这样做的主要目的，一个是可以结合PBR的渲染效果，另一个是降低渲染的成本。",[11,39,40],{},"原始的PTT中有一定的篇幅在介绍UE4原本的渲染过程，由于没有现场的视频，不是很好推断想要表达的内容。总体而言，应当是对UE4原有的渲染过程进行一个总结，为之后介绍修改的部分进行铺垫。",[11,42,43],{},[44,45],"img",{"alt":46,"src":47},"","\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fue4-default-pass-300x156.png",[11,49,50],{},"实际的修改主要集中在对现有的Pass进行改造以及添加一些新的Pass，改造后的Pass流程：",[11,52,53],{},[44,54],{"alt":46,"src":55},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fimage-300x131.png",[11,57,58],{},"详细的修改部分在后面会有，总体而言感觉改动不大。主要修改如介绍说的，主要集中在BasePass上，所以其实单看BasePass的话，修改还是挺大的。",[11,60,61],{},"GBuffer的使用情况：",[63,64,65,87],"table",{},[66,67,68],"thead",{},[69,70,71,75,78,81,84],"tr",{},[72,73,74],"th",{},"#",[72,76,77],{},"Red",[72,79,80],{},"Green",[72,82,83],{},"Blue",[72,85,86],{},"Alpha",[88,89,90,108,125,142,159,176],"tbody",{},[69,91,92,96,99,102,105],{},[93,94,95],"td",{},"GBufferA",[93,97,98],{},"ComputeNomal.x",[93,100,101],{},"ComputeNomal.y",[93,103,104],{},"ComputeNomal.z",[93,106,107],{},"PerObjectGBufferData",[69,109,110,113,116,119,122],{},[93,111,112],{},"GBufferB",[93,114,115],{},"ToonHairMaskOffsetShadowMask",[93,117,118],{},"SpecularMask",[93,120,121],{},"SpecularValue",[93,123,124],{},"ShadingModelIDSelectiveOutputMask",[69,126,127,130,133,136,139],{},[93,128,129],{},"GBufferC",[93,131,132],{},"BaseColor.r",[93,134,135],{},"BaseColor.g",[93,137,138],{},"BaseColor.b",[93,140,141],{},"AmbientOcclusion",[69,143,144,147,150,153,156],{},[93,145,146],{},"GBufferD",[93,148,149],{},"ShadowColor.r",[93,151,152],{},"ShadowColor.g",[93,154,155],{},"ShadowColor.b",[93,157,158],{},"NdotL",[69,160,161,164,167,170,173],{},[93,162,163],{},"GBufferE",[93,165,166],{},"-",[93,168,169],{},"RimLightMask",[93,171,172],{},"DiffuseOffset",[93,174,175],{},"RimLightWidth",[69,177,178,181,184,187,190],{},[93,179,180],{},"GBufferF",[93,182,183],{},"OutlineWidth",[93,185,186],{},"OutlineID",[93,188,189],{},"OutlinePaint",[93,191,192],{},"OutlineZShift",[29,194,195],{"id":195},"光照",[11,197,198],{},"光照使用的Mesh资源总共有两组法线以及顶点颜色数据，两组法线分别是在模型制作工具中预先处理的用于动画风格阴影的法线，以及在导入时自动计算的法线。",[11,200,201],{},"动画风格阴影的法线(Import Normal)没有介绍具体采用的方案，从效果图上看应该采用的是比较通用的处理方式。",[11,203,204],{},[44,205],{"alt":46,"src":206},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fimport-normal-300x240.png",[11,208,209],{},"导入计算的法线(Compute Normal)，有描述计算方式：",[211,212,213,217],"ol",{},[214,215,216],"li",{},"计算三角面的法线",[214,218,219],{},"每个顶点的法线是相邻三个面的平均",[11,221,222],{},"应该用的就是UE4默认的那种方式，没有考究过。导入计算方面，对于脸部这种分成了好几个部件的情况，会统一导入，防止在边缘出现计算问题。",[11,224,225],{},[44,226],{"alt":46,"src":227},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fcompute-normal-merge-300x245.png",[11,229,230],{},"顶点颜色方面，使用情况如下：",[232,233,234,237,240],"blockquote",{},[11,235,236],{},"Red: Diffuse Offset",[11,238,239],{},"Blue: Ambient Occlusion",[11,241,242],{},"Green: DepthShift(轮廓线用)",[244,245,247],"h3",{"id":246},"basepass","BasePass",[11,249,250],{},"主要计算用于后面光照计算的必要数据：",[11,252,253],{},[44,254],{"alt":46,"src":255},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fbase-pass-300x124.png",[257,258,260],"h4",{"id":259},"basecolor与shadowcolor","BaseColor与ShadowColor",[11,262,263],{},"BaseColor为明亮处的颜色，ShadowColor为暗处的颜色。",[11,265,266],{},"ShadowColor基于BaseColor进行计算：",[11,268,269],{},[44,270],{"alt":46,"src":271},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fshadow-color-300x156.png",[11,273,274],{},"针对头发的颜色，BaseColor和ShadowColor都是直接在材质中指定颜色。如果头发是两种颜色的情况，会采用梯度图来进行过渡。头发的BaseColor和ShadowColor可以不依赖上面的规则进行设定。",[257,276,158],{"id":277},"ndotl",[11,279,280],{},"基于光源方向和ImportNormal进行计算：",[282,283,287],"pre",{"className":284,"code":285,"language":286,"meta":46,"style":46},"language-cpp shiki shiki-themes github-light-high-contrast github-dark monokai","HalfNoL = dot(Normal, Light) * 0.5 + 0.5;\nToonNoL = step(Threshold, HalfNoL);\n","cpp",[288,289,290,325],"code",{"__ignoreMap":46},[291,292,295,299,303,307,310,313,317,320,322],"span",{"class":293,"line":294},"line",1,[291,296,298],{"class":297},"s0idv","HalfNoL ",[291,300,302],{"class":301},"sLXdl","=",[291,304,306],{"class":305},"scAT4"," dot",[291,308,309],{"class":297},"(Normal, Light) ",[291,311,312],{"class":301},"*",[291,314,316],{"class":315},"stP0Q"," 0.5",[291,318,319],{"class":301}," +",[291,321,316],{"class":315},[291,323,324],{"class":297},";\n",[291,326,328,331,333,336],{"class":293,"line":327},2,[291,329,330],{"class":297},"ToonNoL ",[291,332,302],{"class":301},[291,334,335],{"class":305}," step",[291,337,338],{"class":297},"(Threshold, HalfNoL);\n",[11,340,341],{},"PPT中解释了为什么要在BasePass中进行NdotL，除了精度上的考虑之外，主要是对要将什么搭载到GBuffer上的设计考量。ImportNormal只会在这个步骤中用，在这里计算完之后就不需要在GBuffer中传递ImportNormal了。",[257,343,345],{"id":344},"specular","Specular",[11,347,348],{},"主要是材质中直接传过来的SpecularValue，以及计算SpecularMask。",[11,350,351],{},"SpecularMask用于表达主光源的高光，基于Blinn Phong反射模型进行：",[282,353,358],{"className":354,"code":356,"language":357},[355],"language-text","H = normalize(Light + View);\nNoH = dot(Normal,\nToonNoH = step(Threshold, NoH);\n","text",[288,359,356],{"__ignoreMap":46},[11,361,362],{},"头发的高光有另外的处理逻辑：",[11,364,365],{},[44,366],{"alt":46,"src":367},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fhair-specular-mask-300x134.png",[11,369,370],{},"似乎会根据头发本身与重心的距离以及其ID，与光源进行配合动态的缩放。",[244,372,373],{"id":373},"方向光",[11,375,376],{},"方向光的计算主要分为两个过程：",[211,378,379,382],{},[214,380,381],{},"使用NdotL(GBufferD.Alpha)来处理BaseColor和ShadowColor(ShadowColor作为Subsurface处理)",[214,383,384],{},"通过BaseColor的亮度结合SpecularValue以及SpecularMask计算高光",[11,386,387],{},[44,388],{"alt":46,"src":389},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fdirectional-light-300x164.png",[11,391,392],{},"使用的就是上面BasePass过程中生成的5张结果。",[244,394,395],{"id":395},"点光源",[11,397,398],{},"无视法线，直接按照与光源的距离来进行计算。",[11,400,401],{},[44,402],{"alt":46,"src":403},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fpoint-light-300x183.png",[11,405,406],{},"同时为Toon添加专用的参数来进行效果调节。",[244,408,409],{"id":409},"天光和间接光",[11,411,412],{},"将法线视为向上(0,0,1)来处理。",[11,414,415],{},[44,416],{"alt":46,"src":417},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fskylight-300x182.png",[11,419,406],{},[244,421,423],{"id":422},"rimlight","RimLight",[11,425,426],{},"在光照后添加了一个新的PostRimLight的Pass来处理RimLight计算。",[11,428,429],{},"计算使用RimLightWidth(GBufferE.Alpha)和RimLightMask(GBufferE.Green)来进行。",[11,431,432],{},"通过深度信息作Sobel filter计算",[11,434,435],{},[44,436],{"alt":46,"src":437},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Frim-light-depth-300x134.png",[11,439,440],{},"再通过RimLightMask屏蔽掉不希望的部分之后，叠加到Specular上。",[11,442,443],{},[44,444],{"alt":46,"src":445},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Frim-light-mask-300x127.png",[29,447,448],{"id":448},"轮廓线",[11,450,451],{},"轮廓线的绘制在PostOutlinePass中，这个Pass放在了光照和半透明计算之间，确保轮廓线能在水中等情况下受到折射的影响，同时保证半透明物体上不绘制轮廓线。",[11,453,454],{},"轮廓线主要有以下的计算来源：",[211,456,457,460,463,466],{},[214,458,459],{},"基于深度： sobel filter，比较深度并只在深度更大的地方绘制，通过depthshift限制一些地方(脸上)的绘制",[214,461,462],{},"基于ID：sobel filter，在值较大的上绘制",[214,464,465],{},"基于法线： 内积，主要针对深度差不多，ID也分不开的地方",[214,467,468],{},"预先绘制的：从G-Buffer中取出",[11,470,471],{},"使用到的资源包括之前的顶点颜色G通道中的DepthShift，以及额外的通过TexCoord1来获取的第二组顶点颜色。另外，有一张预先绘制的轮廓线贴图。",[11,473,474],{},"绘制过程主要使用GBufferF：",[11,476,477],{},[44,478],{"alt":46,"src":479},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fline-300x129.png",[11,481,482],{},"Red: 从TexCoord1.x中获取轮廓线粗细，并根据摄像距离和分辨率进行调整",[11,484,485],{},"Green: 从TexCoord1.y中获取轮廓线ID",[11,487,488],{},"Blue: 从预先绘制的贴图来绘制，同时使用轮廓模型防止绘制溢出",[11,490,491],{},"Alpha: 从VertexColor.g获取DepthShift，在基于深度计算时使用，绘制时基于参数进行反相",[244,493,494],{"id":494},"眉轮廓线",[11,496,497],{},"动画风格中常见的将眉毛绘制到前发之上的手法。",[11,499,500],{},"绘制上，将除头发以外的部分在BasePass中绘制，而头发单独在上面图中的ToonHairPass绘制。",[11,502,503],{},"眉毛的罗廓线由基于ID的方法生成，首先，在BasePass中生成一个眉毛本身的Mask，之后头发绘制时在更新轮廓用的ID的时候，在这个Mask上的部分不再更新。由此，在进行轮廓线生成的时候，就能够通过ID来产生眉毛的轮廓了。",[244,505,506],{"id":506},"抗锯齿",[11,508,509],{},"用上面的方法绘制的轮廓线会由于TAA导致模糊。",[11,511,512],{},"这里通过利用ResponsiveAA来解决，将轮廓线绘制到stencil来减轻轮廓线被TAA模糊的情况。",[29,514,515],{"id":515},"阴影",[244,517,519],{"id":518},"shadowmap","ShadowMap",[11,521,522],{},"对于本身的ShadowMap的逻辑改造，主要目的是移除Toon材质上的自阴影。",[11,524,525],{},"处理方式上，根据是否是Toon材质将ShadowMap分开处理，这样就可以在移除自阴影的同时接受背景物体的阴影。",[11,527,528],{},[44,529],{"alt":46,"src":530},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002FShadowMaps-284x300.png",[244,532,534],{"id":533},"offsetshadow","OffsetShadow",[11,536,537],{},"为了补偿由于没有自阴影导致的图像信息不足，添加了一个在屏幕空间进行偏移的阴影。",[11,539,540],{},"处理这个的是最上面图中的OffsetShadowDepth和OffsetShadowMerge。",[11,542,543],{},"过程的原理描述起来其实很简单，首先，在OffsetShadowDepth中，根据深度信息产生一个向下的偏移。",[11,545,546],{},[44,547],{"alt":46,"src":548},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002FOffset-Shadow-Depth--300x169.png",[11,550,551],{},"然后在OffsetShadowMerge中，根据深度对比将信息描绘到G-Buffer中的NdotL中去(GBufferD.Alpha)。",[11,553,554],{},[44,555],{"alt":46,"src":556},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002FOffset-Shadow-Merge-300x149.png",[29,558,560],{"id":559},"postprocess","PostProcess",[11,562,563],{},"后处理的方面比较简单，使用了柔光滤镜。在动画风格中经常使用到，虽然Bloom也能达到类似的效果，但还是另外的进行了实现。",[11,565,566],{},[44,567],{"alt":46,"src":568},"\u002Fwp-content\u002Fuploads\u002F2021\u002F11\u002Fpost-process-300x154.png",[232,570,571],{},[11,572,573,574,578],{},"柔光滤镜，应该和[",[18,575,577],{"href":576},"\u002F2021-01-24-ue4-fest-npr-note\u002F#i-10","这个","]是一样的。",[29,580,581],{"id":581},"总结",[11,583,584],{},"虽然改造引擎的方法可能不是很通用，但是其中的一些思路还是比较有参考作用的。对于动画风格渲染，需要注意的部分有很多共通的地方，不过由于UE4的渲染流程是写死的，所以不会像U3D之类的那样灵活。",[11,586,587],{},"PPT后面还有一些关于Actor的动态Instance相关的优化，由于不是很关注这块，所以没有详细的看过，这里就不记录了。",[589,590,591],"style",{},"html pre.shiki code .s0idv, html code.shiki .s0idv{--shiki-default:#0E1116;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .sLXdl, html code.shiki .sLXdl{--shiki-default:#A0111F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .scAT4, html code.shiki .scAT4{--shiki-default:#622CBC;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .stP0Q, html code.shiki .stP0Q{--shiki-default:#023B95;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":46,"searchDepth":327,"depth":593,"links":594},3,[595,596,608,612,616,617],{"id":31,"depth":327,"text":31},{"id":195,"depth":327,"text":195,"children":597},[598,604,605,606,607],{"id":246,"depth":593,"text":247,"children":599},[600,602,603],{"id":259,"depth":601,"text":260},4,{"id":277,"depth":601,"text":158},{"id":344,"depth":601,"text":345},{"id":373,"depth":593,"text":373},{"id":395,"depth":593,"text":395},{"id":409,"depth":593,"text":409},{"id":422,"depth":593,"text":423},{"id":448,"depth":327,"text":448,"children":609},[610,611],{"id":494,"depth":593,"text":494},{"id":506,"depth":593,"text":506},{"id":515,"depth":327,"text":515,"children":613},[614,615],{"id":518,"depth":593,"text":519},{"id":533,"depth":593,"text":534},{"id":559,"depth":327,"text":560},{"id":581,"depth":327,"text":581},"2021-11-16","md",{"layout":621,"status":622,"published":623,"wordpress_id":624,"wordpress_url":625,"date_gmt":626,"excerpt":627},"post","publish",true,3557,"\u002F?p=3557","2021-11-15 17:18:59 +0000",{"type":8,"value":628},[629],[11,630,13],{},"\u002F2021-11-16-note-blue-protocol-anime-render",{"title":6,"description":13},"_legacy\u002F2021\u002F2021-11-16-note-blue-protocol-anime-render",[635,636],"UE4","CEDEC","k3Wf7wAjkskIvTzdrhF42jFwPhW8WAtbJHzIkxt3V-4",{"id":639,"title":640,"body":641,"date":1269,"description":645,"extension":619,"meta":1270,"navigation":623,"path":1282,"seo":1283,"stem":1284,"tags":1285,"__hash__":1286},"blogs\u002F_legacy\u002F2021\u002F2021-02-08-cedec2020-new-sakura-wars-note.md","CEDEC2020-新樱花大战笔记",{"type":8,"value":642,"toc":1241},[643,646,653,656,659,662,665,673,676,681,684,705,708,711,718,723,726,731,734,737,743,746,749,752,755,758,761,764,767,770,777,780,783,786,789,792,812,815,820,823,826,829,832,836,839,842,845,849,852,855,858,861,864,869,872,875,878,881,884,898,901,904,907,910,915,918,923,926,931,934,937,948,953,957,960,963,968,971,974,977,980,983,986,989,992,995,1000,1003,1014,1017,1020,1023,1028,1031,1034,1037,1042,1045,1048,1051,1054,1059,1062,1065,1068,1071,1074,1077,1080,1085,1088,1093,1096,1099,1104,1107,1110,1113,1118,1121,1124,1127,1130,1133,1136,1139,1142,1147,1150,1153,1156,1159,1164,1167,1170,1173,1176,1179,1184,1187,1190,1193,1195,1198,1201,1206,1209,1212,1215,1218,1238],[11,644,645],{},"这个是CEDEC2020上《新樱花大战》的分享的笔记。",[11,647,648,649],{},"CEDEC：",[18,650,651],{"href":651,"rel":652},"https:\u002F\u002Fcedil.cesa.or.jp\u002Fcedil_sessions\u002Fview\u002F2328",[22],[11,654,655],{},"《新樱花大战》是PS4上的游戏，开发是世嘉。分享的主要内容是关于角色制作与渲染。",[11,657,658],{},"开发时间为2016年到2019年。",[29,660,661],{"id":661},"概要",[11,663,664],{},"《新樱花大战》在初期开发的时候使用的是双色调的Toon渲染风格，没有使用PBR。",[11,666,667,668,672],{},"后面根据用户的诉求，将渲染的方向转向了具有Toon风格的PBR，在制作途中切换到了支持PBR的",[669,670,671],"em",{},"Hedgehog Engine 2","引擎。",[11,674,675],{},"在做渲染切换时，团队制作了一个用于后续渲染质量参照的场景。在这个场景中对各种要素进行测试，之后所有的场景制作都要求达到同等的水平。",[11,677,678],{},[44,679],{"alt":46,"src":680},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206104804946-300x166.png",[11,682,683],{},"场景中包含的要素有：",[685,686,687,690,693,696,699,702],"ul",{},[214,688,689],{},"基于物理模拟的头发和衣服表现",[214,691,692],{},"丰富的表情动画",[214,694,695],{},"视线自动朝向摄像",[214,697,698],{},"根据摄像角度不同的瞳孔高光位置调整",[214,700,701],{},"头发上天使之轮的移动",[214,703,704],{},"眼睛高光的湿润感",[29,706,707],{"id":707},"模型制作",[11,709,710],{},"在谈到建模之前首先介绍了下角色设计上的一些变化。",[11,712,713,714,717],{},"女主角天宮櫻原本的设定更加强调开朗和柔和的部分，但是本作更加强调",[669,715,716],{},"女剑士","这一角色特征。所以在对制作的几个调整过的版本进行对比后，最终采用了基本表情时是凛然的剑士，而在其他如笑容的表情时则体现出女性的柔和感的形象设计。",[11,719,720],{},[44,721],{"alt":46,"src":722},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206110013039-300x131.png",[11,724,725],{},"在角色的设计方案确定之后，以2D的角色设计为基础，进行3D建模。在模型制作过程中，对原画的色彩分布和特征进行尽可能的重现。模型制作上，身体部分采用通用的体型模型，然后在其上制作服装来完成。",[11,727,728],{},[44,729],{"alt":46,"src":730},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206110444721-300x120.png",[244,732,733],{"id":733},"制作流程",[11,735,736],{},"模型制作时使用的建模工具有：Maya、ZBrush、SbustancePainter。",[11,738,739,742],{},[44,740],{"alt":46,"src":741},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206111906655-300x111.png","\n首先使用Maya制作出运行时使用的模型，然后在ZBrush中雕刻出表面的褶皱和详细的凹凸并烘培出法线贴图。",[11,744,745],{},"衣服的布料质感则是在SubstancePaiter中制作，最终在PhotoShop中合成到贴图中。",[11,747,748],{},"《新樱花大战》中，表情动画也是由角色制作负责的，所以在进行蒙皮权重后会进行Facia动画的制作。",[11,750,751],{},"最终，在Maya中导出模型、骨骼、表情动画以及材质动画，在引擎中对物理驱动的头发等摆动进行调整，就完成了角色的建模。",[244,753,754],{"id":754},"模型规格",[11,756,757],{},"模型的规格上，面数在40000~65000区间，根据角色设计的不同会有区别。",[11,759,760],{},"由于游戏制作的目标帧率是30帧，而同屏角色最多时会有14个，因此逆向计算出角色的面数上限。",[11,762,763],{},"骨骼数量根据角色会有不同，天宮櫻的是最多的，有350根。",[244,765,766],{"id":766},"通用骨骼",[11,768,769],{},"本作为了方便让动画可以在各个角色之间通用，基础的身体部分采用的是统一的骨骼构造。",[11,771,772,773,776],{},"通用的骨骼模型被称为",[669,774,775],{},"Regulation Model","， 在此基础上对各个角色进行制作。",[11,778,779],{},"模型的体型，按照男性和女性，各自有S\u002FM\u002FL三种。",[11,781,782],{},"每个角色在制作时，首先决定采用哪一个体格，然后依此进行骨骼构造。各个角色在S\u002FM\u002FL的规格之外的身高差，则通过在实际运行中调整Root骨骼的缩放来实现。",[11,784,785],{},"动画制作时，统一使用M体型来制作通用动画，然后通过Retarget应用到各个体型上。",[244,787,788],{"id":788},"可动饰物分类",[11,790,791],{},"对通用模型上的可动饰物进行分类：",[685,793,794,797,800,803,806,809],{},[214,795,796],{},"长发",[214,798,799],{},"和服袖子",[214,801,802],{},"袴",[214,804,805],{},"长披风",[214,807,808],{},"被称为萌袖的大袖口",[214,810,811],{},"迷你裙",[11,813,814],{},"总共分为六个种类，由于很多和服相关的，直接看图比较明确：",[11,816,817],{},[44,818],{"alt":46,"src":819},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206114416868-300x245.png",[11,821,822],{},"在制作通用动画时，必须保证不会与这六个分类的可动饰物出现穿模。",[11,824,825],{},"而模型制作这边，则不可以在制作服装时与分类中的饰物出现太大的形状偏差。",[11,827,828],{},"这样，在两边都遵循标准的情况下，就可以很好的避免实际运行过程中对可动饰物进行物理模拟时出现穿模。",[11,830,831],{},"当然，在标准模型上的可动饰物之外，每个角色都会有一些自有的特色物品，但是这些物品，例如头发都会有自己的骨骼。",[244,833,835],{"id":834},"zbrush高模制作","ZBrush高模制作",[11,837,838],{},"ZBrush中制作高模时，主要对衣服的褶皱和一些细节部分进行雕刻。",[11,840,841],{},"服装制作虽然有考虑过使用Marvelous Designer，但是由于本次是以动画的风格为标准的，所以最终没有采用。",[11,843,844],{},"褶皱这些的雕刻，如果过于接近现实感就会变得过于详细。于是参考了通常手办的制作方式，对过于详细的细节部分进行省略。",[244,846,848],{"id":847},"substance","Substance",[11,850,851],{},"SubstancePaiter被用于制作衣服的布料质感、金属感，通过Substance导出，然后在PhotoShop中进行合成。导入到引擎后发现有一些需要调整的地方会进行一些微调。",[11,853,854],{},"在Substance中进行制作时，作为基础贴图烘培的AO贴图以及ZBrush输出的高模烘培这些都能够起到作用。",[29,856,857],{"id":857},"贴图",[244,859,860],{"id":860},"衣服贴图",[11,862,863],{},"首先是衣服部分的贴图：",[11,865,866],{},[44,867],{"alt":46,"src":868},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206120629412-300x140.png",[11,870,871],{},"Albedo:Alpha这张贴图的作用，是用来在Albedo上添加一个渐进的Alpha下降，避免内部的形状出现过度的发光。",[11,873,874],{},"上边中间的ID的贴图，是用于给衣服绘制轮廓线的。在颜色不同的边界线上，就会在PostEffect中绘制这种贴图中对应的颜色。而ID:Alpha则用于控制轮廓线的消失和混合。",[11,876,877],{},"《新樱花大战》的角色有两种轮廓线，一种是使用上面提到的ID贴图进行绘制的衣服的轮廓线，一种是通过背面法将身体模型反向扩展的通用的轮廓线。",[11,879,880],{},"法线贴图部分是通用的切线空间的法线贴图。",[11,882,883],{},"左下的Param贴图，是用于PBR的参数的",[685,885,886,889,892,895],{},[214,887,888],{},"R通道是reflectance，用于指定材质的反射率",[214,890,891],{},"G通道是Smoothness，用于指定材质的光滑度",[214,893,894],{},"B通道是Metalness，用于指定材质的金属质感",[214,896,897],{},"A通道是AO贴图",[11,899,900],{},"这个贴图中，G通道的光滑度与UnrealEngine相比在0和1的作用上是反过来的。",[11,902,903],{},"右下角的CDRF贴图，用于调整阴影的色调，之后会说明。",[244,905,906],{"id":906},"脸部贴图",[11,908,909],{},"接下来是脸部贴图：",[11,911,912],{},[44,913],{"alt":46,"src":914},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206122229817-300x150.png",[11,916,917],{},"基本上和衣服的贴图用法差不多，不同的部分是，脸部没有使用法线贴图，而Albedo:Apha则于衣服的黑白部分的作用是相反的。这种相反的作用，是为了让脸部特定的部位更加的发光，所以和衣服的表现目的不同。",[11,919,920],{},[44,921],{"alt":46,"src":922},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206122456725-300x124.png",[11,924,925],{},"脸部没有法线贴图，而是依然保留了采用PBR渲染之前的ToonShader风格的特殊法线调整。",[11,927,928],{},[44,929],{"alt":46,"src":930},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206123545782-150x150.png",[244,932,933],{"id":933},"顶点颜色",[11,935,936],{},"本作有使用VertexColor，顶点颜色按照RGB通道控制不同的效果：",[685,938,939,942,945],{},[214,940,941],{},"R：控制背面法产生的轮廓线的粗细",[214,943,944],{},"G：作为曲率值使用(曲率越高说明形状越薄)，作用在之后解说，会与前面的CDRF贴图并用",[214,946,947],{},"B：比较特殊，是ScreenBaseShadow的Mask，用于防止在一些高特效的场景中的阴影溢出而使用",[11,949,950],{},[44,951],{"alt":46,"src":952},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206123623186-300x127.png",[244,954,956],{"id":955},"crdf","CRDF",[11,958,959],{},"本作采用了会将曲率考虑在内的RampTexture。",[11,961,962],{},"RampTexture是指，根据光照的反向和法线的角度来对光照计算进行影响的贴图。",[11,964,965],{},[44,966],{"alt":46,"src":967},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206124017405-300x142.png",[11,969,970],{},"使用方法图中左上有提到：",[11,972,973],{},"R=法线和光照反向的内积",[11,975,976],{},"G=曲率",[11,978,979],{},"最右边代表光照与法线反向相同时的颜色，而最左边指定的是最暗时的颜色。",[11,981,982],{},"曲率是在上面的顶点颜色的G中指定的。",[11,984,985],{},"会添加曲率这个维度，是为了模拟Subsurface Scattering一样的表现，所以分为上下两段的RampTexture并用曲率在上面采样。顶点颜色的G值越高，则会采样出更加明显的阴影边界，而G值低时则会取出更加平滑的阴影。",[11,987,988],{},"根据部位的不同，会采用不同的RampTexture设计。例如，皮肤的RampTexture在设计上会让皮肤的阴影更加平滑。",[244,990,991],{"id":991},"头发贴图",[11,993,994],{},"头发贴图使用除了天使光环的部分，基本和衣服相同",[11,996,997],{},[44,998],{"alt":46,"src":999},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206131038911-300x130.png",[11,1001,1002],{},"天使光环是头发上的那一圈高光。根据通道控制不同的属性",[685,1004,1005,1008,1011],{},[214,1006,1007],{},"R：光环的形状",[214,1009,1010],{},"G：添加到整体上的水平方向的Mask",[214,1012,1013],{},"B：在头发UV上的Mask",[11,1015,1016],{},"根据摄像的移动，会控制头发上的天使光环的移动。在竖直反向移动时，高光会有较大的移动量；而在水平反向上移动时，移动量就会很小。",[244,1018,1019],{"id":1019},"前发透过",[11,1021,1022],{},"对于一部分前发会挡住眉毛和眼睛的情况，会对前发使用特殊的Shader。",[11,1024,1025],{},[44,1026],{"alt":46,"src":1027},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206131558775-300x153.png",[11,1029,1030],{},"在单独的Buffer中进行眉毛的绘制，并在后处理时进行合成，让眉毛和眼睛产生一种透视感。在渲染时如果由于摄像角度导致前发会挡住眼睛时，会进行这个计算。",[244,1032,1033],{"id":1033},"瞳孔表现",[11,1035,1036],{},"本作的眼睛分为三个部分，眼白的部分是一个内凹的形状，瞳孔的部分则分为了向内凹的部分和向外突出的部分。",[11,1038,1039],{},[44,1040],{"alt":46,"src":1041},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206133019305-300x273.png",[11,1043,1044],{},"瞳孔的高光叠加在其突出的半透明部分上。根据摄像角度的不同，各个部分的贴图会分开进行移动，使得在哪个角度高光都能处在一个刚好的位置。",[11,1046,1047],{},"控制上，有针对高光上下左右的移动强度与控制移动范围的参数共同作用。",[244,1049,1050],{"id":1050},"眼睛的贴图",[11,1052,1053],{},"眼睛的贴图部分比较特殊：",[11,1055,1056],{},[44,1057],{"alt":46,"src":1058},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206133059919-300x68.png",[11,1060,1061],{},"从左边开始，是作为基础颜色的Albedo，以及用于Mask瞳孔的Alpha贴图，用于在Albedo上进行叠加的spt贴图，以及两张瞳孔高光，以及反应环境的matcapture贴图。",[11,1063,1064],{},"虽然很多动画风格的渲染中会省略掉瞳孔中的虹彩部分，但是本作为了提高角色靠近时的效果，进行了详细的绘制，同时为了体现环境的变化与matcap的贴图进行叠加。",[11,1066,1067],{},"高光贴图有两张，分别使用不同的UV动画进行控制，用于表现眼睛的湿润感。虽然是很细微的操作，但是对于表现角色的感情非常的有用。",[29,1069,1070],{"id":1070},"角色光照",[11,1072,1073],{},"角色光照主要依赖于在场景中的直射光以及烘培到GI中的光照缓存，GI中会有间接光缓存。",[11,1075,1076],{},"GI中能够烘培场景的一些细节光照信息，可以让角色在场景中的渲染变得更真实。",[11,1078,1079],{},"对于部分完全位于阴影中的场景，会在角色身上挂一个胶囊体的碰撞，根据其遮蔽信息，脚下投下阴影。",[11,1081,1082],{},[44,1083],{"alt":46,"src":1084},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206154842108-285x300.png",[11,1086,1087],{},"由于战斗中有大量的敌人，会相应的只在脚边进行操作。",[232,1089,1090],{},[11,1091,1092],{},"这个应该是通过Overlap信息在周围投射假的阴影",[244,1094,1095],{"id":1095},"背光灯",[11,1097,1098],{},"会在主光照的180度相反位置和左右90度的位置添加用于角色亮度修正的背光灯。",[11,1100,1101],{},[44,1102],{"alt":46,"src":1103},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206153934823-300x102.png",[11,1105,1106],{},"主要用于防止角色站在逆光的位置导致变暗的问题，以及背光灯的光照也可以强调出材质的质感。",[244,1108,1109],{"id":1109},"阴影修正",[11,1111,1112],{},"本作在光照中，对角色专门进行了光照的调整。",[11,1114,1115],{},[44,1116],{"alt":46,"src":1117},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206134916260-300x163.png",[11,1119,1120],{},"上图左右采用的是同样的光照环境，虽然右图的光照是物理正确的，但是并不是所想要达到的风格。",[11,1122,1123],{},"对Shader进行修改，在ShadowMap上添加一个Bias来对光照进行修正。由于是直接在被投影表面进行的调整，导致有的时候会将想要保留的阴影也抹除的情况，例如头发等在脸部的投影也会消失。",[11,1125,1126],{},"本作由于没有采用将头发的阴影另外绘制的方法，所以并没有完全解决这个问题，只是通过调整参数来尽可能的达到一个好的效果。",[29,1128,1129],{"id":1129},"角色风格统一",[11,1131,1132],{},"本作由于角色设计由多人进行，所以角色之间会具有不同的风格。",[11,1134,1135],{},"为了让这些风格不同的角色在游戏中很好的进行风格融合，主要对头身比和瞳孔的表现进行了统一。",[11,1137,1138],{},"最开始的时候虽然为了忠实于角色设计，没有统一头身比，但是实际运行中发现，头身比不同的角色在同一个场景中的话，头更大的角色看起来就像是穿着人偶服一样，效果很不好，所以最后还是做了统一。",[11,1140,1141],{},"瞳孔方面，不同的角色原案会有不同的风格。这个也实际尝试过之后发现违和感很强，进行了统一性的调整。",[11,1143,1144],{},[44,1145],{"alt":46,"src":1146},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206155637508-300x132.png",[11,1148,1149],{},"表情全部采用的是骨骼动画，基本会按照原画的风格来。然后在其基础上制作更多的派生表情。表情制作时如果出现无法完全判断正面表情的情况，会使用正面的原画作为基准进行想象来进行制作。",[11,1151,1152],{},"此外，以基础表情为基础，在场景中还可以将表情进行融合形成更多的表情。将眉眼左右和嘴型各自设置成不同的表情并保存成Preset来使用的话，就可以组合出新的表情。",[11,1154,1155],{},"对于每个角色，还会在「あ」的口型之上有一个用于大叫的表情。",[11,1157,1158],{},"除了骨骼的动画表情之外，还有用于叠加的四个特殊表情：",[11,1160,1161],{},[44,1162],{"alt":46,"src":1163},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206161506339-300x98.png",[11,1165,1166],{},"脸红的表情是直接通过透明度来调节的。",[11,1168,1169],{},"眼泪的话，是通过在眼泪的模型的Shader中进行顶点动画来实现的。而流下来的眼泪则是从眼泪的模型为起点播放UV动画来实现的。",[29,1171,1172],{"id":1172},"可动饰物",[11,1174,1175],{},"本作的可动饰物是通过使用Bullet物理引擎来实现的。",[11,1177,1178],{},"专门制作了一个场景，方便在其中通过编辑器对可动饰物进行调整和设置。可以对各个骨骼进行角度范围、质量、惯性、摩擦系数、反弹系数、速度衰减、角度衰减等参数进行逐个调整。另外也可以添加碰撞来防止可动饰物穿模。",[11,1180,1181],{},[44,1182],{"alt":46,"src":1183},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206164422793-300x221.png",[11,1185,1186],{},"对于一些单纯依靠物理无法很好的实现的部分，会将其根骨骼挂到动画中，由动画进行控制。",[11,1188,1189],{},"除了骨骼的纵向运动传递外，也会设定横向的运动传递。让头发、振袖和裙子可以同步的进行摇动。",[11,1191,1192],{},"制作过程中，会在编辑器中，对行走、跑步、左右转弯、坐下等动作进行预览，以此为基准保证不会穿模。在实际的场景中，如果出现穿模的话，也会进行微调。",[29,1194,581],{"id":581},[11,1196,1197],{},"将动画风和写实风进行融合过程中，这两者最大的不同点在于：夸张和省略。",[11,1199,1200],{},"根据角色的部位不同，会采用不同的写实与动画的比例。",[11,1202,1203],{},[44,1204],{"alt":46,"src":1205},"\u002Fwp-content\u002Fuploads\u002F2021\u002F02\u002Fimage-20210206163252315-1-300x144.png",[11,1207,1208],{},"角色的头部、脸和头发，会想要更多的保留原画中的印象。",[11,1210,1211],{},"衣服的质感、整体的阴影，则会更多的采用写实的方案。",[11,1213,1214],{},"本次的结论是：只要角色的脸的印象很好的保留的话，其他的部分采用写实的风格也不会有多少违和感。",[11,1216,1217],{},"以下是官方总结的想要改进的部分：",[211,1219,1220,1223,1226,1229,1232,1235],{},[214,1221,1222],{},"希望能对阴影的形状进行控制",[214,1224,1225],{},"更加强化脸部的细节",[214,1227,1228],{},"添加更多的表情。追加母音区分大小的表情以及固有表情。",[214,1230,1231],{},"强化眼睛的表现力。即便画面中只有眼睛也能有足够的细节。",[214,1233,1234],{},"头发的强化。根据光照和摄像角度有更多的变化。",[214,1236,1237],{},"手的表演的强调。改善手的现状和添加细节。",[11,1239,1240],{},"由于是官方自己的想要改进的部分，所以是否会改进以及是否之后会有更多的需求就不确定了~",{"title":46,"searchDepth":327,"depth":593,"links":1242},[1243,1244,1252,1262,1266,1267,1268],{"id":661,"depth":327,"text":661},{"id":707,"depth":327,"text":707,"children":1245},[1246,1247,1248,1249,1250,1251],{"id":733,"depth":593,"text":733},{"id":754,"depth":593,"text":754},{"id":766,"depth":593,"text":766},{"id":788,"depth":593,"text":788},{"id":834,"depth":593,"text":835},{"id":847,"depth":593,"text":848},{"id":857,"depth":327,"text":857,"children":1253},[1254,1255,1256,1257,1258,1259,1260,1261],{"id":860,"depth":593,"text":860},{"id":906,"depth":593,"text":906},{"id":933,"depth":593,"text":933},{"id":955,"depth":593,"text":956},{"id":991,"depth":593,"text":991},{"id":1019,"depth":593,"text":1019},{"id":1033,"depth":593,"text":1033},{"id":1050,"depth":593,"text":1050},{"id":1070,"depth":327,"text":1070,"children":1263},[1264,1265],{"id":1095,"depth":593,"text":1095},{"id":1109,"depth":593,"text":1109},{"id":1129,"depth":327,"text":1129},{"id":1172,"depth":327,"text":1172},{"id":581,"depth":327,"text":581},"2021-02-08",{"layout":621,"status":622,"published":623,"author":1271,"author_login":1272,"author_email":1273,"author_url":1274,"wordpress_id":1275,"wordpress_url":1276,"date_gmt":1277,"excerpt":1278},{"display_name":1272,"login":1272,"email":1273,"url":1274},"chaoshikari","chaoshikari@gmail.com","\u002F",3467,"\u002F?p=3467","2021-02-08 14:11:56 +0000",{"type":8,"value":1279},[1280],[11,1281,645],{},"\u002F2021-02-08-cedec2020-new-sakura-wars-note",{"title":640,"description":645},"_legacy\u002F2021\u002F2021-02-08-cedec2020-new-sakura-wars-note",[636],"3p4fEy7QwflLwkHzYwLAcwoicxmOb9p8krSJijeEP6A",{"id":1288,"title":1289,"body":1290,"date":1602,"description":1294,"extension":619,"meta":1603,"navigation":623,"path":1615,"seo":1616,"stem":1617,"tags":1618,"__hash__":1619},"blogs\u002F_legacy\u002F2021\u002F2021-01-24-cedec-2016-sfv-note.md","CEDEC2016-《街头霸王5》的美术设计笔记",{"type":8,"value":1291,"toc":1589},[1292,1295,1298,1305,1312,1315,1318,1321,1324,1330,1333,1336,1339,1345,1348,1351,1357,1360,1366,1369,1372,1383,1389,1392,1395,1401,1404,1407,1410,1416,1419,1425,1428,1431,1434,1440,1443,1449,1452,1456,1459,1462,1468,1471,1477,1480,1483,1490,1493,1496,1502,1505,1508,1514,1517,1523,1526,1529,1532,1538,1544,1550,1553,1559,1562,1568,1571,1574,1577,1583,1586],[11,1293,1294],{},"CEDEC2016上街霸5的分享。",[11,1296,1297],{},"主要参考以下内容：",[11,1299,1300,1301],{},"PPT: ",[18,1302,1303],{"href":1303,"rel":1304},"https:\u002F\u002Fcedil.cesa.or.jp\u002Fcedil_sessions\u002Fview\u002F1540",[22],[11,1306,1307,1308],{},"gamesindustry.biz: ",[18,1309,1310],{"href":1310,"rel":1311},"https:\u002F\u002Fjp.gamesindustry.biz\u002Farticle\u002F1609\u002F16090703\u002F",[22],[11,1313,1314],{},"街霸5，是使用UE4制作的。",[29,1316,1317],{"id":1317},"格斗游戏美术制作",[11,1319,1320],{},"格斗游戏要让玩家能够瞬间对状况进行把握，所以很多地方不会遵循现实规律。",[11,1322,1323],{},"卡普空的街霸项目组内部，有一整套相关的方法论：",[11,1325,1326],{},[44,1327],{"alt":1328,"src":1329},"image-20210120205628473","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120205628473_thumb.png",[11,1331,1332],{},"在像素时代有着非常大的作用，但是由于并不是完全按照现实的身体构造来的，要使用3D来制作就会有些问题。",[244,1334,1335],{"id":1335},"模型身高",[11,1337,1338],{},"在官方设定中，隆的身高是175cm，而贝卡的身高是182cm。",[11,1340,1341],{},[44,1342],{"alt":1343,"src":1344},"image-20210120210652818","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210652818_thumb.png",[11,1346,1347],{},"但是在3D模型上看，两人的身高基本差不多。",[11,1349,1350],{},"最终选择以玩家能看到的印象为主，在战斗中待机时，让贝卡的动作改为直立来解决",[11,1352,1353],{},[44,1354],{"alt":1355,"src":1356},"image-20210120210717273","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210717273_thumb.png",[11,1358,1359],{},"实际上就变成了这样：",[11,1361,1362],{},[44,1363],{"alt":1364,"src":1365},"image-20210120210739498","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120210739498_thumb.png",[244,1367,1368],{"id":1368},"动画",[11,1370,1371],{},"角色的动画在制作时主要考虑三个方面：",[685,1373,1374,1377,1380],{},[214,1375,1376],{},"格斗技：空手道专家一眼就明白是怎样的攻击方式",[214,1378,1379],{},"重心与节奏：看起来要帅要流畅",[214,1381,1382],{},"性能：格斗游戏设计上的攻击判定",[11,1384,1385],{},[44,1386],{"alt":1387,"src":1388},"image-20210120211322219","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120211322219_thumb.png",[11,1390,1391],{},"例如：桑吉尔夫的行走动画，刻意采用了正面视角进行动作的修正。防止实际上是以一种怪异的姿势在走路。",[11,1393,1394],{},"另外，为了表现原本的2D游戏中的感觉，部分角色的姿势采取了旋转5度的形式。",[11,1396,1397],{},[44,1398],{"alt":1399,"src":1400},"image-20210120212141746","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212141746_thumb.png",[11,1402,1403],{},"必杀技的设计上，一定要让玩家能够轻松的使用语句对其进行描述，这样才能让玩家方便的共享感动的情绪。",[244,1405,1406],{"id":1406},"背景中的颜色设计",[11,1408,1409],{},"要让背景与角色有很好的层次感，以下是2D时代的例子：",[11,1411,1412],{},[44,1413],{"alt":1414,"src":1415},"image-20210120212427714","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212427714_thumb.png",[11,1417,1418],{},"为了在3D世界上达到这个效果，实现了Multi Color Grading的功能：",[11,1420,1421],{},[44,1422],{"alt":1423,"src":1424},"image-20210120212640514","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212640514_thumb.png",[11,1426,1427],{},"场景的不同区域采用了不同的LookupTable。上图的例子并不是针对所有的场景，对于不同的场景会根据其特点采用不同的Multi Color Grading分布。",[244,1429,1430],{"id":1430},"摄像角度修正",[11,1432,1433],{},"如果使用默认的3D摄像，角色越靠近边缘时，就会出现扭曲，导致影响玩家对攻击判定的感觉。",[11,1435,1436],{},[44,1437],{"alt":1438,"src":1439},"image-20210120212904843","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120212904843_thumb.png",[11,1441,1442],{},"对投影的方式进行了修改，采用了Fix Projection",[11,1444,1445],{},[44,1446],{"alt":1447,"src":1448},"image-20210120213012818","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213012818_thumb.png",[11,1450,1451],{},"这种投影的修正只针对角色，可以让角色从背景中突显出来的同时保证角色不会因为在画面中移动出现“扭曲”。",[29,1453,1455],{"id":1454},"npr","NPR",[11,1457,1458],{},"SFV的画面目标是油画的风格以及丰富的色彩。",[11,1460,1461],{},"在光照向量与模型法线上作了很多的研究。",[11,1463,1464],{},[44,1465],{"alt":1466,"src":1467},"image-20210120213351356","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213351356_thumb.png",[11,1469,1470],{},"最终的材质并不会特别复杂：",[11,1472,1473],{},[44,1474],{"alt":1475,"src":1476},"image-20210120213524861","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120213524861_thumb.png",[244,1478,1479],{"id":1479},"笔触感的再现",[11,1481,1482],{},"前作SFIV，是通过在法线贴图上直接添加皱纹感来实现的。",[11,1484,1485,1486,1489],{},"操作上，是在PhostoShop中使用",[669,1487,1488],{},"ちりめんじわ","的功能对法线贴图直接进行处理。",[11,1491,1492],{},"SFV由于包括法线贴图在内的所有贴图的分辨率都上升了，导致使用这个方法产生的纹路很难在渲染结果上体现纹路感。最终，使用了Photoshop的SnapArt插件来对图片进行修正，这个插件本来是给图片添加油画感的。",[11,1494,1495],{},"为了能够使用这个插件，法线贴图的处理流程稍稍变长了：",[11,1497,1498],{},[44,1499],{"alt":1500,"src":1501},"image-20210120214144524","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214144524_thumb.png",[11,1503,1504],{},"会先将法线贴图转换到Object Space，经过SnapArt的处理后再重新转换回来。",[11,1506,1507],{},"对于身体的不同部分，会采用不同的处理程度：",[11,1509,1510],{},[44,1511],{"alt":1512,"src":1513},"image-20210120214255524","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214255524_thumb.png",[11,1515,1516],{},"以实现在游戏中信息密度的控制：",[11,1518,1519],{},[44,1520],{"alt":1521,"src":1522},"image-20210120214326820","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214326820_thumb.png",[244,1524,1525],{"id":1525},"边界的强调",[11,1527,1528],{},"与传统的根据法线计算轮廓线的方法不同，是使用颜色来进行的。在渲染结果中，当像素的RGB的颜色差很大时，填充轮廓线。",[11,1530,1531],{},"首先将渲染结果左右移位n个像素然后相减：",[11,1533,1534],{},[44,1535],{"alt":1536,"src":1537},"image-20210120214718395","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214718395_thumb.png",[11,1539,1540],{},[44,1541],{"alt":1542,"src":1543},"image-20210120214733171","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214733171_thumb.png",[11,1545,1546],{},[44,1547],{"alt":1548,"src":1549},"image-20210120214744645","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214744645_thumb.png",[11,1551,1552],{},"同样的操作在上下方向上再执行一次，然后将两个结果相加：",[11,1554,1555],{},[44,1556],{"alt":1557,"src":1558},"image-20210120214812460","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120214812460_thumb.png",[11,1560,1561],{},"再乘以当前场景所设置的轮廓线颜色，最后叠加到原图上就可以了。",[11,1563,1564],{},[44,1565],{"alt":1566,"src":1567},"image-20210120215208468","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120215208468_thumb.png",[11,1569,1570],{},"这个效果是在PostProcess上完成的。",[244,1572,1573],{"id":1573},"间接光",[11,1575,1576],{},"SFV引入Enlighten，在虚幻默认的ILC的基础上更加强化了间接光照的效果",[11,1578,1579],{},[44,1580],{"alt":1581,"src":1582},"image-20210120215346772","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210120215346772_thumb.png",[11,1584,1585],{},"Enlighten的作用是，可以实时的对间接光照的效果进行调整。比如，想要让间接光的色调变青的话，就加重青的要素。这与想要接近油画画风而不是真实的物理光照的目标相一致。",[11,1587,1588],{},"Enlighten只要在场景构造没有变的情况下，可以自由的调整间接光的效果，可以说非常的符合需求。",{"title":46,"searchDepth":327,"depth":593,"links":1590},[1591,1597],{"id":1317,"depth":327,"text":1317,"children":1592},[1593,1594,1595,1596],{"id":1335,"depth":593,"text":1335},{"id":1368,"depth":593,"text":1368},{"id":1406,"depth":593,"text":1406},{"id":1430,"depth":593,"text":1430},{"id":1454,"depth":327,"text":1455,"children":1598},[1599,1600,1601],{"id":1479,"depth":593,"text":1479},{"id":1525,"depth":593,"text":1525},{"id":1573,"depth":593,"text":1573},"2021-01-24",{"layout":621,"status":622,"published":623,"author":1604,"author_login":1606,"author_email":1607,"wordpress_id":1608,"wordpress_url":1609,"date_gmt":1610,"excerpt":1611},{"display_name":1605,"login":1606,"email":1607,"url":46},"风铃","flinkor","flinkor@foxmail.com",3350,"\u002F?p=3350","2021-01-24 04:00:44 +0000",{"type":8,"value":1612},[1613],[11,1614,1294],{},"\u002F2021-01-24-cedec-2016-sfv-note",{"title":1289,"description":1294},"_legacy\u002F2021\u002F2021-01-24-cedec-2016-sfv-note",[636,1455],"r_blFGbTBPV57haZRO6BbQsvxGh0ZuZR2in9HkJMans",{"id":1621,"title":1622,"body":1623,"date":2004,"description":1627,"extension":619,"meta":2005,"navigation":623,"path":2014,"seo":2015,"stem":2016,"tags":2017,"__hash__":2019},"blogs\u002F_legacy\u002F2021\u002F2021-01-23-cedec-idol-master-notes-art.md","CEDEC IdolMaster笔记-制作事例美术篇",{"type":8,"value":1624,"toc":1993},[1625,1628,1635,1638,1640,1643,1654,1665,1682,1684,1687,1690,1695,1698,1703,1706,1709,1755,1762,1765,1768,1771,1777,1780,1787,1794,1797,1800,1803,1809,1812,1815,1822,1825,1831,1834,1837,1840,1858,1861,1864,1870,1873,1879,1882,1885,1888,1891,1894,1897,1900,1906,1910,1917,1920,1923,1926,1932,1935,1938,1944,1947,1953,1956,1959,1970,1973,1984,1987,1990],[11,1626,1627],{},"Art篇分为了模型篇和UI\u002FUX篇两个部分，在这里进行了合并。",[11,1629,1630,1631],{},"模型篇参考的这里：",[18,1632,1633],{"href":1633,"rel":1634},"https:\u002F\u002Fgamebiz.jp\u002F?p=167929",[22],[11,1636,1637],{},"CGSS的最大特征之一，是将页游时代使用插画来表现的偶像，转为使用3D来表现并进行演唱会的表演。所以最重视的部分，就是希望尽可能的再现出插画的感觉。",[29,1639,754],{"id":754},[11,1641,1642],{},"制作时，手机的性能已经有相当于PS3的运算能力了。根据手机的运算能力，对模型的资源上限进行了设置：",[232,1644,1645,1648,1651],{},[11,1646,1647],{},"Polygon Count",[11,1649,1650],{},"头部：大约4000",[11,1652,1653],{},"身体：大约7000(C位)，大约4000(其他)",[232,1655,1656,1659,1662],{},[11,1657,1658],{},"Texture",[11,1660,1661],{},"头部：1024x1024",[11,1663,1664],{},"身体：1024x1024",[232,1666,1667,1670,1673,1676,1679],{},[11,1668,1669],{},"Bone Count",[11,1671,1672],{},"头部：大约40（包含表情用）",[11,1674,1675],{},"头发：大约20",[11,1677,1678],{},"身体：56",[11,1680,1681],{},"装饰物：大约20",[29,1683,448],{"id":448},[11,1685,1686],{},"为了再现插画的效果，首先是添加轮廓线。",[11,1688,1689],{},"CGSS使用的是将法线方向反转这种传统的方法来实现轮廓线的，为了给轮廓线添加颜色，在反转了的模型上也会使用角色对应的贴图。通过将贴图的色彩的亮度下降，这样皮肤就会有茶色的轮廓线、白色的手套就会有灰色的轮廓线、宝石的部分会有较深的青色，更加接近于插画的轮廓线效果。",[11,1691,1692],{},[44,1693],{"alt":46,"src":1694},"\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Foutline.jpg",[11,1696,1697],{},"另外，不仅是颜色，对于头发以及衣服的末端，也会相应的让轮廓线变细。",[232,1699,1700],{},[11,1701,1702],{},"这里前面技术篇提到是使用VertexColor的",[29,1704,1705],{"id":1705},"模型通用化",[11,1707,1708],{},"要将总共60人的偶像的各自的个性通过3D模型表现出来并不简单，因为每个偶像不仅在身高不同，皮肤的颜色、头发的长度、发色、发型以及胸的大小等等各种特征都是不同的。虽然为每一个角色都制作一个模型在表现上是最理想的，但是考虑到数据容量的问题，最终采用了将身体的各个部分按照体型进行共通化，然后互相组合起来的形式。",[63,1710,1711,1721],{},[66,1712,1713],{},[69,1714,1715,1718],{},[72,1716,1717],{},"身体",[72,1719,1720],{},"类型",[88,1722,1723,1731,1739,1747],{},[69,1724,1725,1728],{},[93,1726,1727],{},"身高",[93,1729,1730],{},"S\u002FM\u002FL\u002FLL",[69,1732,1733,1736],{},[93,1734,1735],{},"胸围",[93,1737,1738],{},"S\u002FM\u002FL",[69,1740,1741,1744],{},[93,1742,1743],{},"体重",[93,1745,1746],{},"低体重\u002F标准体重",[69,1748,1749,1752],{},[93,1750,1751],{},"肤色",[93,1753,1754],{},"偏白\u002F通常\u002F褐色",[11,1756,1757,1758,1761],{},"另外，身高的LL只有",[669,1759,1760],{},"諸星きらり","。",[29,1763,1764],{"id":1764},"表情",[11,1766,1767],{},"对于偶像而言，“表情”是很重要的。CGSS为了追求高质量的模型表现，会让插画师对3D模型进行监修，对模型效果进行详细的指导。",[11,1769,1770],{},"表情制作上，通常、笑容、悲伤、严肃、害羞每个情感状态有两个表情，以及wink和特殊表情各有一个。",[11,1772,1773],{},[44,1774],{"alt":1775,"src":1776},"image-20210114084101001","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210114084101001_thumb.png",[11,1778,1779],{},"表情的播放，会使用后面将会提到的时间轴工具。",[11,1781,1782,1783,1786],{},"特殊表情指的是什么呢？",[669,1784,1785],{},"城ヶ崎莉嘉","在「DOKIDOKIリズム」的演出中，眼睛中会出现星星的表情就是特殊表情。每一个偶像在自己的角色歌中都会有专属的特殊表情。",[11,1788,1789,1790,1793],{},"另外，",[669,1791,1792],{},"森久保乃々","在设定上，会有在演唱会中不与摄像机和观众的视线交汇的设定。在制作过程中，会引入特殊的机能，让她的视线不与玩家摄像交汇。",[29,1795,1796],{"id":1796},"口型",[11,1798,1799],{},"要让歌唱的表演变得真实，需要在口型动画上下功夫。",[11,1801,1802],{},"作为LipSync的目标动画，「あ」「い」「う」「え」「お」「ん」「スマイル」各有两个模式。会分出大和小两个模式，是因为对于一个单独的音节，只是播放特定的口型无法表现出唱歌的感觉。将这些口型动画进行组合后，就可以做出表情丰富的歌唱表演了。",[11,1804,1805],{},[44,1806],{"alt":1807,"src":1808},"image-20210114085230616","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210114085230616_thumb.png",[29,1810,1811],{"id":1811},"舞蹈",[11,1813,1814],{},"CGSS的舞蹈采用MotionCapture捕捉的动作作为基础数据。",[11,1816,1817,1818,1821],{},"流程上，首先",[669,1819,1820],{},"振付師","根据乐曲进行动作设计，然后由动捕演员根据舞蹈动作进行表演。手指的动作会经过动作设计师的手工调整，让动作变得更加自然。",[11,1823,1824],{},"光是如此并没有完成舞蹈演出的全部工作。CGSS的演出部分，是5人一组的在舞台上进行表演的。虽然分别制作5个人的演出数据是最理想的，但是从数据容量和制作成本上考虑，还是采用了使用同一个动作数据的形式。这样产生的问题，就是所有人采用一模一样的动作导致表演看起来特别的机械。于是就刻意的让每个人的动作之间产生一个偏差，如图所示，在一个单一的时刻，每个人的手腕的角度会有微妙的不同。通过这样的方法，让五人演出有了真实感。",[11,1826,1827],{},[44,1828],{"alt":1829,"src":1830},"image-20210114090942710","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210114090942710_thumb.png",[11,1832,1833],{},"口型动画使用的LipSync工具是自主开发的，可以将歌词数据导入到工具中，根据母音数据自动进行生成。根据生成的数据进行一定的手工调整后，就可以很好的表现出歌唱的动画了 。",[11,1835,1836],{},"整个时间轴系统，是基于内部开发的「Cygames Unity Timeline Tool」的。可以在Unity上对表情、视线、LipSync、灯光颜色和背后的屏幕上的动画素材等进行调整。通过使用这个工具，可以大幅度的缩短Live的制作流程，一个月可以添加3~4个Live歌曲。",[11,1838,1839],{},"这个时间轴工具可以对以下的内容进行控制：",[685,1841,1842,1845,1848,1850,1852,1855],{},[214,1843,1844],{},"摄像角度",[214,1846,1847],{},"视线",[214,1849,195],{},[214,1851,1764],{},[214,1853,1854],{},"屏幕素材（舞台背后的屏幕）",[214,1856,1857],{},"DOF",[29,1859,1860],{"id":1860},"模型制作流程",[11,1862,1863],{},"在添加新的偶像角色时，从一开始的建模阶段开始，就会以还原插画效果为目标。会将摄像移动到插画的视角，同时以插画为参考进行建模。",[11,1865,1866],{},[44,1867],{"alt":1868,"src":1869},"image-20210114092129302_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210114092129302_thumb.png",[11,1871,1872],{},"3D模型的制作流程中，会由插画师进行效果的检查。这个检查的流程并不只是单纯的对渲染效果进行一个粗略的检查，而是从插画的角度对细节进行检查。例如，有时会要求不改变头部大小的情况下对眼睛的大小进行调整。通过这样的流程，来保证模型能够尽可能的接近插画。",[11,1874,1875],{},[44,1876],{"alt":1877,"src":1878},"image-20210114092524440","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210114092524440_thumb.png",[29,1880,1881],{"id":1881},"制作流程迭代",[11,1883,1884],{},"为了加强角色的偶像感和可爱程度，不断的对制作规范进行改进是义不容辞的工作。",[11,1886,1887],{},"以「依田芳乃」为例，人设和画师都强烈的想要让芳乃穿上振袖。在游戏发布时，并没有实装角色的特殊衣服功能。由于有着体现偶像的个性的强烈的需求，所以就与开发共同进行了功能的研讨，对衣服模拟系统进行了优化。经过优化之后，衣服模拟系统的CPU占用下降了，可以使用的衣服控制骨骼数量得到提升，对于特殊形状的衣服也能支持了。",[11,1889,1890],{},"另一个例子，是「太田優」这个角色，她的特征之一是身上的痔。在角色制作时，由于判断难以在现有的流程中实现，只能含泪放弃。但是，角色登场之后，广大的P都纷纷抱怨\"没有痔\"的问题。于是又重新进行研讨，对制作流程进行了功能追加。在「色白・通常・褐色」的基础上，又添加了「ほくろ差分」来对痔的展现进行支持。",[11,1892,1893],{},"如此这般，通过对制作流程的不断迭代，让偶像比游戏发布时更加的可爱和接近插画设定。",[11,1895,1896],{},"在各个偶像的SSR角色登场时，大部分角色的模型又进行了一轮的质量打磨。有的模型在发布时可能认为已经做到最好了，但是在有了新的流程优化的功能的基础上，就会产生\"想要进行改造\"的声音。“虽然和销量没有直接关系，但是对于开发者的热情想要回应。同时，这样也能让广大的P感到高兴，所以就尽量的执行了”。",[11,1898,1899],{},"随着建模和监修画师的不断磨合，与发布时相比，大家对整个流程都有了更深入的理解，技术也得到了提升。于是画师这边也能给出一些更加具体的调整意见。从头发的流向到下颚的剪影，更加精细的意见能够让建模更加接近插画的效果，有效的提升模型的质量。",[11,1901,1902],{},[44,1903],{"alt":1904,"src":1905},"image-20210115082042418","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210115082042418_thumb.png",[29,1907,1909],{"id":1908},"arts-uiux","Arts-UI\u002FUX",[11,1911,1912,1913],{},"UI\u002FUX篇参考的这里：",[18,1914,1915],{"href":1915,"rel":1916},"https:\u002F\u002Fgamebiz.jp\u002F?p=168065",[22],[11,1918,1919],{},"这边是专业外，只记录了一些感兴趣的内容。",[11,1921,1922],{},"与主机游戏相比，手机游戏在同一个画面中的信息量会大很多。因为在手机游戏上，需要将功能按钮和辅助说明的文字都放到画面内。这些信息对于建立游戏的世界观而言是非常重要的。",[11,1924,1925],{},"Cygames内部，UI设计师的主要业务范围，是企划阶段UI的画面设计。以及UI的轮廓、部件以及部分物体的制作。这篇演讲将主要集中在画面设计、轮廓和部件的制作上。",[11,1927,1928],{},[44,1929],{"alt":1930,"src":1931},"image-20210115082846242_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210115082846242_thumb.png",[11,1933,1934],{},"CGSS的UI设计师其实只有一个人，运营阶段的活动时期的UI变更也基本上是一个人在进行。当然根据工作量，会有其他人过来辅助一下。",[11,1936,1937],{},"在部件制作上，角色卡片和物品的图标，按照大小有xs\u002Fs\u002Fm三种规格。",[11,1939,1940],{},[44,1941],{"alt":1942,"src":1943},"image-20210115083136731_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210115083136731_thumb.png",[11,1945,1946],{},"按钮是使用的最多的部件，采用以下的颜色规则：对于当前最需要处理的按钮以紫色来表示，对于多选的按钮则加上星星的纹样，取消按钮则为默认的空白状态。主按钮有4种大小，而辅助按钮分为三种。",[11,1948,1949],{},[44,1950],{"alt":1951,"src":1952},"image-20210115083534939_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210115083534939_thumb.png",[11,1954,1955],{},"其他还有对各个部件的规范的说明，这里就跳过了……",[11,1957,1958],{},"在设计上，会采用下面的方针：",[685,1960,1961,1964,1967],{},[214,1962,1963],{},"尽可能的引入与《偶像大师》系列相关的要素",[214,1965,1966],{},"UI不能影响游戏体验，尽可能的保持简洁",[214,1968,1969],{},"按钮要考虑让男性用户也能轻松点击",[11,1971,1972],{},"对部件组合的原则是：",[211,1974,1975,1978,1981],{},[214,1976,1977],{},"按照按钮和卡片的大小进行布局",[214,1979,1980],{},"空间较小时对按钮进行一定缩放",[214,1982,1983],{},"按钮的排序规则为(确定，其他选项，取消)",[11,1985,1986],{},"后面讲了一些制作过程中修改的案例和原因。",[11,1988,1989],{},"还有就是一些制作内幕，游戏发布时的50个偶像的建模是在2个月内完成的……",[11,1991,1992],{},"另外就是，很多玩家吐槽wink的时候眼睛的左右各有不同，那个不是bug，是特性~",{"title":46,"searchDepth":327,"depth":593,"links":1994},[1995,1996,1997,1998,1999,2000,2001,2002,2003],{"id":754,"depth":327,"text":754},{"id":448,"depth":327,"text":448},{"id":1705,"depth":327,"text":1705},{"id":1764,"depth":327,"text":1764},{"id":1796,"depth":327,"text":1796},{"id":1811,"depth":327,"text":1811},{"id":1860,"depth":327,"text":1860},{"id":1881,"depth":327,"text":1881},{"id":1908,"depth":327,"text":1909},"2021-01-23",{"layout":621,"status":622,"published":623,"author":2006,"author_login":1606,"author_email":1607,"wordpress_id":2007,"wordpress_url":2008,"date_gmt":2009,"excerpt":2010},{"display_name":1605,"login":1606,"email":1607,"url":46},3179,"\u002F?p=3179","2021-01-23 06:35:58 +0000",{"type":8,"value":2011},[2012],[11,2013,1627],{},"\u002F2021-01-23-cedec-idol-master-notes-art",{"title":1622,"description":1627},"_legacy\u002F2021\u002F2021-01-23-cedec-idol-master-notes-art",[2018,636],"Idolmaster","Zr130K7b9hYY95CfnrJLylsXLfeSfkCcCT4R7xGAwP0",{"id":2021,"title":2022,"body":2023,"date":2004,"description":2027,"extension":619,"meta":2565,"navigation":623,"path":2574,"seo":2575,"stem":2576,"tags":2577,"__hash__":2578},"blogs\u002F_legacy\u002F2021\u002F2021-01-23-cedec-idol-master-notes-iteration.md","CEDEC IdolMaster笔记-制作事例長期運用篇",{"type":8,"value":2024,"toc":2532},[2025,2028,2031,2039,2042,2045,2048,2051,2059,2062,2065,2076,2079,2081,2084,2092,2095,2101,2104,2107,2118,2120,2123,2129,2132,2135,2138,2141,2144,2147,2150,2153,2156,2159,2162,2165,2171,2174,2177,2180,2183,2187,2190,2193,2199,2202,2208,2212,2215,2218,2221,2226,2229,2232,2235,2238,2241,2244,2247,2250,2256,2259,2262,2265,2268,2276,2279,2287,2290,2293,2296,2302,2305,2308,2311,2317,2320,2326,2329,2332,2335,2338,2341,2347,2350,2353,2356,2359,2362,2368,2371,2377,2380,2383,2386,2392,2395,2398,2401,2405,2408,2414,2417,2420,2423,2426,2429,2432,2435,2438,2441,2444,2453,2456,2464,2467,2470,2484,2487,2490,2493,2496,2499,2503,2506,2509,2512,2515,2518,2521],[11,2026,2027],{},"CEDEC2020上Cygames关于CGSS的分享。",[11,2029,2030],{},"CGSS于2015年9月发布，登场角色数190人。运营到2020年，已经有了很多的迭代经验和功能进步。当前的版本中，资源数量也已经非常丰富：",[685,2032,2033,2036],{},[214,2034,2035],{},"SSR服装模型数400以上",[214,2037,2038],{},"3D MV收录曲数200以上",[11,2040,2041],{},"演讲的内容主要是发布后版本迭代中的一些开发经验。",[29,2043,2044],{"id":2044},"增加演唱会的真实感",[11,2046,2047],{},"示例：「お願い！シンデレラ (GRAND VERSION)」",[11,2049,2050],{},"演唱会的真实感是什么？",[211,2052,2053,2056],{},[214,2054,2055],{},"应援声",[214,2057,2058],{},"舞蹈之外的动作",[11,2060,2061],{},"应援声直接社内解决……在公司内招募志愿者的P进行收录。",[11,2063,2064],{},"舞蹈之外的动作，包括",[685,2066,2067,2070,2073],{},[214,2068,2069],{},"舞台间移动",[214,2071,2072],{},"向P打招呼",[214,2074,2075],{},"角色间交互",[11,2077,2078],{},"为了达到提高真实感的目标，舞台移动以及招呼动作追加了60种以上的动作。",[244,2080,2058],{"id":2058},[11,2082,2083],{},"一般的MV制作流程：",[685,2085,2086,2089],{},[214,2087,2088],{},"以歌曲为单位进行舞蹈摄影",[214,2090,2091],{},"舞蹈动作有1~5种(+a)，依据动作和表演等会有所增加",[11,2093,2094],{},"这里没玩过CGSS可能会有点费解，参考图片比较简单。",[11,2096,2097],{},[44,2098],{"alt":2099,"src":2100},"image-20210117113700856_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117113700856_thumb.png",[11,2102,2103],{},"有的歌曲是所有人的动作一样的，有的则每个人都不一样。而CGSS通常是5人一组的，所以是1~5种舞动动作。",[11,2105,2106],{},"「お願い！シンデレラ (GRAND VERSION)」：",[685,2108,2109,2112,2115],{},[214,2110,2111],{},"在必要的地方进行分割摄影",[214,2113,2114],{},"为了突出动作的差别，即便是相似的动作也会改变表演动作多次摄影",[214,2116,2117],{},"舞蹈动作有3种(+60)",[244,2119,2075],{"id":2075},[11,2121,2122],{},"让偶像之间进行拍手动作，但是由于身高差可能会够不到……",[11,2124,2125],{},[44,2126],{"alt":2127,"src":2128},"image-20210117113816721_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117113816721_thumb.png",[11,2130,2131],{},"于是引入了IK。引入IK之后就可以解决很多交互问题：",[11,2133,2134],{},"对于存在身高差的角色，可以在不破坏动作的情况下进行交互。例如拍手、牵手等。",[11,2136,2137],{},"对于与场景固定物体交互，可以让角色在同一个位置进行。例如开门、看书、上下阶梯等。",[29,2139,2140],{"id":2140},"演奏乐器",[11,2142,2143],{},"示例：「Unlock Starbeat」",[244,2145,2146],{"id":2146},"体型差别",[11,2148,2149],{},"为了应对身高差的问题，根据身高的比例也有对应比例的乐器。",[11,2151,2152],{},"由于胸围大小有SS\u002FS\u002FM\u002FL\u002FLL的五种类型，让吉他和贝斯的背带位置可以对应的调节。",[244,2154,2155],{"id":2155},"惯用手",[11,2157,2158],{},"提供左撇子用的乐器版本，以及让动作在加载的时候可以反过来。",[11,2160,2161],{},"动作反转加载时，角色的位置会有偏差，通过对摄像的位置也添加分歧来实现。",[11,2163,2164],{},"针对场上角色惯用手的区别，总共有4种摄像分歧：",[11,2166,2167],{},[44,2168],{"alt":2169,"src":2170},"image-20210117115550081_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117115550081_thumb.png",[244,2172,2173],{"id":2173},"动捕方法",[11,2175,2176],{},"邀请参与演唱会的乐队成员进行动作捕捉。",[11,2178,2179],{},"手指的动作部分会由动画师手工编辑，所以手部的动作会另外的进行捕捉。",[29,2181,2182],{"id":2182},"其他改进",[244,2184,2186],{"id":2185},"multi-camera","Multi Camera",[11,2188,2189],{},"通过多个摄像进行渲染，并使用mask进行切分。",[11,2191,2192],{},"大大的提高了演出效果。",[11,2194,2195],{},[44,2196],{"alt":2197,"src":2198},"image-20210117120404268_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117120404268_thumb.png",[11,2200,2201],{},"为了减少渲染负担，每个摄像只会渲染自己需要的那个部分。",[11,2203,2204],{},[44,2205],{"alt":2206,"src":2207},"image-20210117120519515_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117120519515_thumb.png",[244,2209,2211],{"id":2210},"chara-motion-overwrite","Chara Motion Overwrite",[11,2213,2214],{},"在舞蹈的过程中，将角色的动画替换为别的动作。",[11,2216,2217],{},"这个其实主要是流程上的改进，原本的流程上，想要替换动作的话，就必须直接调整舞蹈数据，替换起来会很麻烦。负责摄像的人必须频繁的和负责动作的人进行交流确认，导致开发效率低下。",[11,2219,2220],{},"新的流程上，将动画切分成了Clip的形式，所以负责最终摄像的人就可以自由的进行调整，无需多余的交流成本。",[11,2222,2223],{},[44,2224],{"alt":46,"src":2225},"\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fims-character-motion-300x75.png",[11,2227,2228],{},"由于这里用的示例也是「お願い！シンデレラ GRAND VERSION」，所以应当就是前面摄影优化里面提到的分割摄影。",[244,2230,2231],{"id":2231},"风模拟",[11,2233,2234],{},"有风的话会增加很多真实感。",[11,2236,2237],{},"模拟方式并不是基于物理的，而是以发束等为单元，分开时机周期性的添加力。这样的方法可以避免头发和衣服的模拟结果出现混乱，看起来也有随机的感觉。",[11,2239,2240],{},"这里说是担心バラバラ，感觉对于这种动画风的物理模拟，最怕的就是穿模了……",[244,2242,2243],{"id":2243},"时间轴分歧",[11,2245,2246],{},"在特定的条件下，对摄像和动作进行分歧。",[11,2248,2249],{},"用于实现角色固有或者特定组合才会作的特别演出。",[11,2251,2252],{},[44,2253],{"alt":2254,"src":2255},"image-20210117121645737_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117121645737_thumb.png",[29,2257,2258],{"id":2258},"服装",[11,2260,2261],{},"服装对于CGSS的角色魅力表现是非常重要的。有很多服装是为了配合角色的个性而制作出来的，其中也有自带特效的衣服。",[11,2263,2264],{},"服装制作时有两条规则需要遵守：",[11,2266,2267],{},"一、模型面数和贴图数量必须在规定范围内",[685,2269,2270,2273],{},[214,2271,2272],{},"基础颜色贴图一张，光照用贴图两张",[214,2274,2275],{},"如何在这个限制中达到表现目标就看各人的本领发挥了",[11,2277,2278],{},"二、必须能够对应所有的分镜、舞蹈动作",[685,2280,2281,2284],{},[214,2282,2283],{},"不能在MV中出现不自然的表现",[214,2285,2286],{},"行走、跑步、蹲下、靠近等动作时不能穿模",[244,2288,2289],{"id":2289},"想要带子上的彩虹和星星动起来",[11,2291,2292],{},"示例：CGSS４周年纪念服装",[11,2294,2295],{},"这里面能看到之前说到的三张贴图的作用：",[11,2297,2298],{},[44,2299],{"alt":2300,"src":2301},"image-20210117123623250_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117123623250_thumb.png",[11,2303,2304],{},"由于只有三张贴图所以需要将彩虹和星星的控制用信息放进去。",[11,2306,2307],{},"彩虹的颜色变化写到了Color贴图上",[11,2309,2310],{},"星星的颜色变化信息则分成RPG通道写到了Spec贴图上。",[11,2312,2313],{},[44,2314],{"alt":2315,"src":2316},"image-20210117124654022_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117124654022_thumb.png",[11,2318,2319],{},"最后将控制参数暴露到shader外面，就可以了",[11,2321,2322],{},[44,2323],{"alt":2324,"src":2325},"image-20210117124255198_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117124255198_thumb.png",[11,2327,2328],{},"还有一些其他的特殊追加处理",[11,2330,2331],{},"长裙：在角色的下面添加了额外的碰撞用地板",[11,2333,2334],{},"翅膀：在角色身上添加了碰撞球，让翅膀自动回避",[29,2336,2337],{"id":2337},"ドレスコーデ",[11,2339,2340],{},"可以让玩家对服装的部件颜色进行自定义。",[11,2342,2343],{},[44,2344],{"alt":2345,"src":2346},"image-20210117130416518_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117130416518_thumb.png",[11,2348,2349],{},"可以调整颜色提升了表现力。",[11,2351,2352],{},"同时还添加了可以让所有人穿的上下可分开定制的通用服装。对于这种可拆分的通用服装，会根据体型差分制作不同的模型。",[244,2354,2355],{"id":2355},"选色板",[11,2357,2358],{},"CGSS的服装贴图上包含了很多光照和阴影细节，用于体现立体感和质感，以及物体之间的投影和接触阴影，服装上的折痕阴影等。",[11,2360,2361],{},"对于用户自定义颜色，并不是单纯的调整一个颜色",[11,2363,2364],{},[44,2365],{"alt":2366,"src":2367},"image-20210117131345087_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117131345087_thumb.png",[11,2369,2370],{},"而是需要对于一个可选颜色，对应一组Diffuse(BaseColor)、Specular(光沢色)、Shadow(影色)。",[11,2372,2373],{},[44,2374],{"alt":2375,"src":2376},"image-20210117131458919_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117131458919_thumb.png",[11,2378,2379],{},"这样可以防止颜色出现破绽。",[244,2381,2382],{"id":2382},"可分离通用服装",[11,2384,2385],{},"采用上下分离式的设计，所有角色可着装，可以添加更多的自由度",[11,2387,2388],{},[44,2389],{"alt":2390,"src":2391},"image-20210117131656334_thumb","\u002Fwp-content\u002Fuploads\u002F2021\u002F01\u002Fimage-20210117131656334_thumb.png",[11,2393,2394],{},"采用分离式设计的主要原因是，对于同一套衣服，需要对应不同的体型准备模型。",[11,2396,2397],{},"当前【身長×体格×胸サイズ】共有17种，而T-Shirt就要作17x4个模型，考虑之后的服装添加的话，成本太高了。",[11,2399,2400],{},"分离的设计可以增加模型的通用性，同时也可以方便之后单独的添加新的部件。",[29,2402,2404],{"id":2403},"_3dコミュ","3Dコミュ",[11,2406,2407],{},"アイドルマスター シンデレラガールズ スターライトスポット，应该是这个：",[11,2409,2410],{},[18,2411,2412],{"href":2412,"rel":2413},"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.bandainamcoent.cgstarlightspot",[22],[11,2415,2416],{},"最长10分钟以上的场景，12个角色登场。有VR View和GYRO View两种模式。",[244,2418,2419],{"id":2419},"偶像之间自然的交流",[11,2421,2422],{},"根据场景和其中的物品，让偶像之间做出复杂的交流。",[11,2424,2425],{},"在动捕摄影之前，事先对需要作的表演和移动路线进行预演。",[11,2427,2428],{},"预演可以有效的发现剧本和背景中不合理的部分，减少重新拍摄的次数，降低表演人员的负担。",[11,2430,2431],{},"角色和道具之间的位置的正确性，可以有效的提高表演的自然感。",[244,2433,2434],{"id":2434},"让人感觉到偶像的真实存在",[11,2436,2437],{},"角色身上的音效发生点，在脸部\u002F腰\u002F右手\u002F左手\u002F脚上最大有五个。",[11,2439,2440],{},"使用Foley的手法，对动作音、道具音进行录制",[11,2442,2443],{},"引入ResonanceAudio SDK",[11,2445,2446,2447,2452],{},"添加对",[18,2448,2451],{"href":2449,"rel":2450},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAmbisonics",[22],"Ambisonics","格式环境音的支持",[11,2454,2455],{},"对于BGM，会根据场景采用不同的设置方式。",[685,2457,2458,2461],{},[214,2459,2460],{},"像是乐屋这种的，就采用从扬声器中释放的场景内音效",[214,2462,2463],{},"设定上是电脑空间的话则采用场景外音效",[244,2465,2466],{"id":2466},"表现偶像所在的世界",[11,2468,2469],{},"在设计预期上",[685,2471,2472,2475,2478,2481],{},[214,2473,2474],{},"希望在场景内有很多偶像登场",[214,2476,2477],{},"乐屋中应当会有很多的镜子",[214,2479,2480],{},"特殊的世界观也希望能够体现出来",[214,2482,2483],{},"在较长的交流中也能够一直看下去而不需要返回现实",[11,2485,2486],{},"当然，为了表现出世界观，想要作的事情总是会有很多。但是必须考虑各种实现的成本。",[257,2488,2489],{"id":2489},"内存消耗",[11,2491,2492],{},"10分钟的长度以及12个模型，使用到的对话数量和动作数据都很多。",[11,2494,2495],{},"例如3D交流第二话，总共有330个对话，470种SE。",[11,2497,2498],{},"对于声音，将非常驻的声音按块区分，由时间轴来触发加载，在播放完后自动卸载，减少内存消耗。",[257,2500,2502],{"id":2501},"fps控制","FPS控制",[11,2504,2505],{},"希望保持在60帧",[11,2507,2508],{},"3D交流模式中物体太多导致FPS下降，12个模型同时渲染的负荷很重，VR模式则有额外1倍的消耗。",[11,2510,2511],{},"镜子：3D交流中玩家是不能移动的，对镜子内需要反射的物体进行限定，减少没有必要的绘制成本。",[244,2513,2514],{"id":2514},"迭代效率提升",[11,2516,2517],{},"每一轮迭代的时间将会决定可以试错的回数，减少要素是最后的手段。",[11,2519,2520],{},"以MV的压力测试为例，通过Jenkins对以下的步骤进行自动化：",[685,2522,2523,2526,2529],{},[214,2524,2525],{},"apk\u002Fipa的资源构建",[214,2527,2528],{},"连结到的设备上的自动执行",[214,2530,2531],{},"收集执行结果到Kibana进行分析",{"title":46,"searchDepth":327,"depth":593,"links":2533},[2534,2538,2543,2549,2552,2556],{"id":2044,"depth":327,"text":2044,"children":2535},[2536,2537],{"id":2058,"depth":593,"text":2058},{"id":2075,"depth":593,"text":2075},{"id":2140,"depth":327,"text":2140,"children":2539},[2540,2541,2542],{"id":2146,"depth":593,"text":2146},{"id":2155,"depth":593,"text":2155},{"id":2173,"depth":593,"text":2173},{"id":2182,"depth":327,"text":2182,"children":2544},[2545,2546,2547,2548],{"id":2185,"depth":593,"text":2186},{"id":2210,"depth":593,"text":2211},{"id":2231,"depth":593,"text":2231},{"id":2243,"depth":593,"text":2243},{"id":2258,"depth":327,"text":2258,"children":2550},[2551],{"id":2289,"depth":593,"text":2289},{"id":2337,"depth":327,"text":2337,"children":2553},[2554,2555],{"id":2355,"depth":593,"text":2355},{"id":2382,"depth":593,"text":2382},{"id":2403,"depth":327,"text":2404,"children":2557},[2558,2559,2560,2564],{"id":2419,"depth":593,"text":2419},{"id":2434,"depth":593,"text":2434},{"id":2466,"depth":593,"text":2466,"children":2561},[2562,2563],{"id":2489,"depth":601,"text":2489},{"id":2501,"depth":601,"text":2502},{"id":2514,"depth":593,"text":2514},{"layout":621,"status":622,"published":623,"author":2566,"author_login":1272,"author_email":1273,"author_url":1274,"wordpress_id":2567,"wordpress_url":2568,"date_gmt":2569,"excerpt":2570},{"display_name":1272,"login":1272,"email":1273,"url":1274},3220,"\u002F?p=3220","2021-01-23 07:36:18 +0000",{"type":8,"value":2571},[2572],[11,2573,2027],{},"\u002F2021-01-23-cedec-idol-master-notes-iteration",{"title":2022,"description":2027},"_legacy\u002F2021\u002F2021-01-23-cedec-idol-master-notes-iteration",[2018,636],"jm5Dc1sK0GeeF9r-d9LB7WxqvxqeKgBabdHPK7vo23M",7,1788763177261]