dependencies {
    // WebGPU
    implementation("androidx.webgpu:webgpu:1.0.0-alpha05")

    // 以下省略...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AndroidWebGpuKaleidoscopeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    WebGpuSurfaceView(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun WebGpuSurfaceView(modifier: Modifier = Modifier) {
    val surfaceSize = remember { MutableStateFlow<IntSize?>(null) }
    val surfaceFlow = remember { MutableStateFlow<Surface?>(null) }

    LaunchedEffect(key1 = Unit) {
        // サイズと surface が得られること、得られない場合は return している
        combine(
            surfaceSize,
            surfaceFlow,
            ::Pair
        ).collectLatest { (size, surface) ->
            if (size != null && surface != null) {
                val renderer = WebGpuRenderer()
                try {
                    renderer.init(surface, size.width, size.height)
                    renderer.render()
                } finally {
                    // surface が再生成された、破棄されたとき
                    renderer.cleanup()
                }
            }
        }
    }

    AndroidView(
        modifier = modifier.onSizeChanged { surfaceSize.value = it },
        factory = { context ->
            SurfaceView(context).apply {
                holder.addCallback(object : SurfaceHolder.Callback {
                    override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {
                        // do nothing
                    }

                    override fun surfaceCreated(holder: SurfaceHolder) {
                        surfaceFlow.value = holder.surface
                    }

                    override fun surfaceDestroyed(holder: SurfaceHolder) {
                        surfaceFlow.value = null
                    }
                })
            }
        }
    )
}

Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x0 in tid 7821 (DefaultDispatch), pid 7763 (webgpumangekyou)
Executable: /system/bin/app_process64
Cmdline: io.github.takusan23.androidwebgpumangekyou
pid: 7763, ppid: 1064, tid: 7821, name: DefaultDispatch  >>> io.github.takusan23.androidwebgpumangekyou <<<
uid: 10470
tagged_addr_ctrl: 0000000000000001 (PR_TAGGED_ADDR_ENABLE)
pac_enabled_keys: 000000000000000f (PR_PAC_APIAKEY, PR_PAC_APIBKEY, PR_PAC_APDAKEY, PR_PAC_APDBKEY)
esr: 0000000092000006 (Data Abort Exception 0x24)
signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x0000000000000000 (read)
Cause: null pointer dereference

    x0  b400007313869af0  x1  00000070ca330820  x2  0000000000000060  x3  00000070ca330780
    x4  00000070ca3307e0  x5  0000000000000000  x6  0000000000000000  x7  0000000000000000
    x8  0000000000000048  x9  0000000000010000  x10 0000000000000400  x11 0000000000000048
    x12 00000070ca330808  x13 0000000000000001  x14 b400007273877cc0  x15 0000000000000000
    x16 0000000000000000  x17 000000742f6c50c0  x18 00000070c91e8000  x19 00000070ca3308e8
    x20 0000000000000000  x21 00000070ca3307e0  x22 b40000720388fef0  x23 000000003b9f9490
    x24 0000000000000000  x25 00000070ca330780  x26 0000000000000000  x27 0000000000000400
    x28 00000070ca3307e0  x29 00000070ca330720
    lr  00016af12dfb166c  sp  00000070ca3306b0  pc  000000712deddbd8  pst 0000000060001000
    esr 0000000092000006  vg  0000000000000002

51 total frames
backtrace:
      #00 pc 00000000000acbd8  /vendor/lib64/hw/vulkan.powervr.so (CmdPipelineBarrier+40) (BuildId: c5a24e633e33df683ac924d335f0fa5e)
      #01 pc 0000000000180668  /vendor/lib64/hw/vulkan.powervr.so (IMG_vkCmdPipelineBarrier+600) (BuildId: c5a24e633e33df683ac924d335f0fa5e)
      #02 pc 00000000002a5d90  /data/app/~~a9tWnlc2Ui69foMsJvwU-w==/io.github.takusan23.androidwebgpumangekyou-2HqmwQPXD1IXlHvS7R8ZNQ==/base.apk!libwebgpu_c_bundled.so (offset 0xa4000) (BuildId: 3b2a4919ce8bcfa4a301e256d6bcc7ff)
      #03 pc 00000000002a42fc  /data/app/~~a9tWnlc2Ui69foMsJvwU-w==/io.github.takusan23.androidwebgpumangekyou-2HqmwQPXD1IXlHvS7R8ZNQ==/base.apk!libwebgpu_c_bundled.so (offset 0xa4000) (BuildId: 3b2a4919ce8bcfa4a301e256d6bcc7ff)

以下省略...

class WebGpuRenderer {
    private lateinit var webGpu: WebGpu
    private lateinit var renderPipeline: GPURenderPipeline

    suspend fun init(surface: Surface, width: Int, height: Int) {
        // 1. Create Instance & Device
        webGpu = createWebGpu(surface)
        val device = webGpu.device

        // 2. Setup Pipeline (compile shaders)
        initPipeline(device)

        // 3. Configure the Surface
        webGpu.webgpuSurface.configure(
            GPUSurfaceConfiguration(
                device,
                width,
                height,
                TextureFormat.RGBA8Unorm,
            )
        )
    }

    fun render() {
        if (!::webGpu.isInitialized) {
            return
        }

        val gpu = webGpu

        // 1. Get the next available texture from the screen
        val surfaceTexture = gpu.webgpuSurface.getCurrentTexture()

        // 2. Create a command encoder
        val commandEncoder = gpu.device.createCommandEncoder()

        // 3. Begin a render pass (clearing the screen to blue)
        val renderPass = commandEncoder.beginRenderPass(
            GPURenderPassDescriptor(
                colorAttachments = arrayOf(
                    GPURenderPassColorAttachment(
                        GPUColor(0.0, 0.0, 0.5, 1.0),
                        surfaceTexture.texture.createView(),
                        loadOp = LoadOp.Clear,
                        storeOp = StoreOp.Store,
                    )
                )
            )
        )

        // 4. Draw
        renderPass.setPipeline(renderPipeline)
        renderPass.draw(3) // Draw 3 vertices
        renderPass.end()

        // 5. Submit and Present
        gpu.device.queue.submit(arrayOf(commandEncoder.finish()))
        gpu.webgpuSurface.present()
    }

    fun cleanup() {
        if (::webGpu.isInitialized) {
            webGpu.close()
        }
    }

