glre 0.20.0 → 0.22.0

package/src/webgpu/device.ts

@@ -0,0 +1,91 @@
+// WebGPUデバイス管理
+export const requestWebGPUDevice = async (): Promise<{
+        adapter: any // GPUAdapter @TODO FIX
+        device: any // GPUDevice @TODO FIX
+}> => {
+        // @ts-ignore @TODO FIX
+        if (!navigator.gpu)
+                throw new Error('WebGPU is not supported in this browser')
+        // @ts-ignore
+        const adapter = await navigator.gpu.requestAdapter()
+        if (!adapter) throw new Error('Failed to get WebGPU adapter')
+        const device = await adapter.requestDevice()
+        if (!device) throw new Error('Failed to get WebGPU device')
+        return { adapter, device }
+}
+
+// WebGPUデバイスの機能チェック
+export const checkWebGPUSupport = (): boolean => {
+        return 'gpu' in navigator
+}
+
+// デバイスの制限情報を取得
+export const getDeviceLimits = (device: any) => {
+        return {
+                maxTextureDimension1D: device.limits.maxTextureDimension1D,
+                maxTextureDimension2D: device.limits.maxTextureDimension2D,
+                maxTextureDimension3D: device.limits.maxTextureDimension3D,
+                maxTextureArrayLayers: device.limits.maxTextureArrayLayers,
+                maxBindGroups: device.limits.maxBindGroups,
+                maxDynamicUniformBuffersPerPipelineLayout:
+                        device.limits.maxDynamicUniformBuffersPerPipelineLayout,
+                maxDynamicStorageBuffersPerPipelineLayout:
+                        device.limits.maxDynamicStorageBuffersPerPipelineLayout,
+                maxSampledTexturesPerShaderStage:
+                        device.limits.maxSampledTexturesPerShaderStage,
+                maxSamplersPerShaderStage:
+                        device.limits.maxSamplersPerShaderStage,
+                maxStorageBuffersPerShaderStage:
+                        device.limits.maxStorageBuffersPerShaderStage,
+                maxStorageTexturesPerShaderStage:
+                        device.limits.maxStorageTexturesPerShaderStage,
+                maxUniformBuffersPerShaderStage:
+                        device.limits.maxUniformBuffersPerShaderStage,
+                maxUniformBufferBindingSize:
+                        device.limits.maxUniformBufferBindingSize,
+                maxStorageBufferBindingSize:
+                        device.limits.maxStorageBufferBindingSize,
+                maxVertexBuffers: device.limits.maxVertexBuffers,
+                maxVertexAttributes: device.limits.maxVertexAttributes,
+                maxVertexBufferArrayStride:
+                        device.limits.maxVertexBufferArrayStride,
+                maxComputeWorkgroupStorageSize:
+                        device.limits.maxComputeWorkgroupStorageSize,
+                maxComputeInvocationsPerWorkgroup:
+                        device.limits.maxComputeInvocationsPerWorkgroup,
+                maxComputeWorkgroupSizeX:
+                        device.limits.maxComputeWorkgroupSizeX,
+                maxComputeWorkgroupSizeY:
+                        device.limits.maxComputeWorkgroupSizeY,
+                maxComputeWorkgroupSizeZ:
+                        device.limits.maxComputeWorkgroupSizeZ,
+                maxComputeWorkgroupsPerDimension:
+                        device.limits.maxComputeWorkgroupsPerDimension,
+        }
+}
+
+// デバイスエラーハンドリング
+export const setupDeviceErrorHandling = (device: any) => {
+        device.addEventListener('uncapturederror', (event: any) => {
+                console.error('WebGPU uncaptured error:', event.error)
+        })
+}
+
+// キャンバスコンテキストの設定
+export const configureCanvasContext = (
+        canvas: HTMLCanvasElement,
+        device: any,
+        format: any = 'bgra8unorm'
+) => {
+        const context = canvas.getContext('webgpu')
+        if (!context) throw new Error('Failed to get WebGPU canvas context')
+
+        // @ts-ignore
+        context.configure({
+                device,
+                format,
+                alphaMode: 'premultiplied',
+        })
+
+        return context
+}

package/src/webgpu/index.ts

