rollup搭建项目
现在的项目基本都开始用rollup搭建的，很快要放弃webpack了。
初始化
npm init接着按照步骤填入信息，生成package.json，默认入口为main.js，暂时写成main.js，后面会修改入口文件为编译后的文件
在根目录新建src文件夹，在src文件夹下新建main.ts文件：
export function hello () {
console.log('hello indeex')
}配置rollup
安装typescript、rollup：
npm i -D typescript
npm i -S rollup配置eslint
[……]
使用next.js做ssr
目前使用next.js的越来越多，这里是只是一个模版记录。
开始
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
sass
npm i -S sass直接使用，无需其他配置
移动端适配
安装postcss-px-to-viewport
npm i -D postcss-px-to-viewport根目录新建postcss.config.js：
/*
* @Author: indeex
*[......]WebGPU基础（八）- 体积雾
体积雾，简单来说就是有体积的区域雾，在体积雾内的物体，会显得模糊；而在体积雾外的物体，则是物体的原颜色。
在实际生活中，光在均匀的空气中直线传播，当遇到浑浊的空气，光线中的一部分能量会照射在小颗粒上，进而一部分光散射入眼睛。这是看见的光产生体积效果。
注意区分体积光的区别：
体积雾,是没有直接的光照，小颗粒反射的光线全部来自于间接光；
体积光，则是有明显的单一光照请向；
如果物体落在体积雾内，我们需要在雾的颜色和物体原颜色之间做一个混合。这个混合比例不是固定的，而是取决于体积雾的厚度。而这个厚度，和物体以及体积雾的深度是相关的，需要用物体的深度减去离眼睛更近的雾的深度以得到体积雾的厚度。厚[……]
WebGPU基础（八）- 体积雪
下雪时，物体上的雪会随着下雪时间，逐渐增加厚度，物体坠落或经过时，会形成凹陷效果，再次随着时间的推移厚度慢慢增加，这种有种类似地形图的效果。
[已加密]
请联系作者登记后查看，联系方式在本页获取。
code enjoy! 🦖🦖🦖
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
[……]
WebGPU基础（七）- 光追效果
光线追踪（英语：ray tracing）是三维计算机图形学中的特殊渲染算法，追踪光线从来源开始照射到物体上，再由物体反射的光线“路径”，由于完整运算所有路径十分消耗运算资源，因此现有光线追踪技术仅运算“目所能及”的光线路径，由于是从玩家视角开始进行运算，有时被误解为光线追踪是追踪“从眼睛发出的光线”。通过这样一项技术生成编排好的场景的数学模型显现出来。这样得到的结果类似于光线投射与扫描线渲染方法的结果，但是这种方法有更好的光学效果，例如对于反射与折射有更准确的模拟效果，并且效率非常高，所以当追求高质量的效果时经常使用这种方法。
在物理学中，光线追迹可以用来计算光束在介质中传播的情况。在介质中传[……]
WebGPU基础（六）- 粒子特效
粒子特效的原理是将若干粒子无规则的组合在一起。来模拟火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹等效果，可以为场景提供更加丰富的表现力。
粒子不是静止的，运动起来后，组成粒子动画，被广泛运用于模拟天气系统、烟雾光效等方面。
由于粒子组合后会大量消耗系统资源，这里使用最简单的例子效果。
[已加密]
请联系作者登记后查看，联系方式在本页获取。
code enjoy! 🦖🦖🦖
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
[……]
WebGPU基础（五）- 加载模型
在WebGPU开发中，会加载各种各样的模型，
下载模型
这里以通用OBJ模型为例，首先是加载文件：
//...
private modeObj?: any;
private modeData?: any;
//...
//...
function loadFile(url: string) {
new Promise((resolve, reject) => {
});
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.onload = f[......]WebGPU基础（四）- 地形
地形其实就是带高度的纹理，又称高程纹理或高度贴图。
engine
修改之前的engine代码：
//...
import { setDevice, device, setCameraUniformBuffer, cameraUniformBuffer } from './common';
//...
let _cameraUniformBuffer = device.createBuffer({
size: this.matrixSize,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,[......]WebGPU基础（三）-场景和相机
物体
在引擎开发中，我们会添加一个一个的场景，然后使用不同的相机查看不同的物体。
首先物体的生成：
//...
import { mat4, vec3 } from 'gl-matrix';
import fragShaderCode from './shaders/triangle.frag.wgsl?raw';
import vertexShadowCode from './shaders/triangle.vert.wgsl?raw';
//...
constructor(device: GPUDevice, vertic[......]WebGPU基础（二）-旋转的立方体
根据克罗诺斯（Khronos）会议，WebGPU将于2022年第二季度发布1.0版本，WGSL也在快速完善。
按照以往的技术推广进度，理论上标准会在发布5-7年后才能被大部分信仰React/Vue的开发者接受，但随着硬件设备的不断发展、Web行业的不断壮大、使用Typescript的人越来越多以及元宇宙概念的普及，尤其很多以前使用WebGL开发Flash游戏的开发者很多已经早早开始了WebGPU引擎的开发工作，这个时间会被极大的缩短，那么今年将成为WebGPU元年。
那么WebGPU能做什么呢？理论上WebGPU is All，比如在服务器上可以挖矿、在游戏领域做3A大作、在电商领域做商品展示[……]