    private fun initPipeline(device: GPUDevice) {
        val shaderCode = """
        @vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
            const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
            return vec4f(pos[vertexIndex], 0, 1);
        }
        
        @fragment fn fs_main() -> @location(0) vec4f {
            return vec4f(1, 0, 0, 1);
        }
    """

        // Create Shader Module
        val shaderModule = device.createShaderModule(
            GPUShaderModuleDescriptor(shaderSourceWGSL = GPUShaderSourceWGSL(shaderCode))
        )

        // Create Render Pipeline
        renderPipeline = device.createRenderPipeline(
            descriptor = GPURenderPipelineDescriptor(
                vertex = GPUVertexState(
                    shaderModule,
                ),
                fragment = GPUFragmentState(
                    shaderModule,
                    targets = arrayOf(GPUColorTargetState(TextureFormat.RGBA8Unorm))
                ),
                primitive = GPUPrimitiveState(PrimitiveTopology.TriangleList)
            )
        )
    }
}

@vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
    const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
    return vec4f(pos[vertexIndex], 0, 1);
}

@fragment fn fs_main() -> @location(0) vec4f {
    return vec4f(1, 0, 0, 1);
}

const pos = array(
    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)  // 右上
);

@vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
    const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
    
    // WGSL 側で回転行列を作る
    let camera_cosTheta = cos(radians(90));
    let camera_sinTheta = sin(radians(90));
    let rotate_matrix = mat2x2f(
        vec2f(camera_cosTheta, camera_sinTheta),
        vec2f(-camera_sinTheta, camera_cosTheta)
    );
    
    // 回転する
    let xy = pos[vertexIndex];
    let position = rotate_matrix * xy; // ベクトル同士の掛け算！
    
    return vec4f(position, 0, 1);
}

private lateinit var webGpu: WebGpu
private lateinit var renderPipeline: GPURenderPipeline

// 変換行列を渡す
private lateinit var transformMatrixUniformBuffer: GPUBuffer
private lateinit var bindGroup: GPUBindGroup

private var width = 0
private var height = 0

private fun initPipeline(device: GPUDevice) {

    // 省略...

    // CPU から値を渡す準備
    transformMatrixUniformBuffer = device.createBuffer(
        GPUBufferDescriptor(
            size = 64,
            usage = BufferUsage.Uniform or BufferUsage.CopyDst
        )
    )
    bindGroup = webGpu.device.createBindGroup(
        descriptor = GPUBindGroupDescriptor(
            layout = renderPipeline.getBindGroupLayout(0),
            entries = arrayOf(
                GPUBindGroupEntry(binding = 0, buffer = transformMatrixUniformBuffer)
            )
        )
    )
}

suspend fun init(surface: Surface, width: Int, height: Int) {
    this.width = width
    this.height = height

    // 以下省略...
}

    val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
        
    @vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
        const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
        let transformedVec = vec4f(pos[vertexIndex], 0, 1) * transformMatrix.matrix; // 変換行列を適用
        return transformedVec;
    }
    
    @fragment fn fs_main() -> @location(0) vec4f {
        return vec4f(1, 0, 0, 1);
    }
