port zengl logo to webgl2

szabolcsdombi · Nov 17, 2022 · 22861d9 · 22861d9
1 parent 6f3572f
commit 22861d9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,6 +1,7 @@
 .github/** linguist-detectable=false
 examples/** linguist-documentation=false
 tests/Dockerfile linguist-detectable=false
+*.html linguist-detectable=false
 *.vert linguist-detectable=false
 *.frag linguist-detectable=false
 *.glsl linguist-detectable=false

diff --git a/examples/zengl_logo.html b/examples/zengl_logo.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ZenGL Logo</title>
+</head>
+<body>
+  <canvas id="canvas"></canvas>
+</body>
+<script>
+  // this file was exported with zengl-export and manually modified to fit the webgl2 api.
+
+  var canvas = document.getElementById('canvas');
+  var gl = canvas.getContext('webgl2');
+
+  canvas.width = 1280;
+  canvas.height = 640;
+
+  var vertex_array1 = gl.createVertexArray();
+
+  var src1 = "#version 300 es\nmat4 perspective(float fovy, float aspect, float znear, float zfar) {\nfloat tan_half_fovy = tan(fovy * 0.008726646259971647884618453842);\nreturn mat4(\n1.0 / (aspect * tan_half_fovy), 0.0, 0.0, 0.0,\n0.0, 1.0 / (tan_half_fovy), 0.0, 0.0,\n0.0, 0.0, -(zfar + znear) / (zfar - znear), -1.0,\n0.0, 0.0, -(2.0 * zfar * znear) / (zfar - znear), 0.0\n);\n}\nmat4 lookat(vec3 eye, vec3 center, vec3 up) {\nvec3 f = normalize(center - eye);\nvec3 s = normalize(cross(f, up));\nvec3 u = cross(s, f);\nreturn mat4(\ns.x, u.x, -f.x, 0.0,\ns.y, u.y, -f.y, 0.0,\ns.z, u.z, -f.z, 0.0,\n-dot(s, eye), -dot(u, eye), dot(f, eye), 1.0\n);\n}\nconst float pi = 3.1415926535897932384626;\nvec3 positions[4] = vec3[](\nvec3(0.0, 0.0, 0.5),\nvec3(0.0, 1.0, -0.5),\nvec3(1.0, 0.0, 0.5),\nvec3(1.0, 1.0, -0.5)\n);\nvec3 hsv2rgb(vec3 c) {\nvec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\nvec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\nreturn c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\nout vec3 v_vertex;\nout vec3 v_color;\nvoid main() {\nmat4 projection = perspective(45.0, 2.0, 0.1, 1000.0);\nmat4 view = lookat(vec3(0.0, 3.75, 0.0), vec3(0.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0));\nmat4 mvp = projection * view;\nv_vertex = positions[gl_VertexID];\nfloat r = pi - float(gl_InstanceID) * pi * 2.0 / 7.0;\nmat3 rotation = mat3(cos(r), 0.0, sin(r), 0.0, 1.0, 0.0, -sin(r), 0.0, cos(r));\ngl_Position = mvp * vec4(rotation * v_vertex, 1.0);\nv_color = hsv2rgb(vec3(float(gl_InstanceID) / 10.0, 1.0, 0.5));\n}";
+  var shader1 = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(shader1, src1);
+  gl.compileShader(shader1);
+
+  var src2 = "#version 300 es\nprecision lowp float;\nin vec3 v_vertex;\nin vec3 v_color;\nlayout (location = 0) out vec4 out_color;\nvoid main() {\nfloat u = smoothstep(0.48, 0.47, abs(v_vertex.x - 0.5));\nfloat v = smoothstep(0.48, 0.47, abs(v_vertex.y - 0.5));\nout_color = vec4(v_color * (u * v), 1.0);\nout_color.rgb = pow(out_color.rgb, vec3(1.0 / 2.2));\n}";
+  var shader2 = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(shader2, src2);
+  gl.compileShader(shader2);
+
+  var program4 = gl.createProgram();
+  gl.attachShader(program4, shader1);
+  gl.attachShader(program4, shader2);
+  gl.linkProgram(program4);
+
+  gl.enable(gl.DEPTH_TEST);
+  gl.clearColor(0.0, 0.0, 0.0, 0.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.viewport(0, 0, 1280, 640);
+  gl.useProgram(program4);
+  gl.bindVertexArray(vertex_array1);
+  gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, 7);
+</script>
+</html>