madox
New Member
Posts: 22
|
Post by madox on Mar 3, 2020 4:24:28 GMT
I've been implementing a Javascript ray tracer, following the book. I'm currently on Chapter 14 and the rendering times are crazy, pushing 30s for complicated scenes. 30s is still pretty good for javascript I think, but my goal is to try to make a real time ray tracer and I always knew that meant shaders. However, I had no idea how to approach writing this is a shader. Is it single pass? Multi pass? And WebGL doesnt do compute shaders. I decided to just get started and see what I can do as a single pass shader. I found that I could pass in the entire world description using UniformBuffers, and heavy use of indexes and array offsets (no pointers in GLSL). After that I started writing the biggest shader of my life expecting GL to error about the size but it never did. Some stuff I had to change for GLSL - had to redo the entire casting process to be non recursive. there is no recursion in GLSL - abandon perlin patterns. I dont see how... - limit patterns to a single blend or gradient in a pattern chain. I couldnt find a good way to un-recursion patterns - find a way to sort the intersects. I implemented bubblesort in the shader but it was terrible slow. Moved to insertion sort and its way better This is one 800x600 image from the shader. It's not perfect, particularly the reflections of glass balls, but it rendered in about 24ms. (With the bubblesort it was 300ms!) At that speed I could add animation and see what kind of FPS I can get. You can check the animations out at madox.ca/WebGL/RayGL/The above scene is scene4 in the top dropdown. Be warned that the shader takes.. a while.. to compile. But after the first compile its faster and you can change the data and push updates. If its crushing your computer, click the -> button at the button and it will start rendering the scene in multiple slices which will help. There is a lot to add and fix still but I want to thank Jamis Buck for an amazing book. I've having a blast with it!
|
|
madox
New Member
Posts: 22
|
Post by madox on Mar 3, 2020 4:38:55 GMT
Just a note that this forum's redirect wrapper is causing UBlock Origin to throw up a warning about my site at madox.ca, but its not me! You can cut and paste the link and its fine. I hope you can check it out and let me know if the shader runs for you
|
|
fremag
Junior Member
Posts: 73
|
Post by fremag on Mar 4, 2020 8:07:07 GMT
24 ms... Impressive ! Unfortunately, I can't see your animations. I've opened the link with Firefox, I got a message saying it's compiling shader but once it's done, there is nothing. I pressed all the buttons (start, step ...) but still don't see a thing. I check that WebGL is ok on my browser with this url: get.webgl.org/ and I can see their demo.
The debug / console shows:
Boot up phase 0 mxFrame.js:174:13 ../mxFrame/libs/glMatrix.js loaded. 0 left mxFrame.js:74:15 Boot up phase 1 mxFrame.js:78:17 ../mxFrame/components/mxTexture.js loaded. 8 left mxFrame.js:85:15 ../mxFrame/libs/pako.js loaded. 7 left mxFrame.js:85:15 ../mxFrame/components/mxMesh.js loaded. 6 left mxFrame.js:85:15 ../mxFrame/components/mxAssetManager.js loaded. 5 left mxFrame.js:85:15 ../mxFrame/components/mxShader.js loaded. 4 left mxFrame.js:85:15 ../mxFrame/components/mxShaderManager.js loaded. 3 left mxFrame.js:85:15 ../mxFrame/components/mxCamera.js loaded. 2 left mxFrame.js:85:15 ../mxFrame/components/mxMouse.js loaded. 1 left mxFrame.js:85:15 ../mxFrame/components/mxGame.js loaded. 0 left mxFrame.js:85:15 Boot up phase 2 mxFrame.js:89:17 js/matrix.js loaded. 2 left mxFrame.js:96:15 js/parser.js loaded. 1 left mxFrame.js:96:15 js/ray.js loaded. 0 left mxFrame.js:96:15 debug ready? mxFrame.js:107:13 main called mxFrame.js:132:13 Init mxFrame.js:138:13
TypeError: ext.timer is null mxGame.js:20:11 GLTimer http://madox.ca/WebGL/mxFrame/components/mxGame.js:20 init http://madox.ca/WebGL/mxFrame/components/mxGame.js:281 main http://madox.ca/WebGL/mxFrame/mxFrame.js:139 waitForDebug http://madox.ca/WebGL/mxFrame/mxFrame.js:109 handleLoaded http://madox.ca/WebGL/mxFrame/mxFrame.js:100 onload http://madox.ca/WebGL/mxFrame/mxFrame.js:124 {…} Ray: Object { name: "Ray", VS: "#version 300 es\n// SHADER NAME: Ray\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nin vec2 aVertexPosition; // POS\nin vec2 aTextureCoord; // TEX0\n\nout vec2 vTextureCoord;\n\nvoid main(void) \n{\n gl_Position = vec4(aVertexPosition, 0.0, 1.0 );\n vTextureCoord = aTextureCoord;\n}\n\n", usestate: "noblend", … } ShowResult: Object { name: "ShowResult", VS: "// SHADER NAME: ShowResult\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec2 vTextureCoord;\n\nattribute vec2 aVertexPosition; // POS\nattribute vec2 aTextureCoord; // TEX0\n\nvoid main(void)\n{\n gl_Position = vec4(aVertexPosition, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n}\n", PS: "// SHADER NAME: ShowResult\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec2 vTextureCoord;\nuniform float curslice; // group params\nuniform float barsize; // group params\nuniform sampler2D result; // mag LINEAR, min LINEAR, wrapu CLAMP_TO_EDGE, wrapv CLAMP_TO_EDGE\n\nvoid main(void)\n{\n vec4 ret = texture2D(result, vTextureCoord);\n\n if (vTextureCoord.y > barsize && vTextureCoord.x < curslice)\n ret = vec4(0.0,1.0,0.0,1.0);\n\n gl_FragColor = ret;\n}\n\n\n", … } StoreResult: Object { name: "StoreResult", VS: "// SHADER NAME: StoreResult\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec2 vTextureCoord;\n\nattribute vec2 aVertexPosition; // POS\nattribute vec2 aTextureCoord; // TEX0\n\nvoid main(void)\n{\n gl_Position = vec4(aVertexPosition, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n}\n", PS: "// SHADER NAME: StoreResult\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D result; // mag LINEAR, min LINEAR, wrapu CLAMP_TO_EDGE, wrapv CLAMP_TO_EDGE\n\nvoid main(void)\n{\n gl_FragColor = texture2D(result, vTextureCoord);\n}\n\n\n", … } sprite: Object { name: "sprite", VS: "// SHADER NAME: sprite\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec2 vTextureCoord;\n\nattribute vec2 aVertexPosition; // POS\nattribute vec2 aTextureCoord; // TEX0\n\nuniform vec2 location;\nuniform vec2 size;\nuniform vec2 screensize;\n\nvoid main(void) \n{\n vec2 vert = ((location + aVertexPosition * size) / screensize) * 2.0 - 1.0;\n vert.y *= -1.0;\n gl_Position = vec4(vert, 0.0, 1.0 );\n vTextureCoord = aTextureCoord;\n vTextureCoord.y = 1.0 - vTextureCoord.y;\n}\n", PS: "// SHADER NAME: sprite\n#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSpriteTex; // mag LINEAR, min LINEAR, wrapu CLAMP_TO_EDGE, wrapv CLAMP_TO_EDGE\n\nvoid main(void) \n{\n gl_FragColor = texture2D(uSpriteTex, vTextureCoord);\n}\n\n", … } <prototype>: Object { … }
|
|
madox
New Member
Posts: 22
|
Post by madox on Mar 4, 2020 15:45:16 GMT
Thanks for trying! I have to admit I only ever care if it runs in Chrome. It seems like Firefox doesnt have the EXT_disjoint_timer_query_webgl2 extension. I'll fix that up now Edit: fixed now - and it even works on my phone again. Well, 'works'
|
|
fremag
Junior Member
Posts: 73
|
Post by fremag on Mar 5, 2020 13:39:19 GMT
It works now and I confirm, scene4 is impressive !
|
|
madox
New Member
Posts: 22
|
Post by madox on Mar 8, 2020 21:28:55 GMT
Adding a note that I fixed all my refraction issues and it all looks great now. I'll report back again when I figure out how to do triangle meshes and texture maps in the shader
|
|
|
Post by bezdomniy on Mar 11, 2020 0:27:57 GMT
Very cool and fast! Will webgl use the GPU if the machine has one? Ive been thinking of how to port my webassembly implementation to GPU rendering, but there doesn't seem to be a good way (maybe trying webgpu?).
|
|
madox
New Member
Posts: 22
|
Post by madox on Mar 14, 2020 1:36:23 GMT
Ya it does use the GPU. Maybe I could go into more detail on how my shader works if you'd like
|
|
|
Post by Jamis on Mar 14, 2020 21:33:28 GMT
Very cool! This is super impressive.
|
|