作者： indeex
rollup搭建项目
现在的项目基本都开始用rollup搭建的，很快要放弃webpack了。
初始化
npm init接着按照步骤填入信息，生成package.json，默认入口为main.js，暂时写成main.js，后面会修改入口文件为编译后的文件
在根目录新建src文件夹，在src文件夹下新建main.ts文件：[……]
使用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[……]
WebGPU基础（八）- 体积雾
体积雾，简单来说就是有体积的区域雾，在体积雾内的物体，会显得模糊；而在体积雾外的物体，则是物体的原颜色。
在实际生活中，光在均匀的空气中直线传播，当遇到浑浊的空气，光线中的一部分能量会照射在小颗粒上，进而一部分光散射入眼睛。这是看见的光产生体积效果。
注意区分体积光的区别：
体积雾,是没有直接的光[……]
WebGPU基础（八）- 体积雪
下雪时，物体上的雪会随着下雪时间，逐渐增加厚度，物体坠落或经过时，会形成凹陷效果，再次随着时间的推移厚度慢慢增加，这种有种类似地形图的效果。
[已加密]
请联系作者登记后查看，联系方式在本页获取。
code enjoy! 🦖🦖🦖
作者：indeex
WebGPU基础（七）- 光追效果
光线追踪（英语：ray tracing）是三维计算机图形学中的特殊渲染算法，追踪光线从来源开始照射到物体上，再由物体反射的光线“路径”，由于完整运算所有路径十分消耗运算资源，因此现有光线追踪技术仅运算“目所能及”的光线路径，由于是从玩家视角开始进行运算，有时被误解为光线追踪是追踪“从眼睛发出的光线”[……]
WebGPU基础（六）- 粒子特效
粒子特效的原理是将若干粒子无规则的组合在一起。来模拟火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹等效果，可以为场景提供更加丰富的表现力。
粒子不是静止的，运动起来后，组成粒子动画，被广泛运用于模拟天气系统、烟雾光效等方面。
由于粒子组合后会大量消耗系统资源，这里使用最简单的[……]
WebGPU基础（五）- 加载模型
在WebGPU开发中，会加载各种各样的模型，
下载模型
这里以通用OBJ模型为例，首先是加载文件：
//...
private modeObj?: any;
private modeData?: any;
//...
//...
function loadFile(url: string)[......]WebGPU基础（四）- 地形
地形其实就是带高度的纹理，又称高程纹理或高度贴图。
engine
修改之前的engine代码：
//...
import { setDevice, device, setCameraUniformBuffer, cameraUniformBuffer } from './common&#[......]WebGPU基础（三）-场景和相机
物体
在引擎开发中，我们会添加一个一个的场景，然后使用不同的相机查看不同的物体。
首先物体的生成：
//...
import { mat4, vec3 } from 'gl-matrix';
import fragShaderCode from './shaders/[......]WebGPU基础（二）-旋转的立方体
根据克罗诺斯（Khronos）会议，WebGPU将于2022年第二季度发布1.0版本，WGSL也在快速完善。
按照以往的技术推广进度，理论上标准会在发布5-7年后才能被大部分信仰React/Vue的开发者接受，但随着硬件设备的不断发展、Web行业的不断壮大、使用Typescript的人越来越多以及元[……]