クリエイターとシェーダーの記録

開発 2023-07-02 06:02:20 訪問数: null

タイトル: クリエイター シェーダー レコード
カテゴリ: Cocos2dx
タグ: [クリエイター, シェーダー, レンダリング]
日付: 2023-03-29 21:16:51
コメント: false
mathjax: true
toc: true

クリエイターとシェーダーの記録

前編

  • 正式
    • シェーダーの作成と使用 - https://docs.cocos.com/creator/manual/zh/shader/effect-inspector.html
    • シェーダー構文 - https://docs.cocos.com/creator/manual/zh/shader/effect-syntax.html
    • 2D スプライト シェーダー: グラデーション - https://docs.cocos.com/creator/manual/zh/shader/write-effect-2d-sprite-gradient.html
    • マクロの使用範囲 - https://docs.cocos.com/creator/manual/zh/shader/macros.html#%E5%AE%8F%E7%9A%84%E4%BD%BF%E7%94% A8 %E8%8C%83%E5%9B%B4
    • Cocos Shader ビルトイン グローバル ユニフォーム - https://docs.cocos.com/creator/manual/zh/shader/uniform.html
  • Shader で完璧な Wave を書く - https://forum.cocos.org/t/topic/97927

シェーダとマテリアルを動的にロードする

  • マテリアルのプログラムによる使用 - https://docs.cocos.com/creator/manual/zh/material-system/material-script.html

パラメータを動的に設定する

  • オプションの構成パラメーターを渡す - https://docs.cocos.com/creator/manual/zh/shader/pass-parameter-list.html

マクロを有効にしてパラメータを公開する

  • マクロの使用範囲 - https://docs.cocos.com/creator/manual/zh/shader/macros.html#%E5%AE%8F%E7%9A%84%E4%BD%BF%E7%94% A8 %E8%8C%83%E5%9B%B4

  • editor.parent を通じて対応するマクロを指定すると、このプロパティはマクロが有効な場合にのみ表示されます。

      properties:
    alphaThreshold: {
      
       value: 0.5, target: colorScaleAndCutoff.w, editor: {
      
       parent: USE_ALPHA_TEST } }

入出力変数の定義

あれは

  • 頂点シェーダ

    CCProgram sprite-vs %{
      
      

  // application -> vertex
  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;

  // vertex -> fragment
  out vec4 color;
  out vec2 uv0;
  out vec2 uv1;
    
  vec4 vert () {
      
      
      vec4 pos = vec4(a_position, 1);
      pos = cc_matViewProj * pos;
      return pos; // 返回剪裁空间下的坐标
  }
}%

  • ピクセルシェーダ

    CCProgram sprite-fs %{
      
      

  // vertex -> fragment, 需要和像素着色器一致
  in vec4 color;
  in vec2 uv0;
  in vec2 uv1;
    
  vec4 frag () {
      
      
    vec4 mainVal = CCSampleWithAlphaSeparated(mainTexture, vec2(uv0.x + speed, uv0.y));
    return mainVal; // 最终显示的颜色
  }
}%

単位形式変数の定義

  1. パラメータをエディタに公開する必要がある場合は、プロパティにパラメータを記述します

    CCEffect %{
      
      
    properties:
        mainTexture:    {
      
       value: grey }
        mainTilingOffset:   {
      
       value: [1, 1, 0, 0] }

        colorB: {
      
       value: [0.2432, 0.2432, 0.2432, 1.0], editor: {
      
       type: color, tooltip: '颜色' } }
        colorC : {
      
       valu: [0.1, 0.0]}

        mask01Uspeed : {
      
       {
      
       valu: 1.0}, editor: {
      
       parent: 'MASK01', displayName: 'Uspeed' } }
        mask01Vspeed : {
      
       {
      
       valu: 1.0}, editor: {
      
       parent: 'MASK01', displayName: 'Vspeed' } }
}%

  2. ピクセル シェーダでは、定数

    CCProgram sprite-fs %{
      
      
    uniform Constant {
      
      
        vec4 colorB;
        vec2 colorC;
        float mask01Uspeed;
        float mask01Vspeed; 
    };
}%
    • unique の定義順序はバイト アラインメントの原則に従う必要があり、大きい方が先頭に、小さい方が最後に配置されます。そうでない場合は、エラーが報告されます。Error EFX2205: UBO 'Constant' introduces implicit padding: 8 bytes before 'xxx', consider re-ordering the members

  3. 頂点シェーダーでは、すべてTexCoordsに配置されます

    CCProgram sprite-vs %{
      
      
    uniform TexCoords {
      
      
        vec4 mainTilingOffset;

        float mask01Uspeed;
        float mask01Vspeed; 
    };
}%

  4. エディターの効果

    画像-20230401141035489

