creator shader 报错 Cannot read property 'passes' of undefined

creator shader 报错 Cannot read property 'passes' of undefined
  • Creator 版本:
    3.0

  • 目标平台:

  • 重现方式:
    CCEffect %{

    techniques:

    • passes:

      • vert: vs

        frag: fs

        blendState:

        targets:

        • blend: true

        rasterizerState:

        cullMode: none

        properties:

        mainTexture: { value: white }

        u_degree: { value: 0.03 }

        u_brightness: { value: 1.0 }

}%

CCProgram vs %{ // 顶点Shader模块开始

#include

precision highp float; //定义float高精度

in vec3 a_position; // 顶点Shader 从渲染管道里面获取的顶点信息,使用attribute来修饰;

in vec2 a_uv0; // 纹理坐标;

out vec2 uv0; // 传递给着色Shader,varying 来修饰,进行插值

void main () {

gl_Position = cc_matViewProj * vec4(a_position, 1);

uv0 = a_uv0;

}

}%

CCProgram fs %{

#define repeats 5. //重复次数,值越大模糊质量越高,但性能越低

precision highp float;

in vec2 uv0;

uniform sampler2D mainTexture;

uniform ARGS{

float u_degree;     //模糊度,外界属性

float u_brightness; //亮度,外界属性

};

// 应用贴图UV

vec4 draw(vec2 uv) {

  return  texture(mainTexture,uv).rgba; 

}

float grid(float var, float size) {

  return floor(var*size)/size;

}

// 降低亮度

vec4 dim(vec4 col, float factor) {

return vec4(col.r * factor, col.g * factor, col.b * factor, col.a);

}

// 随机值

float rand(vec2 co){

  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);

}

void main()

{

// 模糊贴图

vec4 blurred_image = vec4(0.);

// 重复采样

for (float i = 0.; i < repeats; i++) { 

  // 第一采样点

  vec2 q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i,uv0.x+uv0.y))+u_degree); 

  vec2 uv2 = uv0+(q*u_degree);

  blurred_image += draw(uv2)/2.;

  // 第二采样点

  q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i+2.,uv0.x+uv0.y+24.))+u_degree); 

  uv2 = uv0+(q*u_degree);

  blurred_image += draw(uv2)/2.;

}

// 中和

blurred_image /= repeats;

// 降低亮度

blurred_image = dim(blurred_image, u_brightness);

// 导出颜色

gl_FragColor = vec4(blurred_image);

}

}%

  • 首个报错:
    Cannot read property ‘passes’ of undefined

并且在
[Scene] ERROR: 0:33: ‘gl_FragColor’ : undeclared identifier

现在creator3.0中的 的 void main() 中的 gl_FragColor = vec4(0.);片元怎么处理呢

  • 之前哪个版本是正常的:window editor
  • 手机型号:
  • 手机浏览器:
  • 编辑器操作系统:
  • 重现概率:

帖代码时注意一下,你这个排版直接就全乱了,包括 YAML 部分的一些关键标记,我就先假设你这部分都写对了。

还有几个问题比较明显:

  • vs 里 include 哪个头文件没写清楚,应该至少需要 cc-global;
  • 如果你要自己写 main 函数,fs 的返回值要用 glsl 300 es 的语法 (out vec4 color 这种),不能再用 gl_FragColor 了

我给你稍微整理了一下后,编辑器里是正常的:


CCEffect %{
techniques:
- passes:
  - vert: vs
    frag: fs
    blendState:
      targets:
      - blend: true
    rasterizerState:
      cullMode: none
    properties:
      mainTexture: { value: white }
      u_degree: { value: 0.03 }
      u_brightness: { value: 1.0 }
}%

CCProgram vs %{ // 顶点Shader模块开始
  precision highp float; //定义float高精度
  #include <cc-global>

  in vec3 a_position; // 顶点Shader 从渲染管道里面获取的顶点信息,使用attribute来修饰;
  in vec2 a_uv0; // 纹理坐标;
  out vec2 uv0; // 传递给着色Shader,varying 来修饰,进行插值

  void main () {
    gl_Position = cc_matViewProj * vec4(a_position, 1);
    uv0 = a_uv0;
  }
}%

CCProgram fs %{
  precision highp float;
  #define repeats 5. //重复次数,值越大模糊质量越高,但性能越低

  in vec2 uv0;
  uniform sampler2D mainTexture;
  uniform ARGS {
    float u_degree;     //模糊度,外界属性
    float u_brightness; //亮度,外界属性
  };

  // 应用贴图UV
  vec4 draw(vec2 uv) {
    return  texture(mainTexture,uv).rgba;
  }

  float grid(float var, float size) {
    return floor(var*size)/size;
  }

  // 降低亮度
  vec4 dim(vec4 col, float factor) {
    return vec4(col.r * factor, col.g * factor, col.b * factor, col.a);
  }

  // 随机值
  float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
  }

  layout(location = 0) out vec4 cc_FragColor;

  void main() {

    // 模糊贴图
    vec4 blurred_image = vec4(0.);

    // 重复采样
    for (float i = 0.; i < repeats; i++) {

      // 第一采样点
      vec2 q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i,uv0.x+uv0.y))+u_degree);
      vec2 uv2 = uv0+(q*u_degree);
      blurred_image += draw(uv2)/2.;

      // 第二采样点
      q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i+2.,uv0.x+uv0.y+24.))+u_degree);
      uv2 = uv0+(q*u_degree);
      blurred_image += draw(uv2)/2.;
    }

    // 中和
    blurred_image /= repeats;
    // 降低亮度
    blurred_image = dim(blurred_image, u_brightness);
    // 导出颜色
    cc_FragColor = vec4(blurred_image);
  }
}%

原来的gl_FragColor-》cc_Fragcolor
但是3.0的这些修改都是在哪里去找也不是很清楚
这里的文档在哪里查看一下呢

effect 语法参考这里,注意文档已经提示,不要自己写 main 函数,就是因为这部分会复杂一些,而一定要自己写的话,就得类似上面的写法,符合 GLSL 300 es 的标准才行。