From 5c6cea4db55a9003867ddb199554715333b75100 Mon Sep 17 00:00:00 2001 From: feng <908087098@qq.com> Date: Tue, 11 Feb 2025 21:03:28 +0800 Subject: [PATCH 1/4] 1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8e7a922..81d752a 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "vitest": "^0.32.2" }, "dependencies": { - "@feng3d/render-api": "0.0.1", + "@feng3d/render-api": "0.0.2", "@feng3d/serialization": "^0.8.1", "@feng3d/watcher": "^0.8.7" } -- Gitee From b8d36060fba9ac86c495691d97164da4baf31673 Mon Sep 17 00:00:00 2001 From: feng <908087098@qq.com> Date: Tue, 11 Feb 2025 22:32:14 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 1 + README.md | 86 +++++++++++++++++++++++++- examples/index.html | 2 +- examples/index.ts | 2 +- examples/package.json | 2 +- examples/src/webgl-examples/sample1.ts | 81 +++++++++++++++++------- package-lock.json | 22 ++++--- package.json | 5 +- typedoc.json | 2 +- 9 files changed, 165 insertions(+), 38 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 4745c7f..1e6c6e6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,4 +6,5 @@ "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true, "javascript.format.placeOpenBraceOnNewLineForFunctions": true, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, + "liveServer.settings.port": 5502, } \ No newline at end of file diff --git a/README.md b/README.md index 4836671..e82bc2d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,89 @@ -# @feng3d/renderer +# @feng3d/webgl +feng3d引擎的WebGL渲染器，可以让用户无需直接接触WebGL的API，只需提供渲染所需数据，组织好渲染数据结构便可渲染，并且支持动态修改数据从而实现动态渲染。 + +## 示例 + +[@feng3d/webgl示例](https://feng3d.com/webgl/) + +这里实现完整的 [webgl1](https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample1/) [webgl2](https://github.com/WebGLSamples/WebGL2Samples.git) 官方示例(https://github.com/webgpu/webgpu-samples)。 + +## 安装 +``` +npm install @feng3d/webgl +``` + +## 如何使用 + +```typescript +import { ISubmit } from "@feng3d/render-api"; +import { WebGL } from "@feng3d/webgl"; + +const init = async (canvas: HTMLCanvasElement) => +{ + const devicePixelRatio = window.devicePixelRatio || 1; + canvas.width = canvas.clientWidth * devicePixelRatio; + canvas.height = canvas.clientHeight * devicePixelRatio; + + const webgl = new WebGL({ canvasId: "glcanvas", contextId: "webgl" }); // 初始化WebGL + + const submit: ISubmit = { // 一次GPU提交 + commandEncoders: [ // 命令编码列表 + { + passEncoders: [ // 通道编码列表 + { // 渲染通道 + descriptor: { // 渲染通道描述 + colorAttachments: [{ // 颜色附件 + clearValue: [0.0, 0.0, 0.0, 1.0], // 渲染前填充颜色 + }], + }, + renderObjects: [{ // 渲染对象 + pipeline: { // 渲染管线 + vertex: { // 顶点着色器 + code: ` + attribute vec4 position; + + void main() { + gl_Position = position; + } + ` }, + fragment: { // 片段着色器 + code: ` + precision highp float; + uniform vec4 color; + void main() { + gl_FragColor = color; + // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); + } + ` }, + }, + vertices: { + position: { data: new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]), format: "float32x2" }, // 顶点坐标数据 + }, + indices: new Uint16Array([0, 1, 2]), // 顶点索引数据 + uniforms: { color: [1, 0, 0, 1] }, // Uniform 颜色值。 + drawIndexed: { indexCount: 3 }, // 绘制命令 + }] + }, + ] + } + ], + }; + + webgl.submit(submit); // 提交GPU执行 +}; + +let webglCanvas = document.querySelector("#glcanvas") as HTMLCanvasElement; +if (!webglCanvas) +{ + webglCanvas = document.createElement("canvas"); + webglCanvas.id = "webgpu"; + webglCanvas.style.width = "400px"; + webglCanvas.style.height = "300px"; + document.body.appendChild(webglCanvas); +} +init(webglCanvas); +``` ## 不再支持内容 1. 为了兼容WebGPU，GLSL着色器中数据结构不再支持纹理。 diff --git a/examples/index.html b/examples/index.html index 04c3fdc..c83f129 100644 --- a/examples/index.html +++ b/examples/index.html @@ -228,7 +228,7 @@