第1.2章：Cocos Shader开发环境搭建

工欲善其事，必先利其器。在开始Cocos Shader开发之前，我们需要搭建一个高效的开发环境。本章将详细介绍如何配置和优化Cocos Creator着色器的开发环境。

🎯 学习目标

通过本章学习，你将掌握：

  • Cocos Creator编辑器的安装和配置
  • VSCode着色器开发扩展的安装和使用
  • 着色器调试工具的配置
  • 开发环境的优化和实用技巧

💻 系统环境要求

硬件要求

最低配置：

  • CPU: Intel i5 / AMD Ryzen 5 或同等性能
  • 内存: 8GB RAM
  • 显卡: 支持OpenGL 3.3 / DirectX 11
  • 存储: 10GB可用空间

推荐配置：

  • CPU: Intel i7 / AMD Ryzen 7 或更高
  • 内存: 16GB RAM 或更高
  • 显卡: 独立显卡，支持OpenGL 4.5+
  • 存储: SSD硬盘

操作系统支持

  • Windows: Windows 10/11 (64位)
  • macOS: macOS 10.14+
  • Linux: Ubuntu 18.04+ / CentOS 7+

🔧 软件安装配置

1. Cocos Creator 安装

1
2
# 下载Cocos Creator 3.8.x
# 访问官网：https://www.cocos.com/creator

安装步骤：

  1. 访问Cocos官网下载最新版本
  2. 运行安装程序，选择安装路径
  3. 完成安装后启动Cocos Creator
  4. 注册/登录Cocos开发者账号

重要配置：

1
2
3
4
5
6
// 项目设置 -> 项目设置 -> 渲染配置
{
  "renderPipeline": "builtin-forward", // 前向渲染
  "customPipeline": "",               // 自定义管线
  "renderMode": "FORWARD"             // 渲染模式
}

2. VSCode 配置

安装VSCode

1
2
3
4
5
6
7
8
# Windows (使用winget)
winget install Microsoft.VisualStudioCode

# macOS (使用Homebrew)
brew install --cask visual-studio-code

# Linux (Ubuntu)
sudo snap install code --classic

安装扩展

  1. Cocos Creator Shader (官方扩展)

    • 语法高亮
    • 代码补全
    • 调试支持

  2. GLSL Lint

    • GLSL语法检查
    • 实时错误提示

  3. Shader languages support

    • 多种着色器语言支持
    • 语法高亮增强

VSCode配置文件

创建 .vscode/settings.json：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "glsllint.glslifyOptions": {
    "basedir": "${workspaceFolder}/assets/effects"
  },
  "files.associations": {
    "*.effect": "yaml",
    "*.chunk": "glsl"
  },
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "glsl.validation": true
}

3. 项目结构配置

标准目录结构

1
2
3
4
5
6
7
8
9
10
11
MyShaderProject/
├── assets/
│   ├── effects/          # 着色器文件
│   │   ├── common/       # 通用着色器
│   │   ├── surface/      # Surface Shader
│   │   └── legacy/       # Legacy Shader
│   ├── materials/        # 材质文件
│   ├── textures/         # 纹理资源
│   └── scenes/           # 场景文件
├── packages/             # 扩展包
└── settings/             # 项目配置

项目配置模板

创建着色器项目时，推荐配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// project.json 关键配置
{
  "renderPipeline": "builtin-forward",
  "groupList": [
    {
      "name": "default",
      "priority": 0,
      "index": 0
    },
    {
      "name": "ui",
      "priority": 1,
      "index": 1
    }
  ]
}

🛠️ 开发工具配置

1. 着色器编辑器配置

Cocos Creator内置编辑器

  • 路径: 资源管理器 -> 右键 -> 编辑
  • 功能: 语法高亮、实时预览、错误提示

外部编辑器配置