表示パラメータを編集する

  • 属性定義

    properties:
    _VSpeed_diffusem : {
      
       {
      
       value: 0.0}, target: colorScaleAndCutoff.x, editor: {
      
       parent: '_DIFFUSEMASK_ON', displayName: 'Vspeed', slide: true, range: [0, 1.0], visible: false, type: 'color', tooltip: '颜色 B' } }

    • value: はデフォルト値です。0.5, [0.5, 0.5], [0.5, 0.5, 0.5, 0.5]

    • target: パネル上のこの値をユニットまたはそのコンポーネントにマッピングできます。

    • editor: エディタの表示設定です

      • parent: コードで使用されるマクロを指定します。チェックすると、エディターでマクロが有効になります。これらのパラメーターが同じ領域に表示されます。

        画像-20230401143435425

      • slide: スクロールバーかどうかを示します

        画像-20230401143346490

      • displayName： 表示名

      • range: 値の範囲制約

      • visible: 表示または非表示

      • type: 'color': タイプを色として指定します

      • tooltip: ポップアッププロンプト

色

  • 属性定義

    properties:
    colorB: {
      
       value: [0.2432, 0.2432, 0.2432, 1.0], editor: {
      
       type: color, tooltip: '颜色 B' } }

  • 効果

    画像-20230401142319668

Unity シェーダーラボ コードの実際の翻訳

  • 団結

    #if _DIFFUSEMASK_ON

#if _DIFFUSEMASKRO_ON
    float DiffuseMaskAng_cos;
    float DiffuseMaskAng_sin;
    sincos(0.0174*_DiffuseMaskAng, DiffuseMaskAng_sin, DiffuseMaskAng_cos);

    //uv旋转前将旋转中心移到uv中心
    vec2 panner1=mul(v.texcoord0- vec2(0.5,0.5),half2x2( DiffuseMaskAng_cos, -DiffuseMaskAng_sin, DiffuseMaskAng_sin, DiffuseMaskAng_cos))+ vec2(0.5,0.5)+_Time.y*float2(_USpeed_diffusem, _VSpeed_diffusem);
#else
    float2 panner1=v.texcoord0+_Time.y*float2(_USpeed_diffusem, _VSpeed_diffusem);
#endif

    o.uv0 = TRANSFORM_TEX(panner1, _DiffuseMaskTex);
#endif

  • ココス

      properties:
    mainTexture:    {
      
       value: grey }
    mainTilingOffset:   {
      
       value: [1, 1, 0, 0] }

    _DiffuseMaskAng : {
      
      {
      
       value: 0.0}, editor: {
      
       step: 1, parent: '_DIFFUSEMASK_ON', displayName: '旋转角度'}}
    _USpeed_diffusem : {
      
       {
      
       value: 0.0}, editor: {
      
       parent: '_DIFFUSEMASK_ON', displayName: 'Uspeed' } }
    _VSpeed_diffusem : {
      
       {
      
       value: 0.0}, editor: {
      
       parent: '_DIFFUSEMASK_ON', displayName: 'Vspeed' } }


uniform TexCoords {
      
      
    vec4 mainTilingOffset;
    float _DiffuseMaskAng;

    float _USpeed_diffusem;
    float _VSpeed_diffusem; 
};

#if _DIFFUSEMASK_ON

#if _DIFFUSEMASKRO_ON
        float DiffuseMaskAng_cos;
        float DiffuseMaskAng_sin;
        DiffuseMaskAng_sin = sin(0.0174*_DiffuseMaskAng);
        DiffuseMaskAng_cos = cos(0.0174*_DiffuseMaskAng);

      //uv旋转前将旋转中心移到uv中心
        vec2 panner1=(a_texCoord- vec2(0.5,0.5)) * mat2( DiffuseMaskAng_cos, -DiffuseMaskAng_sin, DiffuseMaskAng_sin, DiffuseMaskAng_cos) + vec2(0.5,0.5)+cc_time.y*vec2(_USpeed_diffusem, _VSpeed_diffusem);