"""

private fun FloatArray.toByteBuffer(): ByteBuffer {
    val bufferSize = this.size * Float.SIZE_BYTES
    val byteBuffer = ByteBuffer.allocateDirect(bufferSize)
        .order(ByteOrder.nativeOrder())
        .also { byteBuffer -> byteBuffer.asFloatBuffer().put(this).rewind() }
    return byteBuffer
}

fun render() {
    if (!::webGpu.isInitialized) {
        return
    }

    val gpu = webGpu

    // 変換行列を用意
    // 三角形が歪まないようにする
    val transformMatrix = FloatArray(16)
    Matrix.setIdentityM(transformMatrix, 0)
    // WebGPU 側を正方形にする、SurfaceView は画面いっぱいなので縦長のママだが、見切れる前提で正方形にする。これで三角形が歪まなくなる
    if (width < height) {
        val scale = (height / width.toFloat())
        Matrix.scaleM(transformMatrix, 0, scale, 1f, 1f)
    } else {
        val scale = (width / height.toFloat())
        Matrix.scaleM(transformMatrix, 0, 1f, scale, 1f)
    }
    // GPU に転送
    gpu.device.queue.writeBuffer(transformMatrixUniformBuffer, 0, transformMatrix.toByteBuffer())

    // 以下省略...
}

private var rotate = 0f

fun render() {
    if (!::webGpu.isInitialized) {
        return
    }

    val gpu = webGpu


    // 変換行列を用意
    // 三角形が歪まないようにする
    val transformMatrix = FloatArray(16)
    Matrix.setIdentityM(transformMatrix, 0)
    // 回転
    rotate++
    if (rotate == 360f) {
        rotate = 0f
    }
    Matrix.rotateM(transformMatrix, 0, rotate, 0f, 0f, 1f)
    // WebGPU 側を正方形にする、SurfaceView は画面いっぱいなので縦長のママだが、見切れる前提で正方形にする。これで三角形が歪まなくなる
    if (width < height) {
        val scale = (height / width.toFloat())
        Matrix.scaleM(transformMatrix, 0, scale, 1f, 1f)
    } else {
        val scale = (width / height.toFloat())
        Matrix.scaleM(transformMatrix, 0, 1f, scale, 1f)
    }
    // 小さくする
    Matrix.scaleM(transformMatrix, 0, .5f, .5f, .5f)
    // GPU に転送
    gpu.device.queue.writeBuffer(transformMatrixUniformBuffer, 0, transformMatrix.toByteBuffer())

    // 以下省略...

LaunchedEffect(key1 = Unit) {
    // サイズと surface が得られること、得られない場合は return している
    combine(
        surfaceSize,
        surfaceFlow,
        ::Pair
    ).collectLatest { (size, surface) ->
        if (size != null && surface != null) {
            val renderer = WebGpuRenderer()
            try {
                renderer.init(surface, size.width, size.height)
                // 繰り返し呼ぶ
                while (true) {
                    delay(16.milliseconds) // 60fps
                    renderer.render()
                }
            } finally {
                // surface が再生成された、破棄されたとき
                renderer.cleanup()
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AndroidWebGpuMangekyouTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    WebGpuSurfaceView(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun WebGpuSurfaceView(modifier: Modifier = Modifier) {
    val surfaceSize = remember { MutableStateFlow<IntSize?>(null) }
    val surfaceFlow = remember { MutableStateFlow<Surface?>(null) }

    LaunchedEffect(key1 = Unit) {
        // サイズと surface が得られること、得られない場合は return している
        combine(
            surfaceSize,
            surfaceFlow,
            ::Pair
        ).collectLatest { (size, surface) ->
            if (size != null && surface != null) {
                val renderer = WebGpuRenderer()
                try {
                    renderer.init(surface, size.width, size.height)
                    // 繰り返し呼ぶ
                    while (true) {
                        delay(16.milliseconds)
                        renderer.render()
                    }
                } finally {
                    // surface が再生成された、破棄されたとき
                    renderer.cleanup()
                }
            }
        }
    }

    AndroidView(
        modifier = modifier.onSizeChanged { surfaceSize.value = it },
        factory = { context ->
            SurfaceView(context).apply {
                holder.addCallback(object : SurfaceHolder.Callback {
                    override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {
                        // do nothing
                    }

                    override fun surfaceCreated(holder: SurfaceHolder) {
                        surfaceFlow.value = holder.surface
                    }

                    override fun surfaceDestroyed(holder: SurfaceHolder) {
                        surfaceFlow.value = null
                    }
                })
            }
        }
    )
}

class WebGpuRenderer {
    private lateinit var webGpu: WebGpu
    private lateinit var renderPipeline: GPURenderPipeline

    // 変換行列を渡す
    private lateinit var transformMatrixUniformBuffer: GPUBuffer
    private lateinit var bindGroup: GPUBindGroup

    private var width = 0
    private var height = 0

    suspend fun init(surface: Surface, width: Int, height: Int) {
        this.width = width
        this.height = height

        // 1. Create Instance & Device
        webGpu = createWebGpu(surface)
        val device = webGpu.device

        // 2. Setup Pipeline (compile shaders)
        initPipeline(device)

        // 3. Configure the Surface
        webGpu.webgpuSurface.configure(
            GPUSurfaceConfiguration(
                device,
                width,
                height,
                TextureFormat.RGBA8Unorm,
            )
        )
    }

    private var rotate = 0f

    fun render() {
        if (!::webGpu.isInitialized) {
            return
        }

        val gpu = webGpu


        // 変換行列を用意
        // 三角形が歪まないようにする
        val transformMatrix = FloatArray(16)
        Matrix.setIdentityM(transformMatrix, 0)
        // 回転
        rotate++
        if (rotate == 360f) {
            rotate = 0f
        }
        Matrix.rotateM(transformMatrix, 0, rotate, 0f, 0f, 1f)
        // WebGPU 側を正方形にする、SurfaceView は画面いっぱいなので縦長のママだが、見切れる前提で正方形にする。これで三角形が歪まなくなる
        if (width < height) {
            val scale = (height / width.toFloat())
            Matrix.scaleM(transformMatrix, 0, scale, 1f, 1f)
        } else {
            val scale = (width / height.toFloat())
            Matrix.scaleM(transformMatrix, 0, 1f, scale, 1f)
        }
        // 小さくする
        Matrix.scaleM(transformMatrix, 0, .5f, .5f, .5f)
        // GPU に転送
        gpu.device.queue.writeBuffer(transformMatrixUniformBuffer, 0, transformMatrix.toByteBuffer())


        // 1. Get the next available texture from the screen
        val surfaceTexture = gpu.webgpuSurface.getCurrentTexture()

        // 2. Create a command encoder
        val commandEncoder = gpu.device.createCommandEncoder()

        // 3. Begin a render pass (clearing the screen to blue)
        val renderPass = commandEncoder.beginRenderPass(
            GPURenderPassDescriptor(
                colorAttachments = arrayOf(
                    GPURenderPassColorAttachment(
                        GPUColor(0.0, 0.0, 0.5, 1.0),
                        surfaceTexture.texture.createView(),
                        loadOp = LoadOp.Clear,
                        storeOp = StoreOp.Store,
                    )
                )
            )
        )

        // 4. Draw
        renderPass.setPipeline(renderPipeline)
        renderPass.setBindGroup(0, bindGroup) // @group(0) なので 0
        renderPass.draw(3) // 三角形の頂点の数が3個
        renderPass.end()

        // 5. Submit and Present
        gpu.device.queue.submit(arrayOf(commandEncoder.finish()))
        gpu.webgpuSurface.present()
    }

    fun cleanup() {
        if (::webGpu.isInitialized) {
            webGpu.close()
        }
    }

    private fun FloatArray.toByteBuffer(): ByteBuffer {
        val bufferSize = this.size * Float.SIZE_BYTES
        val byteBuffer = ByteBuffer.allocateDirect(bufferSize)
            .order(ByteOrder.nativeOrder())
            .also { byteBuffer -> byteBuffer.asFloatBuffer().put(this).rewind() }
        return byteBuffer
    }

    private fun initPipeline(device: GPUDevice) {
        val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
        
    @vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
        const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
        let transformedVec = vec4f(pos[vertexIndex], 0, 1) * transformMatrix.matrix; // 変換行列を適用
        return transformedVec;
    }
    
    @fragment fn fs_main() -> @location(0) vec4f {
        return vec4f(1, 0, 0, 1);
    }
"""

        // Create Shader Module
        val shaderModule = device.createShaderModule(
            GPUShaderModuleDescriptor(shaderSourceWGSL = GPUShaderSourceWGSL(shaderCode))
        )

        // Create Render Pipeline
        renderPipeline = device.createRenderPipeline(
            descriptor = GPURenderPipelineDescriptor(
                vertex = GPUVertexState(
                    shaderModule,
                ),
                fragment = GPUFragmentState(
                    shaderModule,
                    targets = arrayOf(GPUColorTargetState(TextureFormat.RGBA8Unorm))
                ),
                primitive = GPUPrimitiveState(PrimitiveTopology.TriangleList)
            )
        )

        // CPU から値を渡す準備
        transformMatrixUniformBuffer = device.createBuffer(
            GPUBufferDescriptor(
                size = 64,
                usage = BufferUsage.Uniform or BufferUsage.CopyDst
            )
        )
        bindGroup = webGpu.device.createBindGroup(
            descriptor = GPUBindGroupDescriptor(
                layout = renderPipeline.getBindGroupLayout(0),
                entries = arrayOf(
                    GPUBindGroupEntry(binding = 0, buffer = transformMatrixUniformBuffer)
                )
            )
        )
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AndroidWebGpuMangekyouTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MangekyouGpuSurfaceView(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun MangekyouGpuSurfaceView(modifier: Modifier = Modifier) {
    val surfaceSize = remember { MutableStateFlow<IntSize?>(null) }
    val surfaceFlow = remember { MutableStateFlow<Surface?>(null) }

    val context = LocalContext.current
    val isPermissionGranted = remember { Channel<Boolean>() }
    val permissionRequester = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.RequestPermission(),
        onResult = { isGranted ->
            isPermissionGranted.trySend(isGranted)
        }
    )

    LaunchedEffect(key1 = Unit) {
        // 権限を要求して待つ
        permissionRequester.launch(android.Manifest.permission.CAMERA)
        if (!isPermissionGranted.receive()) {
            println("権限が付与されませんでした...")
        }

        // サイズと surface が得られること、得られない場合は return している
        combine(
            surfaceSize,
            surfaceFlow,
            ::Pair
        ).collectLatest { (size, surface) ->
            if (size != null && surface != null) {
                val renderer = MangekyouWebGpuRenderer(context)
                try {
                    renderer.init(surface, size.width, size.height)
                    // 繰り返し呼ぶ
                    while (true) {
                        delay(16.milliseconds)
                        renderer.render()
                    }
                } finally {
                    // surface が再生成された、破棄されたとき
                    renderer.cleanup()
                }
            }
        }
    }

    AndroidView(
        modifier = modifier.onSizeChanged { surfaceSize.value = it },
        factory = { context ->
            SurfaceView(context).apply {
                holder.addCallback(object : SurfaceHolder.Callback {
                    override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {
                        // do nothing
                    }

                    override fun surfaceCreated(holder: SurfaceHolder) {
                        surfaceFlow.value = holder.surface
                    }

                    override fun surfaceDestroyed(holder: SurfaceHolder) {
                        surfaceFlow.value = null
                    }
                })
            }
        }
    )
}

