API tools faq
paste
Guest User

Untitled

a guest
Jan 21st, 2018
219
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.72 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>XML Shader (1.0) Viewer</title>
  4. </head>
  5. <body onload="webGLStart();">
  6. <input type="button" onclick="do_resize(0.25)" value="Scale 0.25x"/>
  7. <input type="button" onclick="do_resize(0.5)" value="Scale 0.5x"/>
  8. <input type="button" onclick="do_resize(1)" value="Scale 1x"/>
  9. <input type="button" onclick="do_resize(2)" value="Scale 2x"/>
  10. <input type="button" onclick="do_resize(3)" value="Scale 3x"/>
  11. <input type="button" onclick="do_resize(4)" value="Scale 4x"/>
  12. <input type="button" onclick="do_resize(5)" value="Scale 5x"/><br/>
  13. <p>Image: <input type="file" id="image_file" name="files[]"/></p>
  14. <p>Shader: <input type="file" id="shader_file" name="files[]"/></p>
  15. <canvas id="test_canvas" style="border: none" width="256" height="224"></canvas><br/>
  16. <output id="text_output"></output><br/>
  17. </body>
  18.  
  19. <script type="text/javascript">
  20. function do_resize(scale) {
  21. var canvas = document.getElementById("test_canvas");
  22. canvas.width = texture_.image.width * scale;
  23. canvas.height = texture_.image.height * scale;
  24. }
  25. </script>
  26.  
  27. <script id="vertex_shader" type="x-shader/x-vertex">
  28. attribute vec2 rubyVertex;
  29. attribute vec2 rubyTexCoord;
  30. varying vec4 rubyTexCoord_[8];
  31. void main()
  32. {
  33. gl_Position = vec4(rubyVertex, 0.0, 1.0);
  34. rubyTexCoord_[0] = vec4(rubyTexCoord, 0.0, 1.0);
  35. }
  36. </script>
  37.  
  38. <script id="fragment_shader" type="x-shader/x-fragment">
  39. #ifdef GL_ES
  40. precision highp float;
  41. #endif
  42.  
  43. uniform sampler2D rubyTexture;
  44. varying vec4 rubyTexCoord_[5];
  45.  
  46. void main()
  47. {
  48. gl_FragColor = texture2D(rubyTexture, rubyTexCoord_[0].xy);
  49. }
  50. </script>
  51.  
  52. <script type="text/javascript">
  53. var gl;
  54. function initGL(canvas) {
  55. try {
  56. gl = canvas.getContext("experimental-webgl");
  57. gl.viewportWidth = canvas.width;
  58. gl.viewportHeight = canvas.height;
  59. } catch (e) {}
  60. if (!gl) {
  61. alert("Could not init WebGL ... :(");
  62. }
  63. }
  64.  
  65. function getShader(id) {
  66. var script = document.getElementById(id);
  67. if (!script) { return null; }
  68.  
  69. var str = "";
  70. var k = script.firstChild;
  71. while (k) {
  72. if (k.nodeType == 3) { // Magic number 3, what :v
  73. str += k.textContent;
  74. }
  75. k = k.nextSibling;
  76. }
  77.  
  78. var shader;
  79. if (script.type == "x-shader/x-fragment") {
  80. shader = gl.createShader(gl.FRAGMENT_SHADER);
  81. } else if (script.type == "x-shader/x-vertex") {
  82. shader = gl.createShader(gl.VERTEX_SHADER);
  83. } else {
  84. return null;
  85. }
  86.  
  87. gl.shaderSource(shader, str);
  88. gl.compileShader(shader);
  89.  
  90. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  91. alert(gl.getShaderInfoLog(shader));
  92. return null;
  93. }
  94.  
  95. return shader;
  96. }
  97.  
  98. var texture_ = null;
  99.  
  100. function set_image(img) {
  101. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  102. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  103.  
  104. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  105. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  106.  
  107. // Would prefer clamp to border,
  108. // but GLES only supports CLAMP_TO_EDGE with NPOT textures.
  109. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  110. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  111. }
  112.  
  113. function load_image(evt) {
  114. if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
  115. alert("FileReader API not supported by this browser ...");
  116. return;
  117. }
  118.  
  119. var file = evt.target.files[0];
  120. if (!file.type.match("image.*")) {
  121. alert("This is not an image file! :(");
  122. return;
  123. }
  124.  
  125. var reader = new FileReader();
  126. reader.onload =
  127. function(e) {
  128. texture_.old_img = texture_.image;
  129. texture_.image = new Image();
  130. texture_.image.onload = function() {
  131. if (texture_.image.width > 0 && texture_.image.height > 0) {
  132. try {
  133. set_image(texture_.image);
  134. do_resize(1);
  135. } catch (e) {
  136. texture_.image = texture_.old_img;
  137. alert(e);
  138. }
  139. } else {
  140. texture_.image = texture_.old_img;
  141. }
  142. }
  143. texture_.image.src = e.target.result;
  144. }
  145.  
  146. reader.readAsDataURL(file);
  147. }
  148.  
  149. function parse_xml(text) {
  150. try {
  151. var vert = null;
  152. var frag = null;
  153.  
  154. var parser = new DOMParser();
  155. var xmldoc = parser.parseFromString(text, "text/xml");
  156.  
  157. var elems;
  158. elems = xmldoc.getElementsByTagName("vertex");
  159. if (elems.length > 0) {
  160. vert = elems[0].childNodes[0].nodeValue;
  161. }
  162. elems = xmldoc.getElementsByTagName("fragment");
  163. if (elems.length > 0) {
  164. frag = elems[0].childNodes[0].nodeValue;
  165. }
  166.  
  167. } catch (e) {
  168. alert(e);
  169. }
  170.  
  171. return {
  172. vert: vert,
  173. frag: frag
  174. };
  175. }
  176.  
  177. function transform_vert(vert_) {
  178. var vert = "const mat4 trans_matrix_ = mat4(1.0, 0.0, 0.0, 0.0,\n";
  179. vert += "0.0, 1.0, 0.0, 0.0,\n";
  180. vert += "0.0, 0.0, 1.0, 0.0,\n";
  181. vert += "0.0, 0.0, 0.0, 1.0);\n";
  182. vert += "#define gl_ModelViewProjectionMatrix trans_matrix_\n";
  183. vert += "#define gl_Vertex vec4(rubyVertex, 0.0, 1.0)\n";
  184. vert += "#define gl_MultiTexCoord0 vec4(rubyTexCoord, 0.0, 0.0)\n";
  185. vert += "attribute vec2 rubyVertex;\n";
  186. vert += "attribute vec2 rubyTexCoord;\n";
  187. vert += "varying vec4 rubyTexCoord_[8];\n";
  188. vert += "#define gl_TexCoord rubyTexCoord_\n";
  189. vert += vert_;
  190. return vert;
  191. }
  192.  
  193. function transform_frag(frag_) {
  194. var frag = "precision highp float;\n";
  195. frag += "varying vec4 rubyTexCoord_[8];\n";
  196. frag += "#define gl_TexCoord rubyTexCoord_\n";
  197. frag += frag_;
  198. return frag;
  199. }
  200.  
  201. function compile_xml_shader(vert, frag) {
  202. var vert_s = null;
  203. var frag_s = null;
  204.  
  205. if (vert) {
  206. vert_s = gl.createShader(gl.VERTEX_SHADER);
  207. gl.shaderSource(vert_s, transform_vert(vert));
  208. gl.compileShader(vert_s);
  209. if (!gl.getShaderParameter(vert_s, gl.COMPILE_STATUS)) {
  210. alert(gl.getShaderInfoLog(vert_s));
  211. return;
  212. }
  213. } else {
  214. vert_s = getShader("vertex_shader");
  215. }
  216.  
  217. if (frag) {
  218. frag_s = gl.createShader(gl.FRAGMENT_SHADER);
  219. gl.shaderSource(frag_s, transform_frag(frag));
  220. gl.compileShader(frag_s);
  221. if (!gl.getShaderParameter(frag_s, gl.COMPILE_STATUS)) {
  222. alert(gl.getShaderInfoLog(frag_s));
  223. return;
  224. }
  225. } else {
  226. frag_s = getShader("fragment_shader");
  227. }
  228.  
  229. gl.deleteProgram(prog);
  230. prog = gl.createProgram();
  231. gl.attachShader(prog, vert_s);
  232. gl.attachShader(prog, frag_s);
  233. gl.linkProgram(prog);
  234. if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
  235. alert(gl.getProgramInfoLog(prog));
  236. return;
  237. }
  238.  
  239. prog.vert = vert_s;
  240. prog.frag = frag_s;
  241.  
  242. gl.useProgram(prog);
  243. prog.vert_attr = gl.getAttribLocation(prog, "rubyVertex");
  244. prog.tex_attr = gl.getAttribLocation(prog, "rubyTexCoord");
  245. gl.enableVertexAttribArray(prog.vert_attr);
  246. gl.enableVertexAttribArray(prog.tex_attr);
  247. gl.uniform1i(gl.getUniformLocation(prog, "rubyTexture"), 0);
  248. gl.vertexAttribPointer(prog.tex_attr, 2, gl.FLOAT, false, 4 * 4, 0 * 4);
  249. gl.vertexAttribPointer(prog.vert_attr, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
  250. }
  251.  
  252. function load_text(evt) {
  253. if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
  254. alert("FileReader API not supported by this browser ...");
  255. return;
  256. }
  257.  
  258. if (!window.DOMParser) {
  259. alert("No XML parser found :(");
  260. return;
  261. }
  262.  
  263. var file = evt.target.files[0];
  264. if (!file.name.match("\\.shader$")) {
  265. alert("Not an XML shader!");
  266. return;
  267. }
  268.  
  269. var reader = new FileReader();
  270. reader.onload =
  271. function(e) {
  272. var xml = parse_xml(e.target.result);
  273. var output = document.getElementById("text_output");
  274. output.innerHTML = "";
  275.  
  276. if (xml.vert != null) {
  277. output.innerHTML += '<textarea cols="50" rows="10" style="font-family:monospace">'
  278. + xml.vert + '</textarea>';
  279. }
  280. if (xml.frag != null) {
  281. output.innerHTML += '<textarea cols="50" rows="10" style="font-family:monospace">'
  282. + xml.frag + '</textarea>';
  283. }
  284.  
  285. try {
  286. compile_xml_shader(xml.vert, xml.frag);
  287. } catch (e) {
  288. alert(e);
  289. }
  290. }
  291.  
  292. reader.readAsText(file);
  293. }
  294.  
  295. document.getElementById("image_file").addEventListener('change', load_image, false);
  296. document.getElementById("shader_file").addEventListener('change', load_text, false);
  297.  
  298. var prog;
  299. function initShaders() {
  300. prog = gl.createProgram();
  301. prog.frag = getShader("fragment_shader");
  302. prog.vertex = getShader("vertex_shader");
  303. gl.attachShader(prog, prog.frag);
  304. gl.attachShader(prog, prog.vertex);
  305. gl.linkProgram(prog);
  306.  
  307. if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
  308. alert("Failed to init shader!");
  309. }
  310.  
  311. gl.useProgram(prog);
  312. prog.vert_attr = gl.getAttribLocation(prog, "rubyVertex");
  313. prog.tex_attr = gl.getAttribLocation(prog, "rubyTexCoord");
  314. gl.enableVertexAttribArray(prog.vert_attr);
  315. gl.enableVertexAttribArray(prog.tex_attr);
  316. gl.uniform1i(gl.getUniformLocation(prog, "rubyTexture"), 0);
  317.  
  318. gl.enable(gl.TEXTURE_2D);
  319. texture_ = gl.createTexture();
  320. texture_.image = new Image();
  321. texture_.image.width = 0;
  322. texture_.image.height = 0;
  323. gl.bindTexture(gl.TEXTURE_2D, texture_);
  324. }
  325.  
  326. var vert_buf;
  327. function initBuffers() {
  328. vert_buf = gl.createBuffer();
  329. gl.bindBuffer(gl.ARRAY_BUFFER, vert_buf);
  330.  
  331. var coords = [
  332. // TEX // VERT
  333. 0.0, 0.0, -1.0, 1.0,
  334. 1.0, 0.0, 1.0, 1.0,
  335. 0.0, 1.0, -1.0, -1.0,
  336. 1.0, 1.0, 1.0, -1.0,
  337. ];
  338. coords.size = 4;
  339.  
  340. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
  341. gl.vertexAttribPointer(prog.tex_attr, 2, gl.FLOAT, false, 4 * coords.size, 0 * coords.size);
  342. gl.vertexAttribPointer(prog.vert_attr, 2, gl.FLOAT, false, 4 * coords.size, 2 * coords.size);
  343. }
  344.  
  345. function do_render() {
  346. if (texture_.image.width == 0 && texture_.image.height == 0)
  347. return;
  348.  
  349. var canvas = document.getElementById("test_canvas");
  350. gl.viewportWidth = canvas.width;
  351. gl.viewportHeight = canvas.height;
  352.  
  353. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  354. gl.uniform2f(gl.getUniformLocation(prog, "rubyTextureSize"),
  355. texture_.image.width, texture_.image.height);
  356. gl.uniform2f(gl.getUniformLocation(prog, "rubyInputSize"),
  357. texture_.image.width, texture_.image.height);
  358. gl.uniform2f(gl.getUniformLocation(prog, "rubyOutputSize"),
  359. gl.viewportWidth, gl.viewportHeight);
  360.  
  361. gl.clear(gl.COLOR_BUFFER_BIT);
  362. gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  363. gl.flush();
  364. }
  365.  
  366. function webGLStart() {
  367. try {
  368. var canvas = document.getElementById("test_canvas");
  369. initGL(canvas);
  370. initShaders();
  371. initBuffers();
  372.  
  373. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  374. gl.clearColor(0.0, 0.0, 0.0, 1.0);
  375.  
  376. var f = function() {
  377. window.setTimeout(f, 100);
  378. do_render();
  379. };
  380. f();
  381.  
  382. } catch (e) {
  383. alert(e);
  384. }
  385. }
  386. </script>
  387. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!