1
2
3
// 设置外部编辑器
// 偏好设置 -> 数据编辑 -> 外部脚本编辑器
// 路径：C:\Users\[用户名]\AppData\Local\Programs\Microsoft VS Code\Code.exe

2. 调试工具配置

基础调试宏

1
2
3
4
5
6
7
8
9
// 调试宏定义
#define DEBUG_MODE 1

#if DEBUG_MODE
  // 调试代码
  #define DEBUG_COLOR(color) gl_FragColor = vec4(color, 1.0)
#else
  #define DEBUG_COLOR(color)
#endif

渲染器调试

1
2
3
4
5
6
7
8
9
// 开启渲染调试
import { director, game } from 'cc';

// 在游戏初始化时开启调试模式
game.on('game-inited', () => {
  if (CC_DEBUG) {
    director.root.debugView.activate();
  }
});

3. 性能分析工具

GPU性能监控

1
2
3
4
5
6
7
8
9
10
11
// 启用性能统计
import { profiler } from 'cc';

// 开启性能面板
profiler.showStats();

// 自定义性能监控
const timer = cc.Label.create();
this.schedule(() => {
  timer.string = `FPS: ${Math.round(game.frameRate)}`;
}, 0.1);

着色器编译监控

1
2
3
4
5
6
7
// 编译时间监控宏
#define SHADER_COMPILE_START() \
  precision highp float; \
  // 开始编译

#define SHADER_COMPILE_END() \
  // 编译完成

📱 移动端调试配置

1. 真机调试设置

Android调试

1
2
3
4
5
# 启用USB调试
adb devices

# 连接设备调试
adb logcat | grep "cocos"

iOS调试

1
2
# 使用Xcode进行真机调试
# 在Xcode中查看Console输出

2. 远程调试工具

Chrome DevTools

1
2
3
// 开启远程调试
// 在移动端浏览器中访问：
// chrome://inspect/#devices

性能监控配置

1
2
3
4
5
6
7
8
9
10
11
12
// 移动端性能监控
const stats = {
  drawCalls: 0,
  triangles: 0,
  fps: 0
};

// 每帧统计
director.on(Director.EVENT_AFTER_UPDATE, () => {
  stats.fps = game.frameRate;
  console.log('Performance:', stats);
});

🎮 项目模板配置

1. 着色器项目模板

基础项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ShaderTemplate/
├── assets/
│   ├── effects/
│   │   ├── unlit/
│   │   │   └── unlit-base.effect
│   │   ├── pbr/
│   │   │   └── pbr-standard.effect
│   │   └── toon/
│   │       └── toon-basic.effect
│   ├── materials/
│   │   ├── unlit-mat.mtl
│   │   ├── pbr-mat.mtl
│   │   └── toon-mat.mtl
│   └── textures/
│       ├── white.png
│       ├── normal.png
│       └── noise.png

通用着色器模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 通用Surface Shader模板
CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: general-vs
      frag: general-fs
      properties: &props
        mainTexture:    { value: white }
        tintColor:      { value: [1, 1, 1, 1], editor: { type: color } }
        
  - name: transparent
    passes:
    - vert: general-vs
      frag: general-fs
      priority: 256
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
      properties: *props
}%

CCProgram general-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  #include <builtin/uniforms/cc-local>
  
  in vec3 a_position;
  in vec2 a_texCoord;
  in vec3 a_normal;
  
  out vec3 v_worldPos;
  out vec3 v_worldNormal;
  out vec2 v_uv;
  
  vec4 vert () {
    vec4 pos = vec4(a_position, 1);
    pos = cc_matWorld * pos;
    v_worldPos = pos.xyz;
    v_worldNormal = normalize((cc_matWorldIT * vec4(a_normal, 0.0)).xyz);
    v_uv = a_texCoord;
    
    return cc_matViewProj * pos;
  }
}%

