Add experimental API to render WebGL textures on the Compose' canvas

compose/mpp/demo/build.gradle.kts

@@ -168,12 +168,10 @@ kotlin {
 
             dependencies {
                 implementation(libs.kotlinSerializationJson)
-            }
-        }
+                implementation(libs.kotlinXw3c)
 
-        val wasmJsMain by getting {
-            dependencies {
-                api(libs.kotlinXw3c)
+                // https://github.com/mrdoob/three.js/ for WebGl demo
+                implementation(npm("three", "0.185.0"))
             }
         }
 

compose/mpp/demo/src/webMain/kotlin/androidx/compose/mpp/demo/Main.web.kt

@@ -19,8 +19,13 @@ package androidx.compose.mpp.demo
 import androidx.compose.mpp.demo.bugs.BugsScreen
 import androidx.compose.mpp.demo.components.text.loadResource
 import androidx.compose.mpp.demo.interops.HtmlInteropDemos
+import androidx.compose.mpp.demo.webgl.PlainWebGlScreen
+import androidx.compose.mpp.demo.webgl.ThreeJsTextureAdoptionScreen
+import androidx.compose.mpp.demo.webgl.VideoWebGlScreen
+import androidx.compose.mpp.demo.webgl.HtmlInCanvasWebGlScreen
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.mpp.demo.embedded.embeddedScrollDemo
+import androidx.compose.mpp.demo.webgl.WebGLDemoScreen
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -65,6 +70,7 @@ fun defaultComposeDemo() {
         val fontsLoaded = remember { mutableStateOf(false) }
         val app = remember { App(
             extraScreens = listOf(
+                WebGLDemoScreen,
                 BugsScreen,
                 Screen.Example("Web Clipboard API example") {
                     WebClipboardDemo()

compose/mpp/demo/src/webMain/kotlin/androidx/compose/mpp/demo/webgl/DemoControls.web.kt

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.mpp.demo.webgl
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Slider
+import androidx.compose.material.Switch
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.dp
+import kotlin.math.roundToInt
+
+@Composable
+internal fun LabelledSlider(
+    label: String,
+    value: Double,
+    valueRange: ClosedFloatingPointRange<Float>,
+    valueText: String = ((value * 100).roundToInt() / 100f).toString(),
+    onValueChange: (Double) -> Unit,
+) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        Text(label, Modifier.width(110.dp), style = MaterialTheme.typography.body2)
+        Slider(
+            value = value.toFloat(),
+            onValueChange = { onValueChange(it.toDouble()) },
+            valueRange = valueRange,
+            modifier = Modifier.weight(1f),
+        )
+        Text(valueText, Modifier.padding(start = 12.dp), style = MaterialTheme.typography.caption)
+    }
+}
+
+@Composable
+internal fun Toggle(label: String, checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        Switch(checked = checked, onCheckedChange = onCheckedChange)
+        Text(label, Modifier.padding(start = 8.dp), style = MaterialTheme.typography.body2)
+    }
+}
+
+@Composable
+internal fun StatusLine(label: String, value: String) {
+    Row(Modifier.fillMaxWidth()) {
+        Text(label, Modifier.width(170.dp), style = MaterialTheme.typography.caption)
+        Text(value, style = MaterialTheme.typography.caption, fontFamily = FontFamily.Monospace)
+    }
+}