class MangekyouWebGpuRenderer {
    private lateinit var webGpu: WebGpu
    private lateinit var renderPipeline: GPURenderPipeline

    // 変換行列を渡す
    private lateinit var transformMatrixUniformBuffer: GPUBuffer
    private lateinit var bindGroup: GPUBindGroup

    private var width = 0
    private var height = 0

    suspend fun init(surface: Surface, width: Int, height: Int) {
        this.width = width
        this.height = height

        // 1. Create Instance & Device
        webGpu = createWebGpu(surface)
        val device = webGpu.device

        // 2. Setup Pipeline (compile shaders)
        initPipeline(device)

        // 3. Configure the Surface
        webGpu.webgpuSurface.configure(
            GPUSurfaceConfiguration(
                device,
                width,
                height,
                TextureFormat.RGBA8Unorm,
            )
        )
    }
    
    fun render() {
        if (!::webGpu.isInitialized) {
            return
        }

        val gpu = webGpu


        // 変換行列を用意
        // 三角形が歪まないようにする
        val transformMatrix = FloatArray(16)
        Matrix.setIdentityM(transformMatrix, 0)
        // WebGPU 側を正方形にする、SurfaceView は画面いっぱいなので縦長のママだが、見切れる前提で正方形にする。これで三角形が歪まなくなる
        if (width < height) {
            val scale = (height / width.toFloat())
            Matrix.scaleM(transformMatrix, 0, scale, 1f, 1f)
        } else {
            val scale = (width / height.toFloat())
            Matrix.scaleM(transformMatrix, 0, 1f, scale, 1f)
        }
        // 小さくする
        Matrix.scaleM(transformMatrix, 0, .5f, .5f, .5f)
        // GPU に転送
        gpu.device.queue.writeBuffer(transformMatrixUniformBuffer, 0, transformMatrix.toByteBuffer())


        // 1. Get the next available texture from the screen
        val surfaceTexture = gpu.webgpuSurface.getCurrentTexture()

        // 2. Create a command encoder
        val commandEncoder = gpu.device.createCommandEncoder()

        // 3. Begin a render pass (clearing the screen to blue)
        val renderPass = commandEncoder.beginRenderPass(
            GPURenderPassDescriptor(
                colorAttachments = arrayOf(
                    GPURenderPassColorAttachment(
                        GPUColor(0.0, 0.0, 0.5, 1.0),
                        surfaceTexture.texture.createView(),
                        loadOp = LoadOp.Clear,
                        storeOp = StoreOp.Store,
                    )
                )
            )
        )

        // 4. Draw
        renderPass.setPipeline(renderPipeline)
        renderPass.setBindGroup(0, bindGroup) // @group(0) なので 0
        renderPass.draw(3) // 三角形の頂点の数が3個
        renderPass.end()

        // 5. Submit and Present
        gpu.device.queue.submit(arrayOf(commandEncoder.finish()))
        gpu.webgpuSurface.present()
    }

    fun cleanup() {
        if (::webGpu.isInitialized) {
            webGpu.close()
        }
    }

    private fun FloatArray.toByteBuffer(): ByteBuffer {
        val bufferSize = this.size * Float.SIZE_BYTES
        val byteBuffer = ByteBuffer.allocateDirect(bufferSize)
            .order(ByteOrder.nativeOrder())
            .also { byteBuffer -> byteBuffer.asFloatBuffer().put(this).rewind() }
        return byteBuffer
    }

    private fun initPipeline(device: GPUDevice) {
        val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
        
    @vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
        const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
        let transformedVec = vec4f(pos[vertexIndex], 0, 1) * transformMatrix.matrix; // 変換行列を適用
        return transformedVec;
    }
    
