| 12 |
- "use strict";(self["webpackChunkludash"]=self["webpackChunkludash"]||[]).push([[88],{7315:function(r,n,e){e.r(n),e.d(n,{default:function(){return c}});e(8675),e(3408),e(4590),e(3462),e(1439),e(7585),e(5315);var a=e(3396),o=e(4870),t={__name:"index",setup(r){const n=(0,o.iH)();function e(r,n,e){var a=r.createShader(n);r.shaderSource(a,e),r.compileShader(a);var o=r.getShaderParameter(a,r.COMPILE_STATUS);if(o)return a;r.deleteShader(a)}function t(r,n,e){var a=r.createProgram();r.attachShader(a,n),r.attachShader(a,e),r.linkProgram(a);var o=r.getProgramParameter(a,r.LINK_STATUS);if(o)return a;r.deleteProgram(a)}function i(r){return Math.floor(Math.random()*r)}function c(r,n,e,a,o){var t=n,i=n+a,c=e,l=e+o;r.bufferData(r.ARRAY_BUFFER,new Float32Array([t,c,i,c,t,l,t,l,i,c,i,l]),r.STATIC_DRAW)}return(0,a.bv)((()=>{const r=n.value.getContext("webgl"),a=e(r,r.VERTEX_SHADER,"\n // 一个属性变量，将会从缓冲中获取数据\n attribute vec2 a_position;\n \n uniform vec2 u_resolution;\n varying vec4 v_color;\n \n void main() {\n // 从像素坐标转换到 0.0 到 1.0\n vec2 zeroToOne = a_position / u_resolution;\n \n // 再把 0->1 转换 0->2\n vec2 zeroToTwo = zeroToOne * 2.0;\n \n // 把 0->2 转换到 -1->+1 (裁剪空间)\n vec2 clipSpace = zeroToTwo - 1.0;\n \n // gl_Position = vec4(clipSpace, 0, 1);\n\n gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n v_color = gl_Position * 0.5 + 0.5;\n\n }\n "),o=e(r,r.FRAGMENT_SHADER,"\n // 片段着色器没有默认精度，所以我们需要设置一个精度\n // mediump是一个不错的默认值，代表“medium precision”（中等精度）\n precision mediump float;\n\n uniform vec4 u_color;\n\n varying vec4 v_color;\n\n void main() {\n // gl_FragColor = u_color;\n gl_FragColor = u_color;\n }\n ");var l=t(r,a,o),u=(r.getAttribLocation(l,"a_position"),r.getUniformLocation(l,"u_resolution")),s=r.createBuffer();r.bindBuffer(r.ARRAY_BUFFER,s),r.bufferData(r.ARRAY_BUFFER,new Float32Array([0,0,0,100,100,0,500,0,500,100,400,0]),r.STATIC_DRAW),r.useProgram(l),r.enableVertexAttribArray(u),r.uniform2f(u,r.canvas.width,r.canvas.height),window.webglUtils.resizeCanvasToDisplaySize(r.canvas),r.viewport(0,0,r.canvas.width,r.canvas.height),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT);var v=2,d=r.FLOAT,f=!1,_=0,g=0;r.vertexAttribPointer(u,v,d,f,_,g);var h=r.TRIANGLES;r.drawArrays(h,0,100);for(var m=r.getUniformLocation(l,"u_color"),A=0;A<50;++A)c(r,i(300),i(300),i(300),i(300)),r.uniform4f(m,Math.random(),Math.random(),Math.random(),1),r.drawArrays(r.TRIANGLES,0,6)})),(r,e)=>((0,a.wg)(),(0,a.iD)("div",null,[(0,a._)("canvas",{ref_key:"canvas",ref:n,id:"canvas",width:"500",height:"500"},null,512),((0,a.wg)(),(0,a.j4)((0,a.LL)("script"),{src:"https://webglfundamentals.org/webgl/resources/webgl-utils.js"}))]))}};const i=t;var c=i}}]);
- //# sourceMappingURL=webgl.12cc3182.js.map
|
