Cocos Creator 3D ??????????????

??

??

?????? Cocos Creator 1.0.2 ????????? OPPO ????vivo ??????????????????? Creator 3D ??????????????????????? OPPO ??????

???????????????????????????????????Cocos ??????? ChiaNing ??????????????????????????????????????????????????????

1?????

????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????????? Cocos Creator 3D ?????????

2???????


????????????????????

1. ????????

??????????????????????????????????????????????????????

?1??????????????????????????????????????????????????????????

?2???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

??????????????????????????????????????????????????

2. ????????

????????????????????????????????????????????????????????????????????????????????????????????????

?1????????????????????????????????

?2???????????????????????????????????????????????????????????????????????????????????

?3????????????????????????

??????????????????????????????????????????????????????????

???????????????????????????????????????

3???????

?????????????????????????????????????????????????????????????????????????????????????????????????????? [LearnOpenGL]????????

? Shader ??????????????????????????????????????????????????????

????????????????????????? Z ??????????????????? Z ?????????????????????????????????????

• ????????????????????????????
• ?????????????????????????????
• ????????????????????????????????????????????????????????????? Z ?????????
  

??????????????????????????????????????????????????????????????????????????????????????

4???????

Cocos Creator 3D ????????????????????????????????????????????????????????????????????

? Cocos Creator 3D ??????????????????????

Effect ??

???????? Cocos Effect ??????????????? YAML ???????????? GLSL 300 ES ??? Shader ???????

Material ??

??????? Effect ????????????????? Effect ???????????????????? Material ????????????????????? Material ???????????????? Effect ?????????????????

????????????? Cocos Creator 3D ????????????????? Effect ??? Material ???

? Material ?????????? Effect ?????????????????????????????????????? material ????? material ??????????????

???????????????????? [????]?

5?????

??????????????????? Shader????????????

1??? Cocos Creator 3D ??????????????????????????????????????????????? Plane ????????????? Shader ??????

2???????????????? Effect?????? curved ??????????

3?????? Effect ????????? Effect ??????????? shader ????????????????????????? Effect ??????????? [?? Effect ??]??????????????????

4???? CCEffect ???