    @fragment fn fs_main() -> @location(0) vec4f {
        return vec4f(1, 0, 0, 1);
    }
"""

        // Create Shader Module
        val shaderModule = device.createShaderModule(
            GPUShaderModuleDescriptor(shaderSourceWGSL = GPUShaderSourceWGSL(shaderCode))
        )

        // Create Render Pipeline
        renderPipeline = device.createRenderPipeline(
            descriptor = GPURenderPipelineDescriptor(
                vertex = GPUVertexState(
                    shaderModule,
                ),
                fragment = GPUFragmentState(
                    shaderModule,
                    targets = arrayOf(GPUColorTargetState(TextureFormat.RGBA8Unorm))
                ),
                primitive = GPUPrimitiveState(PrimitiveTopology.TriangleList)
            )
        )

        // CPU から値を渡す準備
        transformMatrixUniformBuffer = device.createBuffer(
            GPUBufferDescriptor(
                size = 64,
                usage = BufferUsage.Uniform or BufferUsage.CopyDst
            )
        )
        bindGroup = webGpu.device.createBindGroup(
            descriptor = GPUBindGroupDescriptor(
                layout = renderPipeline.getBindGroupLayout(0),
                entries = arrayOf(
                    GPUBindGroupEntry(binding = 0, buffer = transformMatrixUniformBuffer)
                )
            )
        )
    }
}

<uses-permission android:name="android.permission.CAMERA" />

class MangekyouWebGpuRenderer(private val context: Context) {

    // 省略...

    // カメラの映像を得る
    private val latestImageChannel = Channel<Image>(capacity = Channel.CONFLATED, onUndeliveredElement = { it.close() })
    private var imageReader: ImageReader? = null
    private var cameraDevice: CameraDevice? = null
    private val cameraExecutor = Executors.newSingleThreadExecutor()

    // 省略...

    fun cleanup() {
        if (::webGpu.isInitialized) {
            webGpu.close()
        }
        cameraDevice?.close()
        imageReader?.close()
    }

    // 省略...

    private suspend fun initCamera2Api() {
        // TODO これから
    }

    companion object {
        private const val CAMERA_WIDTH = 1280
        private const val CAMERA_HEIGHT = 720
    }
}

@SuppressLint("MissingPermission") // 権限チェックするべきです
private suspend fun initCamera2Api() {
    // 出力先の ImageReader、カメラ映像は Channel で別の関数へおくる
    imageReader = ImageReader.newInstance(CAMERA_WIDTH, CAMERA_HEIGHT, ImageFormat.YUV_420_888, 2)
    imageReader?.setOnImageAvailableListener(
        { imageReader ->
            latestImageChannel.trySend(element = imageReader?.acquireLatestImage() ?: return@setOnImageAvailableListener)
        },
        null
    )

    // Camera2API
    val cameraManager = context.getSystemService(Context.CAMERA_SERVICE) as CameraManager
    val (frontCameraId, _) = cameraManager
        .cameraIdList
        .map { cameraId -> cameraId to cameraManager.getCameraCharacteristics(cameraId) }
        .firstOrNull { (_, characteristic) -> characteristic.get(CameraCharacteristics.LENS_FACING) == CameraCharacteristics.LENS_FACING_BACK } ?: return

    cameraDevice = suspendCancellableCoroutine { cont ->
        cameraManager.openCamera(frontCameraId, object : CameraDevice.StateCallback() {
            override fun onOpened(device: CameraDevice) {
                cont.resume(device)
            }

            override fun onDisconnected(device: CameraDevice) {
                cont.resume(null)
            }

            override fun onError(device: CameraDevice, error: Int) {
                cont.resume(null)
            }
        }, null)
    }

    cameraDevice ?: return
    val captureRequest = cameraDevice!!.createCaptureRequest(CameraDevice.TEMPLATE_PREVIEW).apply {
        addTarget(imageReader!!.surface)
    }
    val captureSession = suspendCancellableCoroutine { continuation ->
        // OutputConfiguration を作る
        val outputConfigurationList = listOf(OutputConfiguration(imageReader!!.surface))
        val sessionConfiguration = SessionConfiguration(SessionConfiguration.SESSION_REGULAR, outputConfigurationList, cameraExecutor, object : CameraCaptureSession.StateCallback() {
            override fun onConfigured(captureSession: CameraCaptureSession) {
                continuation.resume(captureSession)
            }

            override fun onConfigureFailed(p0: CameraCaptureSession) {
                continuation.resume(null)
            }
        })
        cameraDevice!!.createCaptureSession(sessionConfiguration)
    }

    captureSession ?: return
    captureSession.setRepeatingRequest(captureRequest.build(), null, null)
}

companion object {
    private const val CAMERA_WIDTH = 1280
    private const val CAMERA_HEIGHT = 720

    private val VERTEX_ARRAY = floatArrayOf(
        // 下 真ん中
        0.0f, 0.0f,
        -0.5f, -1.0f,
        0.5f, -1.0f,

        // 下 右
        0.0f, 0.0f,
        0.5f, -1.0f,
        1.0f, 0.0f,

        // 下 左
        0.0f, 0.0f,
        -1.0f, 0.0f,
        -0.5f, -1.0f,

        // 上 真ん中
        0.0f, 0.0f,
        -0.5f, 1.0f,
        0.5f, 1.0f,

        // 上 右
        0.0f, 0.0f,
        0.5f, 1.0f,
        1.0f, 0.0f,

        // 上 左
        0.0f, 0.0f,
        -0.5f, 1.0f,
        -1.0f, 0.0f,
    )
}

private lateinit var webGpu: WebGpu
private lateinit var renderPipeline: GPURenderPipeline
private lateinit var vertexBuffer: GPUBuffer // これ

// 頂点
vertexBuffer = device.createBuffer(
    descriptor = GPUBufferDescriptor(
        size = (VERTEX_ARRAY.size * Float.SIZE_BYTES).toLong(),
        usage = BufferUsage.Vertex or BufferUsage.CopyDst
    )
)
device.queue.writeBuffer(vertexBuffer, 0, VERTEX_ARRAY.toByteBuffer())

// Create Render Pipeline
// 以下省略...

renderPipeline = device.createRenderPipeline(
    descriptor = GPURenderPipelineDescriptor(
        vertex = GPUVertexState(
            shaderModule,
            // 頂点を
            buffers = arrayOf(
                GPUVertexBufferLayout(
                    arrayStride = (2 * Float.SIZE_BYTES).toLong(), // 頂点(x,y)しか渡してないため 2 * FloatSize
                    attributes = arrayOf(
                        // 今回は vertex の構造体に vec2f で足りる x,y しか入れていないため
                        GPUVertexAttribute(
                            shaderLocation = 0,
                            offset = 0,
                            format = VertexFormat.Float32x2
                        )
                    )
                )
            )
        ),
        fragment = GPUFragmentState(
            shaderModule,
            targets = arrayOf(GPUColorTargetState(TextureFormat.RGBA8Unorm))
        ),
        primitive = GPUPrimitiveState(PrimitiveTopology.TriangleList),
    )
)

// 4. Draw
renderPass.setPipeline(renderPipeline)
renderPass.setVertexBuffer(0, vertexBuffer)
renderPass.setBindGroup(0, bindGroup) // @group(0) なので 0
renderPass.draw(VERTEX_ARRAY.size / 2) // 三角形の頂点の数、x,y,x,y... の並びをした Float 配列なので、サイズを取って半分にすればよい
renderPass.end()

        val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
    }
    
    // CPU から頂点を受け取る
    struct Vertex {
        @location(0) position: vec2f,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
        
    @vertex fn vs_main(vertex: Vertex) -> @builtin(position) vec4f {
        let transformedVec = vec4f(vertex.position, 0, 1) * transformMatrix.matrix; // 変換行列を適用
        return transformedVec;
    }
    
    @fragment fn fs_main() -> @location(0) vec4f {
        return vec4f(1, 0, 0, 1);
    }
"""

 Y              U               V
+-------------+ +-------------+ +-------------+
| Y1 Y2 Y3 Y4 | | U1 U2 U3 U4 | | V1 V2 V3 V4 |
| Y5 Y6 Y7 Y8 | | U5 U6 U7 U8 | | V5 V6 V7 V8 |
+-------------+ +-------------+ +-------------+

 Y              U               V
+-------------+ +-------------+ +-------------+
| Y1 Y2 Y3 Y4 | | U1 U1 U2 U2 | | V1 V1 V2 V2 |
| Y5 Y6 Y7 Y8 | | U3 U3 U4 U4 | | V3 V3 V4 V4 |
+-------------+ +-------------+ +-------------+

