GLSL Lighting Walkthrough 项目使用说明

GLSL Lighting Walkthrough 项目使用说明

glsl-lighting-walkthrough :bulb: phong shading tutorial with glslify 项目地址: https://gitcode.com/gh_mirrors/gl/glsl-lighting-walkthrough

1. 项目的目录结构及介绍

glsl-lighting-walkthrough 项目目录结构如下：

glsl-lighting-walkthrough/
├── assets/             # 存储项目所需的资源文件，如图像等
├── lib/                # 包含项目的核心JavaScript代码
│   ├── app.js          # 应用程序的主要逻辑
│   ├── scene.js        # 场景设置和渲染逻辑
│   ├── create-sphere.js # 创建球体的函数
│   └── create-torus.js # 创建环面的函数，并应用Phong着色器
├── shaders/            # 着色器相关文件
│   ├── basic.frag      # 基本片段着色器
│   ├── basic.vert      # 基本顶点着色器
│   ├── phong.frag      # Phong着色器片段部分
│   └── phong.vert      # Phong着色器顶点部分
├── .gitignore          # 指定Git应该忽略的文件和目录
├── .npmignore          # 指定npm打包时应该忽略的文件和目录
├── LICENSE.md          # 项目许可证信息
├── README.md           # 项目说明文件
├── index.html          # 项目入口HTML文件
├── index.js            # 项目入口JavaScript文件，负责初始化应用程序
└── package.json        # npm配置文件，包含项目依赖和脚本

2. 项目的启动文件介绍

项目的启动文件是 index.js。该文件负责加载必要的资源，并启动应用程序。主要步骤如下：

• 加载图像资源
• 初始化 WebGL 渲染循环
• 绘制场景

以下是 index.js 的核心代码片段：

// 加载图像资源
loadImages(function(images) {
  // 初始化应用程序
  boot(images);
});

function boot(images) {
  // 创建应用实例
  var app = new App();
  // 启动应用
  app.start();
}

3. 项目的配置文件介绍

项目的配置主要通过 package.json 文件进行。以下是 package.json 中的关键部分：

{
  "name": "glsl-lighting-walkthrough",
  "version": "1.0.0",
  "description": "A phong shading tutorial with glslify",
  "main": "index.js",
  "scripts": {
    "start": "live-server",
    "build": "browserify index.js -o bundle.js"
  },
  "dependencies": {
    "glslify": "^2.0.0"
  },
  "devDependencies": {
    "babelify": "^7.0.0",
    "live-server": "^1.2.0"
  }
}

在 scripts 部分，定义了两个脚本：

• "start" 脚本使用 live-server 来启动一个本地服务器，以便在浏览器中实时查看项目。
• "build" 脚本使用 browserify 将项目打包成一个单独的 JavaScript 文件 bundle.js。

dependencies 部分列出了项目依赖的 npm 包，例如 glslify 用于模块化着色器。

devDependencies 部分列出了开发过程中需要的 npm 包，例如 babelify 和 live-server。

要启动项目，可以在终端执行以下命令：

npm start

这将启动本地服务器，并在浏览器中打开 http://localhost:8080 来显示项目。

glsl-lighting-walkthrough :bulb: phong shading tutorial with glslify 项目地址: https://gitcode.com/gh_mirrors/gl/glsl-lighting-walkthrough