WebGL Shader 入门教程
1. 项目的目录结构及介绍
jam3-lesson-webgl-shader-intro/
├── assets/
│ └── images/
├── dist/
│ ├── index.html
│ └── bundle.js
├── src/
│ ├── shaders/
│ │ ├── fragment.glsl
│ │ └── vertex.glsl
│ ├── index.js
│ └── styles.css
├── package.json
└── webpack.config.js
assets/
: 存放项目所需的静态资源,如图片等。dist/
: 编译后的文件,包括index.html
和bundle.js
。src/
: 源代码目录。shaders/
: 存放 WebGL 着色器代码。fragment.glsl
: 片元着色器代码。vertex.glsl
: 顶点着色器代码。
index.js
: 主入口文件。styles.css
: 样式文件。
package.json
: 项目依赖和脚本配置。webpack.config.js
: Webpack 配置文件。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
。这个文件负责初始化 WebGL 上下文,加载着色器,并启动渲染循环。以下是 index.js
的主要内容:
import './styles.css';
import { initShaders } from './shaders';
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL not supported, falling back on experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Your browser does not support WebGL');
}
initShaders(gl);
function render() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 渲染逻辑
requestAnimationFrame(render);
}
render();
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖和脚本配置。以下是主要内容:
{
"name": "jam3-lesson-webgl-shader-intro",
"version": "1.0.0",
"description": "Introduction to WebGL shaders",
"main": "src/index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
"dependencies": {
"webpack": "^5.0.0",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"css-loader": "^5.0.0",
"style-loader": "^2.0.0",
"glsl-loader": "^2.0.0"
}
}
webpack.config.js
webpack.config.js
文件是 Webpack 的配置文件,负责打包和开发服务器配置。以下是主要内容:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(glsl|frag|vert)$/,
use: ['glsl-loader']
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
以上是 jam3-lesson-webgl-shader-intro
项目的目录结构、启动文件和配置文件的详细介绍。