 Y              U               V
+-------------+ +-------------+ +-------------+
| Y1 Y2 Y3 Y4 | | U1 U1 U2 U2 | | V1 V1 V2 V2 |
| Y5 Y6 Y7 Y8 | | U1 U1 U2 U2 | | V1 V1 V2 V2 |
+-------------+ +-------------+ +-------------+

Yプレーン = [Y1,Y2,Y3,Y4 ...]
Uプレーン = [U1,V1,U2,V2 ...]
Vプレーン = [V1,U2,V2    ...]

private fun Image.Plane.fixIfInterleaveRePutPlane(yPlaneWidth: Int, yPlaneHeight: Int): ByteBuffer {
    // U/V プレーンは Y プレーンの半分のサイズ
    val uvPlaneWidth = yPlaneWidth / 2
    val uvPlaneHeight = yPlaneHeight / 2

    val result = ByteBuffer.allocateDirect(uvPlaneWidth * uvPlaneHeight)

    // pixelStride が
    // 1 の場合は、[ Y1,Y2,Y3,Y4 ] のように、バイト配列に連続してデータが入っている
    // 2 とかの場合、U/V プレーンを別々に取得しても、[ U1,V1,U2,V2 ] のように、一つのバイト配列に二種類のデータが交互に入っている（インターリーブ）
    // 後者の場合はそのままでは WebGPU/OpenGLES のテクスチャとして使うことができないため、それぞれ切り離す必要がある
    // ---
    // また、後者の場合、実際には U/V 両方のデータが入っているため U/V プレーンは Y プレーンの半分。ですらない。
    // それぞれのプレーンにすれば半分のサイズで収まります。
    if (pixelStride == 1) {
        buffer.put(result)
        return result
    }

    // 例として [ U1, V1, U2 V2 Padding, U3, V3, U4, V4 ] の場合
    // pixelStride が 2 になる。次の同じデータが 2 バイト先にあることを表している
    // 二種類のデータとは別に、Padding が含まれていて、Padding 込みの横一列は rowStride で取得可能。基本的に Padding で次の横一列になるハズ
    repeat(uvPlaneHeight) { y ->
        // この行の先頭位置を rowStride から計算
        val rowStartIdx = y * rowStride
        // 2つ先を読む（1byte 飛ばして 1byte 読む）
        for (x in 0 until uvPlaneWidth) {
            val readPosition = rowStartIdx + (x * pixelStride)
            // 一応
            if (readPosition < buffer.capacity()) {
                result.put(buffer[readPosition])
            }
        }
    }
    return result
}

class MangekyouWebGpuRenderer(private val context: Context) {
    // 省略

    // WebGPU テクスチャ
    private lateinit var sampler: GPUSampler
    private lateinit var textureYuvY: GPUTexture
    private lateinit var textureYuvU: GPUTexture
    private lateinit var textureYuvV: GPUTexture

    // 省略

private fun initPipeline(device: GPUDevice) {
    // 省略...

    // テクスチャ。よく考えると YUV それぞれは単色である、なので RGB も確保せずとも R だけで足りる
    // U/V プレーンは半分
    val textureUvWidth = CAMERA_WIDTH / 2
    val textureUvHeight = CAMERA_HEIGHT / 2
    sampler = webGpu.device.createSampler()
    textureYuvY = webGpu.device.createTexture(
        descriptor = GPUTextureDescriptor(
            usage = TextureUsage.TextureBinding or TextureUsage.CopyDst,
            size = GPUExtent3D(CAMERA_WIDTH, CAMERA_HEIGHT),
            format = TextureFormat.R8Unorm
        )
    )
    textureYuvU = webGpu.device.createTexture(
        descriptor = GPUTextureDescriptor(
            usage = TextureUsage.TextureBinding or TextureUsage.CopyDst,
            size = GPUExtent3D(textureUvWidth, textureUvHeight),
            format = TextureFormat.R8Unorm
        )
    )
    textureYuvV = webGpu.device.createTexture(
        descriptor = GPUTextureDescriptor(
            usage = TextureUsage.TextureBinding or TextureUsage.CopyDst,
            size = GPUExtent3D(textureUvWidth, textureUvHeight),
            format = TextureFormat.R8Unorm
        )
    )

    bindGroup = webGpu.device.createBindGroup(
        descriptor = GPUBindGroupDescriptor(
            layout = renderPipeline.getBindGroupLayout(0),
            entries = arrayOf(
                // 変換行列
                GPUBindGroupEntry(binding = 0, buffer = transformMatrixUniformBuffer),
                // テクスチャ
                GPUBindGroupEntry(binding = 1, sampler = sampler),
                GPUBindGroupEntry(binding = 2, textureView = textureYuvY.createView()),
                GPUBindGroupEntry(binding = 3, textureView = textureYuvU.createView()),
                GPUBindGroupEntry(binding = 4, textureView = textureYuvV.createView())
            )
        )
    )
}

    private fun initPipeline(device: GPUDevice) {
        val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
    }
    
    // CPU から頂点を受け取る
    struct Vertex {
        @location(0) position: vec2f,
    }
    
    // フラグメントシェーダーへ渡す
    struct VertexOutput {
        @builtin(position) position: vec4f,
        @location(0) uv : vec2f,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
    @group(0) @binding(1) var smp: sampler;
    @group(0) @binding(2) var textureYuvY: texture_2d<f32>;
    @group(0) @binding(3) var textureYuvU: texture_2d<f32>;
    @group(0) @binding(4) var textureYuvV: texture_2d<f32>;
        
    @vertex fn vs_main(vertex: Vertex) -> VertexOutput {
        let transformedVec = vec4f(vertex.position, 0, 1) * transformMatrix.matrix; // 変換行列を適用
        var output: VertexOutput;
        output.position = transformedVec;
        output.uv = transformedVec.xy *  0.5 + 0.5; // テクスチャ座標に変換する
        return output;
    }
    
