Changes to sphereglow.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Shaded Sphere with WebGPU
+   
+   Experience the power of WebGPU rendering a beautifully shaded sphere.
+ 
+ 
+   Built with WebGPU and pure web technologies.
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://sphereglow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Shaded Sphere with WebGPU
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  Shaded Sphere with WebGPU\n  \n  Experience the power of WebGPU rendering a beautifully shaded sphere.
\n\n\n  Built with WebGPU and pure web technologies.
\n\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"
+ }

readme.scroll

Changed around line 1

+ # sphereglow.scroll.pub

+ Website generated by DeepSeek from prompt: create a website that renders a shaded sphere using webgpu

script.js

Changed around line 1
+ 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);

style.css

Changed around line 1
+ * {
+   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;
+   }
+ }