# 效果

幾何數(shù)據(jù) 提供了渲染的原材料，材質(zhì) 決定了渲染的方式，但在討論材質(zhì)之前，我們要討論一下其基于的效果 Effect。

效果可以認(rèn)為是一個(gè)材質(zhì)模板，通過(guò)光照模式lightMode和宏定義definition來(lái)對(duì)模板的各個(gè)功能進(jìn)行開(kāi)關(guān)。

# 內(nèi)置效果

詳見(jiàn) 內(nèi)置效果資源。

# 定制一個(gè)效果

function createSimpleEffect (scene: XRFrame.Scene) {
  return scene.createEffect({
    name: 'simple',
    properties: [
      {
        key: 'u_baseColorFactor',
        type: xrFrameSystem.EUniformType.FLOAT4,
        default: [1, 1, 1, 1]
      }
    ],
    images: [
      {
        key: 'u_baseColorMap',
        default: 'white',
        macro: 'WX_USE_BASECOLORMAP'
      }
    ],
    // 透明物體需要大于`2500`！
    defaultRenderQueue: 2000,
    passes: [
      {
        renderStates: {
          cullOn: true,
          blendOn: false,
          depthWrite: true,
          cullFace: xrFrameSystem.ECullMode.BACK,
        },
        lightMode: 'ForwardBase',
        useMaterialRenderStates: true,
        shaders: [0, 1]
      }
    ],
    shaders: [`#version 100

    attribute vec3 a_position;
    attribute highp vec2 a_texCoord;

    uniform mat4 u_view;
    uniform mat4 u_projection;
    uniform mat4 u_world;
  
    varying highp vec2 v_uv;
    
    void main()
    {
      v_uv = a_texCoord;
      gl_Position = u_projection * u_view * u_world * vec4(a_position, 1.);
    }`,
      `#version 100
    precision mediump float;

    uniform highp vec4 u_baseColorFactor;
    #ifdef WX_USE_BASECOLORMAP
      uniform sampler2D u_baseColorMap;
    #endif

    varying highp vec2 v_uv;

    void main()
    {
  #ifdef WX_USE_BASECOLORMAP
      vec4 baseColor = texture2D(u_baseColorMap, v_Uv) * u_baseColorFactor;
  #else
      vec4 baseColor = u_baseColorFactor;
  #endif

      gl_FragData[0] = baseColor;
    }  
      `],
  });
}

在效果的參數(shù)中，首先是其名字name，然后是其能允許的屬性properties和images。

# 定義屬性

屬性對(duì)應(yīng)后續(xù)生成材質(zhì)的uniforms的定義。每個(gè)property都需要一個(gè)鍵key、類型type和對(duì)應(yīng)于類型的默認(rèn)值，而每個(gè)image則不需要type、默認(rèn)值也是已經(jīng)注冊(cè)到了資源系統(tǒng)的紋理的資源id。

這里特別要注意在那個(gè)marco參數(shù)，它定義了當(dāng)用戶修改設(shè)置（通過(guò)材質(zhì)的接口）了這個(gè)屬性后，將會(huì)開(kāi)啟的宏，這個(gè)宏會(huì)直接應(yīng)用到著色器中。

注意，所有的外部設(shè)置的宏都必須以WX_開(kāi)頭！ 為了讓整個(gè)渲染正常運(yùn)作，框架內(nèi)置了一些屬性和宏，可見(jiàn)文章末尾的附錄。

# 渲染隊(duì)列

由defaultRenderQueue定義的渲染隊(duì)列，決定了渲染順序，將在下一章材質(zhì)中詳細(xì)論述。

透明物體需要大于2500！

# 配置Pass

Pass對(duì)應(yīng)的是使用了基于這個(gè)效果的材質(zhì)的網(wǎng)格的一次渲染，這個(gè)和相機(jī)組件相關(guān)，使用哪個(gè)pass渲染取決于相機(jī)當(dāng)次繪制指定的lightMode。

lightMode是光照模式，目前建議只能使用一個(gè)模式ForwardBase。當(dāng)存在多個(gè)pass都使用了同一個(gè)光照模式時(shí)，將會(huì)按順序?qū)⒕W(wǎng)格渲染多次。

renderStates顧名思義即渲染狀態(tài)，渲染狀態(tài)直接對(duì)應(yīng)底層圖形API都會(huì)提供的一系列概念，比如混合blend、深度depthTest等，比如示例里就定義了blendOn: false，即表明要關(guān)掉混合。

更多的渲染狀態(tài)可見(jiàn)API文檔IRenderStates，這里不贅述，這里主要要說(shuō)明一個(gè)規(guī)則，即useMaterialRenderStates這個(gè)參數(shù)的作用。

在xr-frame框架的設(shè)計(jì)中，渲染狀態(tài)是由效果決定默認(rèn)值，材質(zhì)決定最終值的，而useMaterialRenderStates則就是用于決定材質(zhì)是否能夠覆蓋效果默認(rèn)值的，如果為false，則總是使用效果提供的默認(rèn)值，如果為true，則由下面會(huì)講到材質(zhì)的渲染狀態(tài)的規(guī)則來(lái)決定。

在配置完這些之后，就是要定制shaders了。這是一個(gè)有兩個(gè)數(shù)字的數(shù)組，分別指定了頂點(diǎn)著色器和片段著色器在頂層參數(shù)中的shaders的索引。

# 編寫(xiě)著色器

效果配置的頂層參數(shù)中最后一項(xiàng)是shaders，這是一個(gè)字符串?dāng)?shù)組，每個(gè)元素都是一個(gè)完整的著色器。著色器使用標(biāo)準(zhǔn)的glsl1語(yǔ)法，這個(gè)不屬于教程范疇不再贅述。

我們提供了一些內(nèi)置可用的著色器的函數(shù)，在文章末尾會(huì)給出。

# 注冊(cè)到資源系統(tǒng)

將效果注冊(cè)到資源系統(tǒng)可用：

xrFrameSystem.registerEffect('custom', createSimpleEffect);

注冊(cè)后在schema中類型指定為effect的數(shù)據(jù)，便可以使用custom這個(gè)資源id引用到創(chuàng)建的資源了。