    @fragment fn fs_main(output: VertexOutput) -> @location(0) vec4f {

        // 位置に対応する YUV とりだし
        // 以下、R, G, B, Yの値域は[0, 1]。Cb, Crの値域は[-0.5, 0.5]
        let y = (textureSample(textureYuvY, smp, output.uv).r * (255.0 / 235.0) - (16.0 / 235.0));
        let u = (textureSample(textureYuvU, smp, output.uv).r - 0.5);
        let v = (textureSample(textureYuvV, smp, output.uv).r - 0.5);
    
        // YUV から BT.709 RGB の変換式は Wiki
        // https://ja.wikipedia.org/wiki/YUV#RGBからの変換
        let yuvToRgbBt709 = mat3x3<f32>(
            vec3f(1.0, 1.0, 1.0),
            vec3f(0.0, -0.187324, 1.8556),
            vec3f(1.5748, -0.468124, 0.0)
        );
    
        let rgb = yuvToRgbBt709 * vec3f(y, u, v);
        return vec4<f32>(rgb, 1.0);
    }
"""

    // 以下省略...

@fragment fn fs_main(output: VertexOutput) -> @location(0) vec4f {

    let yuvToRgbBt709 = mat3x3<f32>(
        vec3<f32>(1.164, 1.164, 1.164),
        vec3<f32>(0.0, -0.213, 2.112),
        vec3<f32>(1.793, -0.533, 0.0)
    );

    let y = (textureSample(textureYuvY, smp, output.uv).r - (16.0 / 255.0));
    let u = (textureSample(textureYuvU, smp, output.uv).r - (128.0 / 255.0));
    let v = (textureSample(textureYuvV, smp, output.uv).r - (128.0 / 255.0));

    let rgb = yuvToRgbBt709 * vec3<f32>(y, u, v);
    return vec4<f32>(rgb, 1.0);
}

suspend fun render() {
    if (!::webGpu.isInitialized) {
        return
    }

    val gpu = webGpu


    // YUV を受け取って GPU に転送する処理
    val image = latestImageChannel.receive()
    val yuvY = image.planes[0].buffer
    val yuvU = image.planes[1].fixIfInterleaveRePutPlane(CAMERA_WIDTH, CAMERA_HEIGHT)
    val yuvV = image.planes[2].fixIfInterleaveRePutPlane(CAMERA_WIDTH, CAMERA_HEIGHT)
    image.close()
    // YUV を GPU に送信
    val yuvUvWidth = CAMERA_WIDTH / 2
    val yuvUvHeight = CAMERA_HEIGHT / 2
    webGpu.device.queue.writeTexture(
        destination = GPUTexelCopyTextureInfo(textureYuvY),
        data = yuvY,
        writeSize = GPUExtent3D(CAMERA_WIDTH, CAMERA_HEIGHT),
        dataLayout = GPUTexelCopyBufferLayout(bytesPerRow = CAMERA_WIDTH) // 1ピクセル1バイトしか使ってない (TextureFormat.R8Unorm)
    )
    webGpu.device.queue.writeTexture(
        destination = GPUTexelCopyTextureInfo(textureYuvU),
        data = yuvU,
        writeSize = GPUExtent3D(yuvUvWidth, yuvUvHeight),
        dataLayout = GPUTexelCopyBufferLayout(bytesPerRow = yuvUvWidth)
    )
    webGpu.device.queue.writeTexture(
        destination = GPUTexelCopyTextureInfo(textureYuvV),
        data = yuvV,
        writeSize = GPUExtent3D(yuvUvWidth, yuvUvHeight),
        dataLayout = GPUTexelCopyBufferLayout(bytesPerRow = yuvUvWidth)
    )


    // 変換行列を用意
    // 三角形が歪まないようにする
    val transformMatrix = FloatArray(16)

    // 以下省略...

    private fun initPipeline(device: GPUDevice) {
        val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
        textureMatrix: mat4x4<f32>,
    }
    
    // CPU から頂点を受け取る
    struct Vertex {
        @location(0) position: vec2f,
    }
    
    // フラグメントシェーダーへ渡す
    struct VertexOutput {
        @builtin(position) position: vec4f,
        @location(0) uv : vec2f,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
    @group(0) @binding(1) var smp: sampler;
    @group(0) @binding(2) var textureYuvY: texture_2d<f32>;
    @group(0) @binding(3) var textureYuvU: texture_2d<f32>;
    @group(0) @binding(4) var textureYuvV: texture_2d<f32>;
        
    @vertex fn vs_main(vertex: Vertex) -> VertexOutput {
        let transformedVec = vec4f(vertex.position, 0, 1) * transformMatrix.matrix; // 変換行列を適用
        let uv = transformedVec * transformMatrix.textureMatrix;
        var output: VertexOutput;
        output.position = transformedVec;
        output.uv = uv.xy * 0.5 + 0.5; // テクスチャ座標に変換する
        return output;
    }
    
    @fragment fn fs_main(output: VertexOutput) -> @location(0) vec4f {

        // 位置に対応する YUV とりだし
        // 以下、Yの値域は[0, 1]。Cb, Crの値域は[-0.5, 0.5]
        let y = (textureSample(textureYuvY, smp, output.uv).r * (255.0 / 235.0) - (16.0 / 235.0));
        let u = (textureSample(textureYuvU, smp, output.uv).r - 0.5);
        let v = (textureSample(textureYuvV, smp, output.uv).r - 0.5);
    
        // YUV から BT.709 RGB の変換式は Wiki
        // https://ja.wikipedia.org/wiki/YUV#RGBからの変換
        let yuvToRgbBt709 = mat3x3<f32>(
            vec3f(1.0, 1.0, 1.0),
            vec3f(0.0, -0.187324, 1.8556),
            vec3f(1.5748, -0.468124, 0.0)
        );
    
        let rgb = yuvToRgbBt709 * vec3f(y, u, v);
        return vec4<f32>(rgb, 1.0);
    }
"""

// CPU から値を渡す準備
transformMatrixUniformBuffer = device.createBuffer(
    GPUBufferDescriptor(
        size = 64 * 2, // mat4x4<f32> が2つあるので
        usage = BufferUsage.Uniform or BufferUsage.CopyDst
    )
)

// 変換行列を用意
// 三角形が歪まないようにする
val transformMatrix = FloatArray(16)
Matrix.setIdentityM(transformMatrix, 0)
// WebGPU 側を正方形にする、SurfaceView は画面いっぱいなので縦長のママだが、見切れる前提で正方形にする。これで三角形が歪まなくなる
if (width < height) {
    val scale = (height / width.toFloat())
    Matrix.scaleM(transformMatrix, 0, scale, 1f, 1f)
} else {
    val scale = (width / height.toFloat())
    Matrix.scaleM(transformMatrix, 0, 1f, scale, 1f)
}
// 小さくする
Matrix.scaleM(transformMatrix, 0, .5f, .5f, .5f)
// テクスチャに適用する変換行列
// カメラが回転している + 反転もしている（多分既に回転されてる状態なので Y 軸に対して反転をする必要が？）
val textureTransformMatrix = FloatArray(16)
Matrix.setIdentityM(textureTransformMatrix, 0)
Matrix.setRotateM(textureTransformMatrix, 0, 270f, 0f, 0f, 1f)
Matrix.scaleM(textureTransformMatrix, 0, 1f, -1f, 1f)
// GPU に転送
// mat4x4<f32> が2つある構造体なので足す
val structFloatArray = transformMatrix + textureTransformMatrix
gpu.device.queue.writeBuffer(transformMatrixUniformBuffer, 0, structFloatArray.toByteBuffer())

// 下 真ん中
0.0f, 0.0f,
-0.5f, -1.0f,
0.5f, -1.0f,

// 下 右
0.0f, 0.0f,
0.5f, -1.0f,
1.0f, 0.0f,

private val VERTEX_ARRAY = floatArrayOf(
    // それぞれ X座標、Y座標、テクスチャX座標、 テクスチャY座標

    // 下 真ん中
    0.0f, 0.0f, 0.5f, 1.0f,
    -0.5f, -1.0f, 0f, 0f,
    0.5f, -1.0f, 1.0f, 0f,

    // 下 右
    0.0f, 0.0f, 0.5f, 1.0f,
    0.5f, -1.0f, 0f, 0f,
    1.0f, 0.0f, 1.0f, 0f,

    // 下 左
    0.0f, 0.0f, 0.5f, 1.0f,
    -1.0f, 0.0f, 0f, 0f,
    -0.5f, -1.0f, 1.0f, 0f,

    // 上 真ん中
    0.0f, 0.0f, 0.5f, 1.0f,
    -0.5f, 1.0f, 0f, 0f,
    0.5f, 1.0f, 1.0f, 0f,

    // 上 右
    0.0f, 0.0f, 0.5f, 1.0f,
    0.5f, 1.0f, 0f, 0f,
    1.0f, 0.0f, 1.0f, 0f,

    // 上 左
    0.0f, 0.0f, 0.5f, 1.0f,
    -0.5f, 1.0f, 0f, 0f,
    -1.0f, 0.0f, 1.0f, 0f,
)

// Create Render Pipeline
renderPipeline = device.createRenderPipeline(
    descriptor = GPURenderPipelineDescriptor(
        vertex = GPUVertexState(
            shaderModule,
            // 頂点を
            buffers = arrayOf(
                GPUVertexBufferLayout(
                    arrayStride = Float.SIZE_BYTES * 4L, // 頂点(x,y) とテクスチャ座標(x,y) で 2 * 2 * FloatSize
                    attributes = arrayOf(
                        // 三角形の頂点
                        GPUVertexAttribute(
                            shaderLocation = 0,
                            offset = 0,
                            format = VertexFormat.Float32x2
                        ),
                        // テクスチャ座標
                        GPUVertexAttribute(
                            shaderLocation = 1,
                            offset = Float.SIZE_BYTES * 2L,
                            format = VertexFormat.Float32x2
                        )
                    )
                )
            )
        ),
        fragment = GPUFragmentState(
            shaderModule,
            targets = arrayOf(GPUColorTargetState(TextureFormat.RGBA8Unorm))
        ),
        primitive = GPUPrimitiveState(PrimitiveTopology.TriangleList),
    )
)