CCProgram general-fs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  
  in vec3 v_worldPos;
  in vec3 v_worldNormal;
  in vec2 v_uv;
  
  uniform sampler2D mainTexture;
  uniform Properties {
    vec4 tintColor;
  };
  
  vec4 frag () {
    vec4 col = texture(mainTexture, v_uv);
    col *= tintColor;
    return col;
  }
}%

2. 材质预设配置

标准材质配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "ver": "1.0.21",
  "importer": "material",
  "imported": true,
  "uuid": "your-material-uuid",
  "files": [".json"],
  "subMetas": {},
  "userData": {
    "effect": "effects/general",
    "technique": 0,
    "states": {
      "cullMode": 0
    },
    "props": {
      "mainTexture": "white-texture-uuid",
      "tintColor": [1, 1, 1, 1]
    }
  }
}

🔄 版本控制配置

Git配置

1
2
3
4
5
6
7
8
9
10
11
12
# 创建.gitignore
echo "temp/
library/
local/
build/
.DS_Store
Thumbs.db" > .gitignore

# 初始化Git仓库
git init
git add .
git commit -m "Initial Cocos Shader project setup"

协作开发配置

1
2
3
4
5
6
7
8
// .vscode/extensions.json
{
  "recommendations": [
    "cocos.cocos-creator-shader",
    "slevesque.glsl",
    "dtoplak.vscode-glsllint"
  ]
}

📝 开发工作流程

1. 日常开发流程

1
2
3
4
5
# 1. 启动Cocos Creator
# 2. 创建/编辑着色器文件
# 3. 实时预览和调试
# 4. 性能测试和优化
# 5. 版本提交

2. 调试工作流程

1
2
3
4
5
6
7
8
9
10
11
12
13
// 调试流程示例
#define DEBUG_STEP 1

#if DEBUG_STEP == 1
  // 显示UV坐标
  gl_FragColor = vec4(v_uv, 0.0, 1.0);
#elif DEBUG_STEP == 2
  // 显示法线
  gl_FragColor = vec4(v_normal * 0.5 + 0.5, 1.0);
#elif DEBUG_STEP == 3
  // 显示最终效果
  gl_FragColor = finalColor;
#endif

🎉 环境验证

1. 创建测试项目

1
2
3
4
5
6
7
8
// 测试着色器加载
import { Material, MeshRenderer } from 'cc';

const testMaterial = new Material();
testMaterial.initialize({ effectName: 'builtin-unlit' });

const renderer = this.getComponent(MeshRenderer);
renderer.material = testMaterial;

2. 性能基准测试

1
2
3
4
5
6
7
8
9
10
11
12
// 性能测试着色器
CCProgram performance-test %{
  precision highp float;
  
  uniform float u_time;
  
  vec4 frag() {
    // 简单计算测试
    float result = sin(u_time) * cos(u_time);
    return vec4(result, result, result, 1.0);
  }
}%

📝 小结

本章介绍了Cocos Shader开发环境的完整搭建过程：

  • 系统环境要求和软件安装
  • VSCode和相关扩展的配置
  • 项目结构和开发工具设置
  • 调试和性能分析工具配置
  • 移动端开发环境配置

有了完善的开发环境，接下来我们将深入学习Cocos Shader的语法和编写规则。

下一章： 第1.3章：Cocos Shader语法详解

💡 最佳实践

  1. 保持环境整洁：定期清理临时文件和缓存
  2. 版本管理：使用Git管理着色器代码版本
  3. 性能监控：始终关注开发环境的性能表现
  4. 备份配置：定期备份开发环境配置文件

🔧 故障排除

常见问题

  1. 编译错误：检查GLSL语法和版本兼容性
  2. 预览异常：清理缓存重新编译
  3. 性能问题：检查着色器复杂度和优化级别

解决方案

1
2
3
4
5
# 清理项目缓存
rm -rf temp/
rm -rf library/

# 重新构建项目

准备好开发环境后，让我们开始学习Cocos Shader的语法！