diff options
| author | pommicket <pommicket@gmail.com> | 2023-06-14 11:58:41 +0100 |
|---|---|---|
| committer | pommicket <pommicket@gmail.com> | 2023-06-14 11:58:41 +0100 |
| commit | a6df8658309f82c62e4507894e409b65a6470950 (patch) | |
| tree | fd0252730d8c391f38bb914d677e80819d3bee1c | |
| parent | ed5d2abddffcf72d28dd427d08efc50d4b1456d9 (diff) | |
nicer show_error
| -rw-r--r-- | fractiform.js | 5 | ||||
| -rw-r--r-- | index.html | 41 |
2 files changed, 30 insertions, 16 deletions
diff --git a/fractiform.js b/fractiform.js index eac29a6..9575802 100644 --- a/fractiform.js +++ b/fractiform.js @@ -39,6 +39,7 @@ void main() { gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { show_error('Error linking shader program:\n' + gl.getProgramInfoLog(program)); + return; } vertex_buffer = gl.createBuffer(); @@ -92,6 +93,6 @@ function compile_shader(name, type, source) { } function show_error(error) { - // TODO: display error in browser - console.log(error); + document.getElementById('error-message').innerText = error; + document.getElementById('error-dialog').showModal(); } @@ -6,9 +6,10 @@ <style> body { font-family: sans-serif; - background-color: #111; + background-color: black; margin: 0; padding: 0; + color: white; overflow: hidden; } @@ -16,30 +17,42 @@ width: 100vw; height: 100vh; } + + .error { + color: red; + } + + #error-dialog { + border: 2px solid red; + background-color: black; + } + #error-dialog button { + border: 2px solid white; + background-color: black; + color: white; + } + button:focus { + outline: 2px solid #0a0; + } </style> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> </head> <body> -<script id="vertex-shader" type="x-shader/x-vertex"> - attribute vec2 aVertexPosition; - void main() { - gl_Position = vec4(aVertexPosition, 0.0, 1.0); - } -</script> -<script id="fragment-shader" type="x-shader/x-fragment"> - uniform vec4 uGlobalColor; - - void main() { - gl_FragColor = uGlobalColor; - } -</script> <script src="fractiform.js" type="text/javascript"></script> <canvas id="canvas"> Your browser doesn't support <canvas><br> This page won't work for you. </canvas> + +<dialog id="error-dialog"> + <pre id="error-message" class="error"></pre> + <form method="dialog"> + <button>OK</button> + </form> +</dialog> + </body> </html> |