    private fun initPipeline(device: GPUDevice) {
        val shaderCode = """
    // Uniforms 構造体
    struct Uniforms {
        matrix: mat4x4<f32>,
        textureMatrix: mat4x4<f32>,
    }
    
    // CPU から頂点を受け取る
    struct Vertex {
        @location(0) position: vec2f,
        @location(1) uv: vec2f,
    }
    
    // フラグメントシェーダーへ渡す
    struct VertexOutput {
        @builtin(position) position: vec4f,
        @location(0) uv : vec2f,
    }
        
    // CPU から受け取る
    @group(0) @binding(0) var<uniform> transformMatrix: Uniforms;
    @group(0) @binding(1) var smp: sampler;
    @group(0) @binding(2) var textureYuvY: texture_2d<f32>;
    @group(0) @binding(3) var textureYuvU: texture_2d<f32>;
    @group(0) @binding(4) var textureYuvV: texture_2d<f32>;
        
    @vertex fn vs_main(vertex: Vertex) -> VertexOutput {
        let transformedVec = vec4f(vertex.position, 0, 1) * transformMatrix.matrix; // 変換行列を適用
        let uvVec4 = vec4f(vertex.uv, 0, 1) * transformMatrix.textureMatrix; // mat4x4 の変換行列を適用するために vec4f() にする
        var output: VertexOutput;
        output.position = transformedVec;
        output.uv = uvVec4.xy * 0.5 + 0.5; // vec4f にしてしまったのでテクスチャ座標にもどす
        return output;
    }
    
    @fragment fn fs_main(output: VertexOutput) -> @location(0) vec4f {

        // 位置に対応する YUV とりだし
        // 以下、Yの値域は[0, 1]。Cb, Crの値域は[-0.5, 0.5]
        let y = (textureSample(textureYuvY, smp, output.uv).r * (255.0 / 235.0) - (16.0 / 235.0));
        let u = (textureSample(textureYuvU, smp, output.uv).r - 0.5);
        let v = (textureSample(textureYuvV, smp, output.uv).r - 0.5);
    
        // YUV から BT.709 RGB の変換式は Wiki
        // https://ja.wikipedia.org/wiki/YUV#RGBからの変換
        let yuvToRgbBt709 = mat3x3<f32>(
            vec3f(1.0, 1.0, 1.0),
            vec3f(0.0, -0.187324, 1.8556),
            vec3f(1.5748, -0.468124, 0.0)
        );
    
        let rgb = yuvToRgbBt709 * vec3f(y, u, v);
        return vec4<f32>(rgb, 1.0);
    }
"""

renderPass.setPipeline(renderPipeline)
renderPass.setVertexBuffer(0, vertexBuffer)
renderPass.setBindGroup(0, bindGroup) // @group(0) なので 0
renderPass.draw(VERTEX_ARRAY.size / 4) // 頂点の数だけ x,y,テクスチャx,テクスチャy のデータがあるため割り算
renderPass.end()

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AndroidWebGpuMangekyouTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MangekyouGpuSurfaceView(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun MangekyouGpuSurfaceView(modifier: Modifier = Modifier) {
    val surfaceSize = remember { MutableStateFlow<IntSize?>(null) }
    val surfaceFlow = remember { MutableStateFlow<Surface?>(null) }

    val context = LocalContext.current
    val isPermissionGranted = remember { Channel<Boolean>() }
    val permissionRequester = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.RequestPermission(),
        onResult = { isGranted ->
            isPermissionGranted.trySend(isGranted)
        }
    )

    LaunchedEffect(key1 = Unit) {
        // 権限を要求して待つ
        permissionRequester.launch(android.Manifest.permission.CAMERA)
        if (!isPermissionGranted.receive()) {
            println("権限が付与されませんでした...")
        }

        // サイズと surface が得られること、得られない場合は return している
        combine(
            surfaceSize,
            surfaceFlow,
            ::Pair
        ).collectLatest { (size, surface) ->
            if (size != null && surface != null) {
                val renderer = MangekyouWebGpuRenderer(context)
                try {
                    renderer.init(surface, size.width, size.height)
                    // 繰り返し呼ぶ
                    while (true) {
                        delay(16.milliseconds)
                        renderer.render()
                    }
                } finally {
                    // surface が再生成された、破棄されたとき
                    renderer.cleanup()
                }
            }
        }
    }

    AndroidView(
        modifier = modifier.onSizeChanged { surfaceSize.value = it },
        factory = { context ->
            SurfaceView(context).apply {
                holder.addCallback(object : SurfaceHolder.Callback {
                    override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {
                        // do nothing
                    }

                    override fun surfaceCreated(holder: SurfaceHolder) {
                        surfaceFlow.value = holder.surface
                    }

                    override fun surfaceDestroyed(holder: SurfaceHolder) {
                        surfaceFlow.value = null
                    }
                })
            }
        }
    )
}