{"id":2913,"date":"2013-04-28T23:42:59","date_gmt":"2013-04-28T21:42:59","guid":{"rendered":"http:\/\/hintz.bplaced.net\/?p=2913"},"modified":"2023-03-04T19:59:03","modified_gmt":"2023-03-04T18:59:03","slug":"webgl","status":"publish","type":"post","link":"http:\/\/hintz.bplaced.net\/en\/2013\/webgl\/webgl\/","title":{"rendered":"WebGL"},"content":{"rendered":"<p>Since some time ago a was playing around with Open GL and WebGL.<\/p>\n<p>Without hassle you can create new OpenGL Fragment Shaders or learn to write them, by modifying existings Shaders at:\u00a0<a title=\"glslsandbox.com\" href=\"https:\/\/glslsandbox.com\/\">https:\/\/glslsandbox.com<\/a><\/p>\n<p>But now I managed to show WebGL inside of my WordPress Blog.<\/p>\n<p class=\"webgl\"><img decoding=\"async\" src=\"http:\/\/hintz.bplaced.net\/images\/2013\/04\/eggs.jpg\" \/><a href=\"https:\/\/glslsandbox.com\/e#54327.0\"><canvas width=\"620\" height=\"620\"><script type=\"x-shader\/x-vertex\">attribute vec2 position; void main() { gl_Position = vec4(position, 0, 1); }<\/script><script type=\"x-shader\/x-fragment\">\n#ifdef GL_ES\nprecision mediump float;\n#endif\nuniform float time;\nuniform vec2 resolution;\n#define PI 3.141592653589793\n#define PI2 (PI*2.0)\n\/\/ http:\/\/glslsandbox.com\/e#7109.0 simplified by logos7@o2.pl\n\/\/ different colors by @hintz\nvoid main(void)\n{\n\tvec2 position = 16.0 * ((2.0 * gl_FragCoord.xy - resolution) \/ resolution.xx);\n\tfloat r = length(position);\n\tfloat a = atan(position.y, position.x) + PI;\n\tfloat d = r - a + PI2;\n\tfloat n = PI2 * float(int(d\/PI2));\n\tfloat da = a + n;\n\tfloat pos = (PI*0.02*da * da - time);\n\tvec3 norm;\n\tnorm.xy = vec2(fract(pos)-0.5, fract(d\/PI2)-0.5)*2.0;\n\tpos = floor(pos);\n\tfloat len = length(norm.xy);\n\tvec3 color = vec3(0.0);\n\tif (len < 1.0) \t{ norm.z = sqrt(1.0 - len*len); vec3 lightdir = normalize(vec3(-0.0, -1.0, 1.0)); float dd = dot(lightdir, norm); dd = max(dd, 0.25); color.rgb = dd*vec3(0.5*cos(pos+2.0)+0.5, 0.5*cos(pos+4.0)+0.5, 0.5*cos(pos)+0.5); vec3 halfv = normalize(lightdir + vec3(0.0, 0.0, 1.0)); float spec = dot(halfv, norm); spec = max(spec, 0.0); spec = pow(spec, 40.0); color += vec3(spec); } gl_FragColor = vec4(color,1.0); }\n<\/script><\/canvas><\/a><\/p>\n<p>The problems are WordPress tries to reformat my code. It changes the type of my script-tags and inserts p-tags.<\/p>","protected":false},"excerpt":{"rendered":"<p>Since some time ago a was playing around with Open GL and WebGL. Without hassle you can create new OpenGL Fragment Shaders or learn to write them, by modifying existings Shaders at:\u00a0https:\/\/glslsandbox.com But now I managed to show WebGL inside of my WordPress Blog. The problems are WordPress tries to reformat my code. It changes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[144],"tags":[147,145,146,189],"_links":{"self":[{"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/posts\/2913"}],"collection":[{"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/comments?post=2913"}],"version-history":[{"count":35,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/posts\/2913\/revisions"}],"predecessor-version":[{"id":3457,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/posts\/2913\/revisions\/3457"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/media\/3007"}],"wp:attachment":[{"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/media?parent=2913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/categories?post=2913"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hintz.bplaced.net\/en\/wp-json\/wp\/v2\/tags?post=2913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}