@@ -0,0 +1,40 @@
+import { requestWebGPUDevice } from './device'
+import { createCommandEncoder, createRenderPass, createRenderPipeline } from './pipeline'
+import { wgsl } from '../code/wgsl'
+import { is } from '../utils'
+import type { X } from '../node'
+import type { GL } from '../types'
+export * from './buffer'
+export * from './device'
+export * from './pipeline'
+export * from './texture'
+
+export const webgpu = (gl: GL) => {
+        const init = async () => {
+                const { device } = await requestWebGPUDevice()
+                gl.gl = { device }
+                let vs = gl.vs || gl.vert || gl.vertex
+                let fs = gl.fs || gl.frag || gl.fragment
+                if (is.obj(vs)) vs = wgsl(fs as X)
+                if (is.obj(fs)) fs = wgsl(fs as X)
+                gl.gl.pipeline = createRenderPipeline(device, vs, fs)
+        }
+
+        const loop = () => {
+                const { device, context, pipeline } = gl.gl
+                const encoder = createCommandEncoder(device)
+                const pass = createRenderPass(encoder, {
+                        view: context.getCurrentTexture().createView(),
+                        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+                        loadOp: 'clear',
+                        storeOp: 'store',
+                })
+                pass.setPipeline(pipeline)
+                pass.draw(gl.count)
+                pass.end()
+                device.queue.submit([encoder.finish()])
+        }
+
+        // @TODO add uniform and attribute
+        return gl({ init, loop })
+}

package/src/webgpu/pipeline.ts

@@ -0,0 +1,94 @@
+// デフォルトの頂点シェーダー
+const defaultVertexShader = `
+@vertex
+fn main(@builtin(vertex_index) vertexIndex: u32) -> @builtin(position) vec4<f32> {
+    var pos = array<vec2<f32>, 6>(
+        vec2<f32>(-1.0, -1.0),
+        vec2<f32>( 1.0, -1.0),
+        vec2<f32>(-1.0,  1.0),
+        vec2<f32>(-1.0,  1.0),
+        vec2<f32>( 1.0, -1.0),
+        vec2<f32>( 1.0,  1.0)
+    );
+    return vec4<f32>(pos[vertexIndex], 0.0, 1.0);
+}
+`
+
+// デフォルトのフラグメントシェーダー
+const defaultFragmentShader = `
+@fragment
+fn main() -> @location(0) vec4<f32> {
+    return vec4<f32>(1.0, 0.0, 0.0, 1.0);
+}
+`
+
+// WebGPUパイプライン管理
+export const createRenderPipeline = (
+        device: any,
+        vertexShader = defaultVertexShader,
+        fragmentShader = defaultFragmentShader,
+        format = 'bgra8unorm'
+) => {
+        const v = device.createShaderModule({ code: vertexShader })
+        const f = device.createShaderModule({ code: fragmentShader })
+        return device.createRenderPipeline({
+                layout: 'auto',
+                vertex: {
+                        module: v,
+                        entryPoint: 'main',
+                },
+                fragment: {
+                        module: f,
+                        entryPoint: 'main',
+                        targets: [
+                                {
+                                        format,
+                                },
+                        ],
+                },
+                primitive: {
+                        topology: 'triangle-list',
+                },
+        })
+}
+
+// コンピュートパイプライン作成
+export const createComputePipeline = (device: any, computeShader: string) => {
+        const computeModule = device.createShaderModule({ code: computeShader })
+        return device.createComputePipeline({
+                layout: 'auto',
+                compute: { module: computeModule, entryPoint: 'main' },
+        })
+}
+
+// シェーダーモジュール作成
+export const createShaderModule = (device: any, code: string) => {
+        return device.createShaderModule({ code })
+}
+
+// バインドグループレイアウト作成
+export const createBindGroupLayout = (device: any, entries: any[]) => {
+        return device.createBindGroupLayout({ entries })
+}
+
+// バインドグループ作成
+export const createBindGroup = (device: any, layout: any, entries: any[]) => {
+        return device.createBindGroup({ layout, entries })
+}
+
+// レンダーパス作成
+export const createRenderPass = (
+        encoder: any,
+        colorAttachment: any,
+        depthStencilAttachment?: any
+) => {
+        const descriptor: any = { colorAttachments: [colorAttachment] }
+        if (depthStencilAttachment)
+                descriptor.depthStencilAttachment = depthStencilAttachment
+        return encoder.beginRenderPass(descriptor)
+}
+
+// コマンドエンコーダー作成
+export const createCommandEncoder = (device: any) => {
+        return device.createCommandEncoder()
+}

package/src/webgpu/texture.ts