1. <p>CCEffect %{</p><p><span style="white-space:pre">        </span>techniques:</p><p><span style="white-space:pre">                </span>- name: opaque</p><p><span style="white-space:pre">        </span>passes:</p><p><span style="white-space:pre">                </span>- vert: general-vs:vert # builtin header</p><p><span style="white-space:pre">        </span>frag: unlit-fs:frag</p><p><span style="white-space:pre">        </span>properties: &props</p><p><span style="white-space:pre">        </span>mainTexture: { value: white }</p><p><span style="white-space:pre">        </span>mainColor: { value: [1, 1, 1, 1], editor: { type: color } }</p><p><span style="white-space:pre">                </span>- name: transparent</p><p><span style="white-space:pre">        </span>passes:</p><p><span style="white-space:pre">                </span>- vert: general-vs:vert # builtin header</p><p><span style="white-space:pre">        </span>frag: unlit-fs:frag</p><p><span style="white-space:pre">        </span>blendState:</p><p><span style="white-space:pre">        </span>targets:</p><p><span style="white-space:pre">                </span>- blend: true</p><p><span style="white-space:pre">        </span>blendSrc: src_alpha</p><p><span style="white-space:pre">        </span>blendDst: one_minus_src_alpha</p><p><span style="white-space:pre">        </span>blendSrcAlpha: src_alpha</p><p><span style="white-space:pre">        </span>blendDstAlpha: one_minus_src_alpha</p><p><span style="white-space:pre">        </span>properties: *props</p><p>}%</p>

复制代码

???? Effect ???????????? vert ?????? Shader ??????????? general-vs:vert ???????????????????????????????????????? unlit-vs?.

??????? properties ???????property ???????????????????????????

??????????????? uniform ?? shader ??????????????????????????????????????????????????????? vec4 ?????????allOffset??????????????????????? float ???dist???????????????mainTexture?

?????????Effect ? CCEffect ????????????

1. <p>CCEffect %{</p><p><span style="white-space:pre">        </span>techniques:</p><p><span style="white-space:pre">                </span>- name: opaque</p><p><span style="white-space:pre">        </span>passes:</p><p><span style="white-space:pre">                </span>- vert: unlit-vs:vert</p><p><span style="white-space:pre">        </span>frag: unlit-fs:frag</p><p><span style="white-space:pre">        </span>properties: &props</p><p><span style="white-space:pre">        </span>mainTexture: { value: grey }</p><p><span style="white-space:pre">        </span>allOffset: { value: [0, 0, 0, 0] }</p><p><span style="white-space:pre">        </span>dist: { value: 1 }</p><p><span style="white-space:pre">                </span>- name: transparent</p><p><span style="white-space:pre">        </span>passes:</p><p><span style="white-space:pre">        </span>- vert: unlit-vs:vert</p><p><span style="white-space:pre">        </span>frag: unlit-fs:frag</p><p><span style="white-space:pre">        </span>depthStencilState:</p><p><span style="white-space:pre">        </span>depthTest: true</p><p><span style="white-space:pre">        </span>depthWrite: false</p><p><span style="white-space:pre">        </span>blendState:</p><p><span style="white-space:pre">        </span>targets:</p><p><span style="white-space:pre">                </span>- blend: true</p><p><span style="white-space:pre">        </span>blendSrc: src_alpha</p><p><span style="white-space:pre">        </span>blendDst: one_minus_src_alpha</p><p><span style="white-space:pre">        </span>blendDstAlpha: one_minus_src_alpha</p><p><span style="white-space:pre">        </span>properties: *props</p><p>}%</p>

复制代码

5?????? Effect ??????????????????????????????????????? builtin-unlit ???????? shader?

????? uniform ?

1. <p>
   
2. </p><p>uniform Constants {</p><p>  vec4 allOffset;</p><p>  float dist;</p><p>};</p>

复制代码

???????vert

????????????????????????? CCVertInput ?????

???????????????????????????????????????????????? cc-local-batch ??????? CCGetWorldMatrix ?????????

1. <p>vec4 position;</p><p>CCVertInput(position);</p><p>
   
2. </p><p>highp mat4 matWorld;</p><p>CCGetWorldMatrix(matWorld);</p><p></p>

复制代码

????????????????????????????????????????????? Z ?????????????????? Z ????

dist ??????????????? vpos.z ????????????????????????????? dist ??????????????????????????????????????? dist ????? 0?

???????????? allOffset ?????????????? zOff ?????????????????????????

????????????????????????????????????????????????????????

1. <p>highp vec4 vpos = cc_matView * matWorld * position;</p><p>highp float zOff = vpos.z / dist;</p><p>vpos += allOffset * zOff * zOff;</p><p>highp vec4 pos = cc_matProj * vpos;</p><p>
   
2. </p><p>v_uv = a_texCoord;</p><p>return pos;</p>

复制代码

6???????????????????????????????????

7???? effect ???

1. <p>CCEffect %{</p><p><span style="white-space:pre">        </span>techniques:</p><p><span style="white-space:pre">                </span>- name: opaque</p><p><span style="white-space:pre">        </span>passes:</p><p><span style="white-space:pre">                </span>- vert: unlit-vs:vert</p><p><span style="white-space:pre">        </span>frag: unlit-fs:frag</p><p><span style="white-space:pre">        </span>properties: &props</p><p><span style="white-space:pre">        </span>mainTexture: { value: grey }</p><p><span style="white-space:pre">        </span>allOffset: { value: [0, 0, 0, 0] }</p><p><span style="white-space:pre">        </span>dist: { value: 1 }</p><p><span style="white-space:pre">                </span>- name: transparent</p><p><span style="white-space:pre">        </span>passes:</p><p><span style="white-space:pre">                </span>- vert: unlit-vs:vert</p><p><span style="white-space:pre">        </span>frag: unlit-fs:frag</p><p><span style="white-space:pre">        </span>depthStencilState:</p><p><span style="white-space:pre">        </span>depthTest: true</p><p><span style="white-space:pre">        </span>depthWrite: false</p><p><span style="white-space:pre">        </span>blendState:</p><p><span style="white-space:pre">        </span>targets:</p><p><span style="white-space:pre">                </span>- blend: true</p><p><span style="white-space:pre">        </span>blendSrc: src_alpha</p><p><span style="white-space:pre">        </span>blendDst: one_minus_src_alpha</p><p><span style="white-space:pre">        </span>blendDstAlpha: one_minus_src_alpha</p><p><span style="white-space:pre">        </span>properties: *props</p><p>}%</p><p>
   
2. </p><p>CCProgram unlit-vs %{</p><p><span style="white-space:pre">        </span>precision highp float;</p><p>
   
3. </p><p><span style="white-space:pre">        </span>#include <cc-global></p><p><span style="white-space:pre">        </span>#include <cc-local-batch></p><p><span style="white-space:pre">        </span>#include <input></p><p>
   
4. </p><p><span style="white-space:pre">        </span>in vec2 a_texCoord;</p><p><span style="white-space:pre">        </span>out vec2 v_uv;</p><p>
   
5. </p><p><span style="white-space:pre">        </span>uniform Constants {</p><p><span style="white-space:pre">                </span>vec4 allOffset;</p><p><span style="white-space:pre">                </span>float dist;</p><p><span style="white-space:pre">        </span>};</p><p>
   
6. </p><p><span style="white-space:pre">        </span>highp vec4 vert () {</p><p><span style="white-space:pre">                </span>vec4 position;</p><p><span style="white-space:pre">                </span>CCVertInput(position);</p><p>
   
7. </p><p><span style="white-space:pre">                </span>highp mat4 matWorld;</p><p><span style="white-space:pre">                </span>CCGetWorldMatrix(matWorld);</p><p>
   
8. </p><p><span style="white-space:pre">                </span>highp vec4 vpos = cc_matView * matWorld * position;</p><p><span style="white-space:pre">                </span>highp float zOff = vpos.z / dist;</p><p><span style="white-space:pre">                </span>vpos += allOffset * zOff * zOff;</p><p><span style="white-space:pre">                </span>highp vec4 pos = cc_matProj * vpos;</p><p>
   
9. </p><p><span style="white-space:pre">                </span>v_uv = a_texCoord;</p><p><span style="white-space:pre">                </span>#if FLIP_UV</p><p><span style="white-space:pre">                </span>v_uv.y = 1.0 - v_uv.y;</p><p><span style="white-space:pre">                </span>#endif</p><p><span style="white-space:pre">                </span>return pos;</p><p><span style="white-space:pre">        </span>}</p><p>}%</p><p>
   
10. </p><p>CCProgram unlit-fs %{</p><p><span style="white-space:pre">        </span>precision highp float;</p><p><span style="white-space:pre">        </span></p><p><span style="white-space:pre">        </span>#include <output></p><p>
    
11. </p><p><span style="white-space:pre">        </span>in vec2 v_uv;</p><p><span style="white-space:pre">        </span>uniform sampler2D mainTexture;</p><p>
    
12. </p><p><span style="white-space:pre">        </span>vec4 frag () {</p><p><span style="white-space:pre">                </span>vec4 o = vec4(1, 1, 1, 1);</p><p>
    
13. </p><p><span style="white-space:pre">                </span>o *= texture(mainTexture, v_uv);</p><p>
    
14. </p><p><span style="white-space:pre">                </span>return CCFragOutput(o);</p><p><span style="white-space:pre">        </span>}</p><p>}%</p>

复制代码

8????? effect ??????????????????????? Effect ???????? curved ???????????? dist ? AllOffset ??????????????????? plane ??????????????????????????????????????????????????????

9?????Shader ?????????????????????? dist ? 100?AllOffset ? Y ?? 10 ???????????????????????????

10??????????????????????????????????????????????????????????????????????????????????????????????? Y ??????????? X ??????????????? Dist ? 100?X ? -20?Y ? -10 ??????

6???

????? [ShaderToy] ????????????? ShaderToy ??? Shader ?????? Shader ???????????? [??????] ? demo02 ????????????????? (ShaderToy)????????????????

????????????????????????? @yans ?????????????????????????????

???????????????????????????????????????????????????????????????? Cocos Creator 3D ????????????

?????????????GitHub?Cocos ???????????? Cocos Creator 3D ?????

??????

???CocosEngine
???indienova
????https://indienova.com/indie-game-development/cocos-creator-3d-curve-effect/