#else
        vec2 panner1=a_texCoord+cc_time.y*vec2(_USpeed_diffusem, _VSpeed_diffusem);
#endif

        uv0 = panner1 * mainTilingOffset.xy + mainTilingOffset.zw;
#else
        uv0 = a_texCoord;
#endif
    • mul は 2 つの行列に直接置き換えることができます*
    • float2/half2 は対応する vec2 に置き換えられます。
    • Half2x2 を mat2 に置き換える
    • sincos は sin と cos の計算に置き換えられます。

ピットを踏む

float 変数は小数点付きの値を定義する必要があります

  • 定義されている場合float aaa= 0;、エラーが報告されます。cannot convert from 'const int' to 'highp float'
  • 正しい使い方は、float aaa= 0.0;

アニメーション k マテリアル パラメータが有効になりません

  • この問題は 3.6.3 エンジンで発生します。
  • 解決策はバージョン 3.7.2 以降にアップグレードすることです。このような問題は発生しません。

2D UV サンプル エディタは正常に動作しますが、正しく動作しません

  • カスタム シェーダにテクスチャを追加し、UV を使用してサンプリングしたところ、エディタでは正常にサンプリングされているが、実行時にはサンプリングが正常ではないことがわかりました。

  • その理由は次のとおりです。エディタにインポートされたテクスチャがスプライト タイプに設定されている場合、Packable はデフォルトで自動的にチェックされます。つまり、画像は実行時に大きな画像にマージされ、変更された画像の UV が(0 または 1) ではなく 0.x になるため、この UV 値を使用してカスタム テクスチャをサンプリングすると、正しい結果が得られません。

    画像-20230403105350281

  • 解決策には2つのケースがあります

    1. スプライト テクスチャのサンプリング値を使用する必要がある場合は、 Packable にチェックを入れるだけで、自動的に大きな画像に結合されません。
    2. スプライト テクスチャを使用する必要がない場合は、小さな役に立たないテクスチャを作成し、Packableにチェックを入れることができます。

  • 公式ウェブサイトの説明を参照してください。

    https://docs.cocos.com/creator/manual/zh/asset/sprite-frame.html#packable

    Packable
    エンジンが動的イメージ結合機能を有効にしている場合、動的イメージ結合により、シーンの先頭で適切なテクスチャが大きなイメージに自動的にマージされ、ドローコールが削減されます。ただし、テクスチャをより大きな画像にマージすると、元のテクスチャの UV 座標が変更されます。テクスチャの UV 座標がカスタム エフェクトで使用されている場合、エフェクトの UV 計算が正しくなくなります。Packable を設定する必要があります。テクスチャのプロパティを false に設定します。テクスチャがダイナミック コンポジットにパックされるのを避けます。

エディターの開発は正常に実行されますが、パッケージ化後は正常に実行されません
  • 読み込みエラー:Failed to load resource: the server responded with a status of 404 (Not Found)
  • 理由は依然としてPackableの問題です。つまり、シェーダーで使用されるテクスチャの Packable がチェックされていて、このエラーが発生しました。
  • 解決策: シェーダーでテクスチャが使用されている場合、Packable をチェックすることはできません。コピーをコピーして、テクスチャタイプのテクスチャに変更する必要があります。

おすすめ

転載: blog.csdn.net/yangxuan0261/article/details/129900425
おすすめ
wlnmp ワンクリック インストール パッケージ更新 240522
ChatGPT は大幅にダウンしており、ロシアのハッカーによってハッキングされたと噂されていました。
ランキング
3800年前、AIを使って恋愛漫画を描いた
APKのインストールも開始されていない、報告異常FileUriExposedException
jQueryを使って無効にし、マウスのスクロールミドルクリックイベント
組み込みLinux開発プラットフォームを0から構築する
Mesmo se HTTPS for usado, o histórico de navegação ainda pode ser detectado?
右win10ファイルまたはあまりにも画像を保存、ファイルエクスプローラ常にこだわって、通常の使用の前に2分
机房重构错误----必须声明标量变量和SQLHelper的使用
Python определяет положение строки в другом списке строк
SSL証明書をインストールするには、サイトの重要性
C++编程小实验
アーカイブ
もっと
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)

コードワールド

© 2018 codetd.com