首页 > 其他分享 >webgpu_快速入门

webgpu_快速入门

时间:2023-06-04 12:57:05浏览次数:44  
标签:const 入门 0.0 webgpu 缓冲区 device 顶点 快速 WebGPU

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/9.三角形拼接矩形/2.三角形拼接矩形.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });


        //创建顶点数据
        // 一个矩形拆分为两个三角形表示,三角形其中两个顶点坐标是重合的
        // 注意一个面的多个三角形,正反面要保持一致,要么都是正面,要么都是反面,或者说沿着某个方向看过去,要么都是顺时装,要么都是逆时针
        const vertexArray = new Float32Array([
            // 三角形1三个顶点坐标的x、y、z值
            -0.3, -0.5, 0.0,//顶点1坐标
            0.3, -0.5, 0.0,//顶点2坐标
            0.3, 0.5, 0.0,//顶点3坐标
            // 三角形2三个顶点坐标的x、y、z值
            -0.3, -0.5, 0.0,//顶点4坐标 与顶点1重合
            0.3, 0.5, 0.0,//顶点5坐标 与顶点3重合
            -0.3, 0.5, 0.0,//顶点6坐标
        ]);
        const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
            size: vertexArray.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区


        // 渲染管线
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",
                buffers: [//顶点缓冲区相关设置
                    {
                        arrayStride: 3 * 4,
                        attributes: [{
                            shaderLocation: 0,//顶点缓冲区存储位置标记
                            format: "float32x3",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",
                targets: [{
                    format: format
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

        // 命令编码器
        const commandEncoder = device.createCommandEncoder();
        // 渲染通道
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
                loadOp: 'clear',
            }]
        });
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.draw(6);// 绘制顶点数据
        renderPass.end();
        const commandBuffer = commandEncoder.finish();
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/9.三角形拼接矩形/1.随机两个三角形.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });


        //创建顶点数据
        const vertexArray = new Float32Array([
            // 三角形1三个顶点坐标的x、y、z值
            0.0, 0.0, 0.0,//顶点1坐标
            1.0, 0.0, 0.0,//顶点2坐标
            0.0, 1.0, 0.0,//顶点3坐标
            // 三角形2三个顶点坐标的x、y、z值
            -0.5, -0.5, 0.0,//顶点4坐标
            -1.0, -0.5, 0.0,//顶点5坐标
            -0.5, -1.0, 0.0,//顶点6坐标
        ]);
        const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
            size: vertexArray.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区


        // 渲染管线
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",
                buffers: [//顶点缓冲区相关设置
                    {
                        arrayStride: 3 * 4,
                        attributes: [{
                            shaderLocation: 0,//顶点缓冲区存储位置标记
                            format: "float32x3",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",
                targets: [{
                    format: format
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

        // 命令编码器
        const commandEncoder = device.createCommandEncoder();
        // 渲染通道
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
                loadOp: 'clear',
            }]
        });
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.draw(6);// 绘制顶点数据
        renderPass.end();
        const commandBuffer = commandEncoder.finish();
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/9.三角形拼接矩形/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`

// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/2.WebGPU API和Canvas画布/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        // 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//颜色格式
        });
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/2.WebGPU API和Canvas画布/canvas元素.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500" style="background-color: black;"></canvas>
    <script type="module">

    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/2.WebGPU API和Canvas画布/获取GPU设备对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <script type="module">
        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();

        console.log('适配器adapter', adapter);
        console.log('GPU设备对象device', device);
        
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/6.片元着色器、图元装配/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        // 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//颜色格式
        });

        // 创建顶点数据的缓冲区
        const vertexArray = new Float32Array([
            // 三角形三个顶点坐标的x、y、z值
            0.0, 0.0, 0.0,//顶点1坐标
            1.0, 0.0, 0.0,//顶点2坐标
            0.0, 1.0, 0.0,//顶点3坐标
        ]);
        //类型化数组Float32Array一个数字元素,占用存储空间4字节,9个浮点数,数据字节长度9*4
        // console.log('类型化数组数据字节长度',vertexArray.byteLength);
        const vertexBuffer = device.createBuffer({
            size: vertexArray.byteLength,//顶点数据的字节长度
            //usage设置该缓冲区的用途
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        //把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
        //获取顶点数据的偏移量(单位字节),0表示从vertexArray的数据开始开头读取数据
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);


        // 创建一个WebGPU渲染管线对象pipeline
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                // module:设置渲染管线要执行的顶点着色器代码
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",//顶点着色器代码入口函数的名字
                buffers: [// 顶点所有的缓冲区模块设置
                    {//其中一个顶点缓冲区设置
                        arrayStride: 3 * 4,//一个顶点数据占用的字节长度,该缓冲区一个顶点包含xyz三个分量,每个数字是4字节浮点数,3*4字节长度
                        // 顶点缓冲区属性
                        attributes: [{
                            shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
                            format: "float32x3",//格式:loat32x3表示一个顶点数据包含3个32位浮点数
                            offset: 0//arrayStride表示每组顶点数据间隔字节数,offset表示读取改组的偏差字节数,没特殊需要一般设置0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                // module:设置渲染管线要执行的片元着色器代码
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",//指定片元着色器入口函数
                targets: [{
                    format: format//和WebGPU上下文配置的颜色格式保持一致
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/6.片元着色器、图元装配/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`

// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/3.创建顶点缓冲区、渲染管线/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        // 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//颜色格式
        });

        // 创建顶点数据的缓冲区
        const vertexArray = new Float32Array([
            // 三角形三个顶点坐标的x、y、z值
            0.0, 0.0, 0.0,//顶点1坐标
            1.0, 0.0, 0.0,//顶点2坐标
            0.0, 1.0, 0.0,//顶点3坐标
        ]);
        //类型化数组Float32Array一个数字元素,占用存储空间4字节,9个浮点数,数据字节长度9*4
        // console.log('类型化数组数据字节长度',vertexArray.byteLength);
        const vertexBuffer = device.createBuffer({
            size: vertexArray.byteLength,//顶点数据的字节长度
            //usage设置该缓冲区的用途
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        //把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
        //获取顶点数据的偏移量(单位字节),0表示从vertexArray的数据开始开头读取数据
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);


        // 创建一个WebGPU渲染管线对象pipeline
        const pipeline = device.createRenderPipeline({
            vertex: {//顶点相关配置
                buffers: [// 顶点所有的缓冲区模块设置
                    {//其中一个顶点缓冲区设置
                        arrayStride: 3*4,//一个顶点数据占用的字节长度,该缓冲区一个顶点包含xyz三个分量,每个数字是4字节浮点数,3*4字节长度
                        // 顶点缓冲区属性
                        attributes: [{
                            shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
                            format: "float32x3",//格式:loat32x3表示一个顶点数据包含3个32位浮点数
                            offset: 0//arrayStride表示每组顶点数据间隔字节数,offset表示读取该组的偏差字节数,没特殊需要一般设置0
                        }]
                    }
                ]
            },
        });
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/8.WebGPU 3D坐标系(投影)/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });


        //创建顶点数据
        const vertexArray = new Float32Array([
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
            0.0, 0.0, 1.0,
        ]);
        const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
            size: vertexArray.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区


        // 渲染管线
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",
                buffers: [//顶点缓冲区相关设置
                    {
                        arrayStride: 3 * 4,
                        attributes: [{
                            shaderLocation: 0,//顶点缓冲区存储位置标记
                            format: "float32x3",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",
                targets: [{
                    format: format
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
                cullMode: 'back',//背面不显示
            }
        });

        // 命令编码器
        const commandEncoder = device.createCommandEncoder();
        // 渲染通道
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',
                loadOp: 'clear',
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
            }]
        });
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.draw(3);// 绘制顶点数据
        renderPass.end();
        const commandBuffer = commandEncoder.finish();
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/8.WebGPU 3D坐标系(投影)/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`


// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/8.WebGPU 3D坐标系(投影)/测试渲染范围.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });


        //创建顶点数据
        const vertexArray = new Float32Array([
            // // 1. 三角形三个顶点z都是2.0,不在0~1返回,canvas画布看不到三角形
            // 1.0, 0.0, 2.0,
            // 0.0, 1.0, 2.0,
            // 0.0, 0.0, 2.0,
            // // 2. 三个顶点坐标都没有超出范围,可以看到完整三角形
            // 1.0, 0.0, 0.0,
            // 0.0, 1.0, 0.0,
            // 0.0, 0.0, 0.0,
            // 顶点1的x坐标超出范围,三角形超出WebGPU渲染范围部分不显示,三角形渲染不完整
            2.0, 0.0, 0.2,
            0.0, 1.0, 0.2,
            0.0, 0.0, 0.2,
        ]);
        const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
            size: vertexArray.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区


        // 渲染管线
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",
                buffers: [//顶点缓冲区相关设置
                    {
                        arrayStride: 3 * 4,
                        attributes: [{
                            shaderLocation: 0,//顶点缓冲区存储位置标记
                            format: "float32x3",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",
                targets: [{
                    format: format
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
                cullMode: 'back',//背面不显示
            }
        });

        // 命令编码器
        const commandEncoder = device.createCommandEncoder();
        // 渲染通道
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
                loadOp: 'clear',
            }]
        });
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.draw(3);// 绘制顶点数据
        renderPass.end();
        const commandBuffer = commandEncoder.finish();
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/7.渲染命令(至此完成第一个案例)/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        // 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//颜色格式
        });

        // 创建顶点数据的缓冲区
        const vertexArray = new Float32Array([
            // 三角形三个顶点坐标的x、y、z值
            0.0, 0.0, 0.0,//顶点1坐标
            1.0, 0.0, 0.0,//顶点2坐标
            0.0, 1.0, 0.0,//顶点3坐标
        ]);
        //类型化数组Float32Array一个数字元素,占用存储空间4字节,9个浮点数,数据字节长度9*4
        // console.log('类型化数组数据字节长度',vertexArray.byteLength);
        const vertexBuffer = device.createBuffer({
            size: vertexArray.byteLength,//顶点数据的字节长度
            //usage设置该缓冲区的用途
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        //把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
        //获取顶点数据的偏移量(单位字节),0表示从vertexArray的数据开始开头读取数据
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);


        // 创建一个WebGPU渲染管线对象pipeline
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                // module:设置渲染管线要执行的顶点着色器代码
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",//顶点着色器代码入口函数的名字
                buffers: [// 顶点所有的缓冲区模块设置
                    {//其中一个顶点缓冲区设置
                        arrayStride: 3 * 4,//一个顶点数据占用的字节长度,该缓冲区一个顶点包含xyz三个分量,每个数字是4字节浮点数,3*4字节长度
                        // 顶点缓冲区属性
                        attributes: [{
                            shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
                            format: "float32x3",//格式:loat32x3表示一个顶点数据包含3个32位浮点数
                            offset: 0//arrayStride表示每组顶点数据间隔字节数,offset表示读取改组的偏差字节数,没特殊需要一般设置0
                        }]
                    }
                ]
            },
            fragment: {
                // module:设置渲染管线要执行的片元着色器代码
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",//指定片元着色器入口函数
                targets: [{
                    format: format//和WebGPU上下文配置的颜色格式保持一致
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

        // 创建GPU命令编码器对象
        const commandEncoder = device.createCommandEncoder();
        // 创建一个渲染通道对象
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                // 指向Canvas画布的纹理视图对象(Canvas对应的颜色缓冲区)
                // 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',//像素数据写入颜色缓冲区  canvas画布能看到渲染效果
                // storeOp: 'discard',//舍弃像素数据,不写入目标缓冲区  canvas画布能看不到渲染效果
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
                // loadOp: 'load',//clearValue的颜色不起作用
                loadOp: 'clear',//clearValue的颜色起作用
            }]
        });
        // 设置该渲染通道对应的渲染管线
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        // 绘制顶点数据
        renderPass.draw(3);
        // 结束命令.end()
        renderPass.end();
        // 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
        const commandBuffer = commandEncoder.finish();
        // 命令编码器缓冲区中命令传入GPU设备对象的命令队列.queue
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/7.渲染命令(至此完成第一个案例)/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`


// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/7.渲染命令(至此完成第一个案例)/模板(简化注释)/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });


        //创建顶点数据
        const vertexArray = new Float32Array([
            0.0, 0.0, 0.0,
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
        ]);
        const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
            size: vertexArray.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区


        // 渲染管线
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",
                buffers: [//顶点缓冲区相关设置
                    {
                        arrayStride: 3 * 4,
                        attributes: [{
                            shaderLocation: 0,//顶点缓冲区存储位置标记
                            format: "float32x3",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",
                targets: [{
                    format: format
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

        // 命令编码器
        const commandEncoder = device.createCommandEncoder();
        // 渲染通道
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',
                loadOp: 'clear',
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
            }]
        });
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.draw(3);// 绘制顶点数据
        renderPass.end();
        const commandBuffer = commandEncoder.finish();
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/7.渲染命令(至此完成第一个案例)/模板(简化注释)/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`


// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/7.渲染命令(至此完成第一个案例)/模板(简化注释)不设置背景颜色/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });


        //创建顶点数据
        const vertexArray = new Float32Array([
            0.0, 0.0, 0.0,
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
        ]);
        const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
            size: vertexArray.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区


        // 渲染管线
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",
                buffers: [//顶点缓冲区相关设置
                    {
                        arrayStride: 3 * 4,
                        attributes: [{
                            shaderLocation: 0,//顶点缓冲区存储位置标记
                            format: "float32x3",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {//片元相关配置
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",
                targets: [{
                    format: format
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

        // 命令编码器
        const commandEncoder = device.createCommandEncoder();
        // 渲染通道
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',
                loadOp: 'clear',
            }]
        });
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.draw(3);// 绘制顶点数据
        renderPass.end();
        const commandBuffer = commandEncoder.finish();
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/7.渲染命令(至此完成第一个案例)/模板(简化注释)不设置背景颜色/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`


// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/演示/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 顶点着色器、片元着色器代码
        import { vertex, fragment } from './shader.js'

        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        // 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//颜色格式
        });

        // 创建顶点数据的缓冲区
        const vertexArray = new Float32Array([
            // 三角形1三个顶点顺时针
            -0.3, -0.5, 0.0,//顶点1坐标
            0.3, -0.5, 0.0,//顶点2坐标
            0.3, 0.5, 0.0,//顶点3坐标
            // 三角形2三个顶点顺时针
            -0.3, -0.5, 0.0,//顶点4坐标 与顶点1重合
            0.3, 0.5, 0.0,//顶点5坐标 与顶点3重合
            -0.3, 0.5, 0.0,//顶点6坐标
        ]);
        //类型化数组Float32Array一个数字元素,占用存储空间4字节,9个浮点数,数据字节长度9*4
        // console.log('类型化数组数据字节长度',vertexArray.byteLength);
        const vertexBuffer = device.createBuffer({
            size: vertexArray.byteLength,//顶点数据的字节长度
            //usage设置该缓冲区的用途
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        //把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
        //获取顶点数据的偏移量(单位字节),0表示从vertexArray的数据开始开头读取数据
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);


        // 创建一个WebGPU渲染管线对象pipeline
        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {//顶点相关配置
                // module:设置渲染管线要执行的顶点着色器代码
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",//顶点着色器代码入口函数的名字
                buffers: [// 顶点所有的缓冲区模块设置
                    {//其中一个顶点缓冲区设置
                        arrayStride: 3 * 4,//一个顶点数据占用的字节长度,该缓冲区一个顶点包含xyz三个分量,每个数字是4字节浮点数,3*4字节长度
                        // 顶点缓冲区属性
                        attributes: [{
                            shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
                            format: "float32x3",//格式:loat32x3表示一个顶点数据包含3个32位浮点数
                            offset: 0//arrayStride表示每组顶点数据间隔字节数,offset表示读取改组的偏差字节数,没特殊需要一般设置0
                        }]
                    }
                ]
            },
            fragment: {
                // module:设置渲染管线要执行的片元着色器代码
                module: device.createShaderModule({ code: fragment }),
                entryPoint: "main",//指定片元着色器入口函数
                targets: [{
                    format: format//和WebGPU上下文配置的颜色格式保持一致
                }]
            },
            primitive: {
                topology: "triangle-list",//绘制三角形
            }
        });

        // 创建GPU命令编码器对象
        const commandEncoder = device.createCommandEncoder();
        // 创建一个渲染通道对象
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                // 指向Canvas画布的纹理视图对象(Canvas对应的颜色缓冲区)
                // 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)
                view: context.getCurrentTexture().createView(),
                storeOp: 'store',//像素数据写入颜色缓冲区  canvas画布能看到渲染效果
                // storeOp: 'discard',//舍弃像素数据,不写入目标缓冲区  canvas画布能看不到渲染效果
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
                // loadOp: 'load',//clearValue的颜色不起作用
                loadOp: 'clear',//clearValue的颜色起作用
            }]
        });
        // 设置该渲染通道对应的渲染管线
        renderPass.setPipeline(pipeline);
        // 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
        renderPass.setVertexBuffer(0, vertexBuffer);
        // 绘制顶点数据
        renderPass.draw(6);
        // 结束命令.end()
        renderPass.end();
        // 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
        const commandBuffer = commandEncoder.finish();
        // 命令编码器缓冲区中命令传入GPU设备对象的命令队列.queue
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/演示/shader.js

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`


// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

export { vertex, fragment }

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/5.顶点着色器/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- canvas:用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // 引入顶点着色器vertex代码对应字符串
        import { vertex } from './shader.js'

        const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
        // 获取GPU设备对象,通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        // 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//颜色格式
        });

        // 创建顶点数据的缓冲区
        const vertexArray = new Float32Array([
            // 三角形三个顶点坐标的x、y、z值
            0.0, 0.0, 0.0,//顶点1坐标
            1.0, 0.0, 0.0,//顶点2坐标
            0.0, 1.0, 0.0,//顶点3坐标
        ]);
        //类型化数组Float32Array一个数字元素,占用存储空间4字节,9个浮点数,数据字节长度9*4
        // console.log('类型化数组数据字节长度',vertexArray.byteLength);
        const vertexBuffer = device.createBuffer({
            size: vertexArray.byteLength,//顶点数据的字节长度
            //usage设置该缓冲区的用途
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });
        //把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
        //获取顶点数据的偏移量(单位字节),0表示从vertexArray的数据开始开头读取数据
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray);


        // 创建一个WebGPU渲染管线对象pipeline
        const pipeline = device.createRenderPipeline({
            vertex: {//顶点相关配置
                // module:设置渲染管线要执行的顶点着色器代码
                module: device.createShaderModule({ code: vertex }),
                entryPoint: "main",//顶点着色器代码入口函数的名字
                buffers: [// 顶点所有的缓冲区模块设置
                    {//其中一个顶点缓冲区设置
                        arrayStride: 3 * 4,//一个顶点数据占用的字节长度,该缓冲区一个顶点包含xyz三个分量,每个数字是4字节浮点数,3*4字节长度
                        // 顶点缓冲区属性
                        attributes: [{
                            shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
                            format: "float32x3",//格式:loat32x3表示一个顶点数据包含3个32位浮点数
                            offset: 0//arrayStride表示每组顶点数据间隔字节数,offset表示读取改组的偏差字节数,没特殊需要一般设置0
                        }]
                    }
                ]
            },
        });

    </script>
</body>

</html>

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/5.顶点着色器/shader.js

// // 顶点着色器代码 顶点坐标改变
// const vertex = /* wgsl */ `
// @vertex
// fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
//     var pos2 = vec4<f32>(pos,1.0);//pos转齐次坐标
//     pos2.x -= 0.2;//偏移所有顶点的x坐标
//     return pos2;
// }
// `

// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
    return vec4<f32>(pos,1.0);
}
`

export {
    vertex
}

/Users/song/Downloads/WebGPU视频教程/1.WebGPU快速入门/1.WebGPU学习开发环境配置/测试浏览器是否支持WebGPU.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>http://www.webgl3d.cn/</title>
</head>
<body>
    <script type="module">
        if(navigator.gpu){
            console.log('你的浏览器支持WebGPU。');
        }else{
            console.log('你的浏览器不支持WebGPU,请更换新版本浏览器。');
        }
    </script>
</body>

</html>

参考

  1. threejs中文网,郭老师博客

标签:const,入门,0.0,webgpu,缓冲区,device,顶点,快速,WebGPU
From: https://www.cnblogs.com/zhuoss/p/17455534.html

相关文章

  • webgpu_快速入门2
    /Users/song/Downloads/WebGPU视频教程/2.3D几何变换数学基础/9.片元的屏幕坐标/1.片元坐标/index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE......
  • java基础知识之 算法 【冒泡排序】【快速排序】
     /**@auther:kevin@function:冒泡排序(BubbleSort)的基本概念是:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第2个数和第3个数,将小数放前,大数放后,如此继续,直至比较最后两个数,将小数放前,大数放后。至此第一趟结......
  • Tengine 入门实战(2)--简单使用
    本文主要介绍Tengine的主动式后端服务器健康检查的扩展功能,其他的扩展功能可参考官网文档:http://tengine.taobao.org/;文中所使用到的软件版本:Centos7.9.2009、Tengine2.3.3。1、相关指令1.1、checkSyntax:checkinterval=milliseconds[fall=count][rise=count][timeou......
  • ChatGPT使用小技巧—如何快速制作一张表格?
    ChatGPT使用技巧—如何快速制作表格?一、背景:        在学习或工作中,时常会需要做一些表格进行数据统计、分析,通常我们会用word或者excel做出表格,然后把数据一个个复制进去,非常慢,用了ChatGPT之后,你会发现工作会变得如此简单。二、所需工具    ChatGPT平......
  • linux 性能自我学习 ———— cpu 快速定位问题 [六]
    前言主要介绍一下cpu如何快速定位问题。正文cpu的一些性能指标:1.cpu使用率cpu使用率描述了非空闲时间占总cpu时间的百分比,根据cpu上运行任务的不同,又被分为用户cpu、系统cpu、i/o等待cpu、软中断、硬中断。用户cpu使用率,包括用户态cpu使用率,和低优先级用户态cpu使用......
  • C#语言入门学习(二)
    1.定义和调用方法:-方法是一段可重复使用的代码块,用于执行特定的任务或操作。通过方法,可以将程序的功能划分为较小的模块,提高代码的可读性和维护性。-定义方法时需要指定方法的名称、参数列表和返回类型(如果有返回值)。例如:publicintAddNumbers(inta,intb){intsum......
  • C#语言入门学习(三)
    1.类和对象:-类是面向对象编程的基本概念,它是一种模板或蓝图,用于创建对象的实例。-对象是类的具体实例,它具有类定义的属性(数据成员)和方法(成员函数)。-通过定义类和创建对象,可以实现数据和行为的封装,将相关的数据和操作组织在一起。2.封装:-封装是将数据和操作封装......
  • C#语言入门学习(四)
    1.数组:-数组是一种用于存储多个相同类型元素的数据结构。它可以按照索引访问和操作其中的元素。-数组的长度是在创建时确定的,一旦确定后,其长度不可改变。-声明和初始化数组时,需要指定元素的类型和数组的大小。例如:int[]numbers=newint[5];上述代码声明了一个......
  • C#语言学习入门(五)
    第五点是关于字符串处理和正则表达式的详细解释。以下是对该点的详细讲解:1.字符串基本操作:-字符串是由字符组成的序列,用于表示文本数据。C#提供了丰富的字符串处理功能。-字符串连接:可以使用"+"运算符将多个字符串连接起来。例如:stringfirstName="John";stringla......
  • C#语言入门学习(六)
    1.异常的概念:-异常是在程序执行过程中出现的错误或意外情况。它们可能导致程序无法正常继续执行。-C#中的异常是一种特殊的对象,用于表示发生的错误或异常情况。当异常发生时,会抛出异常对象。2.异常处理的机制:-异常处理是一种机制,用于在程序中检测、捕获和处理异常,以......