分类: WebGPU

 

WebGPU基础(八)- 体积雾

体积雾,简单来说就是有体积的区域雾,在体积雾内的物体,会显得模糊;而在体积雾外的物体,则是物体的原颜色。

在实际生活中,光在均匀的空气中直线传播,当遇到浑浊的空气,光线中的一部分能量会照射在小颗粒上,进而一部分光散射入眼睛。这是看见的光产生体积效果。

注意区分体积光的区别:

体积雾,是没有直接的光[……]

继续阅读

WebGPU基础(八)- 体积雪

下雪时,物体上的雪会随着下雪时间,逐渐增加厚度,物体坠落或经过时,会形成凹陷效果,再次随着时间的推移厚度慢慢增加,这种有种类似地形图的效果。

indeex@qq.com

[已加密]

请联系作者登记后查看,联系方式在本页获取。

code enjoy! 🦖🦖🦖

作者:indeex

链接:https://indeex.club[……]

继续阅读

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的人越来越多以及元[……]

继续阅读

Web Rust基础三

模块化

函数

函数的参数类型和返回值类型不能省略:

fn a_plus_b(a: i32, b: i32) -> i32 {
    return a + b;
}

fn main() {
    println!("{}", a_plus_b(1, 2));
}

函数的[……]

继续阅读

Web Rust基础二

循环-流程控制

循环与其他语言大致相同:

//作用域块
    let a = {
        println!("ABC"); // 输出 ABC
        "DEF" // 作为这个花括号块的值
    }; // 分号不可省略
    prin[......]

继续阅读