@@ -0,0 +1,139 @@
+// WebGPUテクスチャ管理
+const createTexture = (
+        device: any,
+        w = 1280,
+        h = 800,
+        format = 'rgba8unorm',
+        usage = 0x14 // GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+) => {
+        return device.createTexture({
+                size: { width: w, height: h, depthOrArrayLayers: 1 },
+                format,
+                usage,
+        })
+}
+
+// 画像からテクスチャ作成
+export const createTextureFromImage = (
+        device: any,
+        image: HTMLImageElement | ImageBitmap,
+        format = 'rgba8unorm'
+) => {
+        const texture = createTexture(
+                device,
+                image.width,
+                image.height,
+                format,
+                0x14 | 0x4 // TEXTURE_BINDING | COPY_DST
+        )
+
+        device.queue.copyExternalImageToTexture(
+                { source: image },
+                { texture },
+                { width: image.width, height: image.height }
+        )
+
+        return texture
+}
+
+// キューブマップテクスチャ作成
+const createCubeTexture = (
+        device: any,
+        size: number,
+        format = 'rgba8unorm'
+) => {
+        return device.createTexture({
+                size: { width: size, height: size, depthOrArrayLayers: 6 },
+                format,
+                usage: 0x14, // GPUTextureUsage.TEXTURE_BINDING
+                dimension: '2d',
+        })
+}
+
+// 深度テクスチャ作成
+export const createDepthTexture = (
+        device: any,
+        w = 1280,
+        h = 800,
+        format = 'depth24plus'
+) => {
+        return device.createTexture({
+                size: { width: w, height: h, depthOrArrayLayers: 1 },
+                format,
+                usage: 0x10, // GPUTextureUsage.RENDER_ATTACHMENT
+        })
+}
+
+// サンプラー作成
+export const createSampler = (
+        device: any,
+        options: {
+                magFilter?: string
+                minFilter?: string
+                addressModeU?: string
+                addressModeV?: string
+                addressModeW?: string
+        } = {}
+) => {
+        return device.createSampler({
+                magFilter: options.magFilter || 'linear',
+                minFilter: options.minFilter || 'linear',
+                addressModeU: options.addressModeU || 'repeat',
+                addressModeV: options.addressModeV || 'repeat',
+                addressModeW: options.addressModeW || 'repeat',
+        })
+}
+
+// テクスチャビュー作成
+export const createTextureView = (
+        texture: any,
+        options: {
+                format?: string
+                dimension?: string
+                aspect?: string
+                baseMipLevel?: number
+                mipLevelCount?: number
+                baseArrayLayer?: number
+                arrayLayerCount?: number
+        } = {}
+) => {
+        return texture.createView(options)
+}
+
+// テクスチャデータ更新
+export const updateTexture = (
+        device: any,
+        texture: any,
+        data: Uint8Array | Uint8ClampedArray,
+        w = 1280,
+        h = 800
+) => {
+        device.queue.writeTexture(
+                { texture },
+                data,
+                { bytesPerRow: w * 4 },
+                { width: w, height: h }
+        )
+}
+
+// テクスチャの削除
+export const destroyTexture = (texture: any) => texture.destroy()
+
+// テクスチャ使用量の定数
+export const TextureUsage = {
+        COPY_SRC: 0x1,
+        COPY_DST: 0x2,
+        TEXTURE_BINDING: 0x4,
+        STORAGE_BINDING: 0x8,
+        RENDER_ATTACHMENT: 0x10,
+} as const
+
+// テクスチャフォーマットの定数
+export const TextureFormat = {
+        RGBA8_UNORM: 'rgba8unorm',
+        RGBA8_SRGB: 'rgba8unorm-srgb',
+        BGRA8_UNORM: 'bgra8unorm',
+        BGRA8_SRGB: 'bgra8unorm-srgb',
+        DEPTH24_PLUS: 'depth24plus',
+        DEPTH32_FLOAT: 'depth32float',
+} as const

package/dist/types-2792569d.d.ts

@@ -1,7 +0,0 @@
-declare type Uniform = number | number[];
-declare type Attribute = number[];
-declare type PrecisionMode = 'highp' | 'mediump' | 'lowp';
-declare type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT';
-declare type GLDrawMode = 'POINTS' | 'LINE_STRIP' | 'LINE_LOOP' | 'LINES' | 'TRIANGLE_STRIP' | 'TRIANGLE_FAN' | 'TRIANGLES';
-
-export { Attribute as A, GLClearMode as G, PrecisionMode as P, Uniform as U, GLDrawMode as a };