commit 31250123dbb8816dc29ea5aaa2fb6ba2b79d433d
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 20:49:08 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..9759fd4
--- /dev/null
+++ b/body.html
@@ -0,0 +1,8 @@
+<main>
+ <h1>Shaded Sphere with WebGPU</h1>
+ <canvas id="webgpu-canvas"></canvas>
+ <p>Experience the power of WebGPU rendering a beautifully shaded sphere.</p>
+</main>
+<footer>
+ <p>Built with WebGPU and pure web technologies.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..177ea3c
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://sphereglow.scroll.pub
+metaTags
+editButton /edit.html
+title Shaded Sphere with WebGPU
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..23c7802
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "d21cdaef-0155-4cbf-af2b-19d3de73b1e3",
+ "object": "chat.completion",
+ "created": 1735332535,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nsphereglow.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://sphereglow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Shaded Sphere with WebGPU\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main>\n <h1>Shaded Sphere with WebGPU</h1>\n <canvas id=\"webgpu-canvas\"></canvas>\n <p>Experience the power of WebGPU rendering a beautifully shaded sphere.</p>\n</main>\n<footer>\n <p>Built with WebGPU and pure web technologies.</p>\n</footer>\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background: linear-gradient(135deg, #1e1e2f, #2a2a40);\n color: #ffffff;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(90deg, #00c6ff, #0072ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\ncanvas {\n width: 100%;\n max-width: 600px;\n height: 600px;\n border-radius: 50%;\n box-shadow: 0 0 50px rgba(0, 198, 255, 0.5);\n margin: 2rem 0;\n}\n\np {\n font-size: 1.1rem;\n max-width: 600px;\n line-height: 1.6;\n margin: 1rem auto;\n}\n\nfooter {\n margin-top: 2rem;\n font-size: 0.9rem;\n color: rgba(255, 255, 255, 0.7);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n canvas {\n height: 300px;\n max-width: 300px;\n }\n}\n---script.js---\nasync function initWebGPU() {\n if (!navigator.gpu) {\n alert('WebGPU not supported on this browser.');\n return;\n }\n\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n const canvas = document.getElementById('webgpu-canvas');\n const context = canvas.getContext('webgpu');\n const format = navigator.gpu.getPreferredCanvasFormat();\n\n context.configure({\n device: device,\n format: format,\n alphaMode: 'opaque'\n });\n\n const shaderModule = device.createShaderModule({\n code: `\n @vertex\n fn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {\n let pos = array(\n vec2f( 0.0, 0.5),\n vec2f(-0.5, -0.5),\n vec2f( 0.5, -0.5)\n );\n return vec4f(pos[vertexIndex], 0.0, 1.0);\n }\n\n @fragment\n fn fragmentMain() -> @location(0) vec4f {\n return vec4f(1.0, 0.0, 0.0, 1.0);\n }\n `\n });\n\n const pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: shaderModule,\n entryPoint: 'vertexMain'\n },\n fragment: {\n module: shaderModule,\n entryPoint: 'fragmentMain',\n targets: [{ format }]\n },\n primitive: {\n topology: 'triangle-list'\n }\n });\n\n const commandEncoder = device.createCommandEncoder();\n const textureView = context.getCurrentTexture().createView();\n const renderPass = commandEncoder.beginRenderPass({\n colorAttachments: [{\n view: textureView,\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store'\n }]\n });\n\n renderPass.setPipeline(pipeline);\n renderPass.draw(3);\n renderPass.end();\n\n device.queue.submit([commandEncoder.finish()]);\n}\n\nwindow.addEventListener('load', initWebGPU);\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 246,
+ "completion_tokens": 1011,
+ "total_tokens": 1257,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 246
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2351cc4
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# sphereglow.scroll.pub
+Website generated by DeepSeek from prompt: create a website that renders a shaded sphere using webgpu
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e6ca2fe
--- /dev/null
+++ b/script.js
@@ -0,0 +1,73 @@
+async function initWebGPU() {
+ if (!navigator.gpu) {
+ alert('WebGPU not supported on this browser.');
+ return;
+ }
+
+ const adapter = await navigator.gpu.requestAdapter();
+ const device = await adapter.requestDevice();
+
+ const canvas = document.getElementById('webgpu-canvas');
+ const context = canvas.getContext('webgpu');
+ const format = navigator.gpu.getPreferredCanvasFormat();
+
+ context.configure({
+ device: device,
+ format: format,
+ alphaMode: 'opaque'
+ });
+
+ const shaderModule = device.createShaderModule({
+ code: `
+ @vertex
+ fn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
+ let pos = array(
+ vec2f( 0.0, 0.5),
+ vec2f(-0.5, -0.5),
+ vec2f( 0.5, -0.5)
+ );
+ return vec4f(pos[vertexIndex], 0.0, 1.0);
+ }
+
+ @fragment
+ fn fragmentMain() -> @location(0) vec4f {
+ return vec4f(1.0, 0.0, 0.0, 1.0);
+ }
+ `
+ });
+
+ const pipeline = device.createRenderPipeline({
+ layout: 'auto',
+ vertex: {
+ module: shaderModule,
+ entryPoint: 'vertexMain'
+ },
+ fragment: {
+ module: shaderModule,
+ entryPoint: 'fragmentMain',
+ targets: [{ format }]
+ },
+ primitive: {
+ topology: 'triangle-list'
+ }
+ });
+
+ const commandEncoder = device.createCommandEncoder();
+ const textureView = context.getCurrentTexture().createView();
+ const renderPass = commandEncoder.beginRenderPass({
+ colorAttachments: [{
+ view: textureView,
+ clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+ loadOp: 'clear',
+ storeOp: 'store'
+ }]
+ });
+
+ renderPass.setPipeline(pipeline);
+ renderPass.draw(3);
+ renderPass.end();
+
+ device.queue.submit([commandEncoder.finish()]);
+}
+
+window.addEventListener('load', initWebGPU);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a771279
--- /dev/null
+++ b/style.css
@@ -0,0 +1,59 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background: linear-gradient(135deg, #1e1e2f, #2a2a40);
+ color: #ffffff;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(90deg, #00c6ff, #0072ff);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+canvas {
+ width: 100%;
+ max-width: 600px;
+ height: 600px;
+ border-radius: 50%;
+ box-shadow: 0 0 50px rgba(0, 198, 255, 0.5);
+ margin: 2rem 0;
+}
+
+p {
+ font-size: 1.1rem;
+ max-width: 600px;
+ line-height: 1.6;
+ margin: 1rem auto;
+}
+
+footer {
+ margin-top: 2rem;
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ canvas {
+ height: 300px;
+ max-width: 300px;
+ }
+}
\ No newline at end of file