31:T4cc,fragmentShaderKernel = glsl({title:'fragment shader kernel'})`#version 300 es precision mediump float; // out texture uniform sampler2D u_image; // the convolution kernel data uniform float u_kernel[9]; uniform float u_kernelWeight; // the texCoords passed in from the vertex shader in vec2 v_texCoord; // declare an output for fragment shader out vec4 outColor; void main(){ vec2 onePixel = vec2(1) / vec2(textureSize(u_image, 0)); vec4 colorSum = texture(u_image, v_texCoord + onePixel * vec2(-1, -1)) * u_kernel[0] + texture(u_image, v_texCoord + onePixel * vec2( 0, -1)) * u_kernel[1] + texture(u_image, v_texCoord + onePixel * vec2( 1, -1)) * u_kernel[2] + texture(u_image, v_texCoord + onePixel * vec2(-1, 0)) * u_kernel[3] + texture(u_image, v_texCoord + onePixel * vec2( 0, 0)) * u_kernel[4] + texture(u_image, v_texCoord + onePixel * vec2( 1, 0)) * u_kernel[5] + texture(u_image, v_texCoord + onePixel * vec2(-1, 1)) * u_kernel[6] + texture(u_image, v_texCoord + onePixel * vec2( 0, 1)) * u_kernel[7] + texture(u_image, v_texCoord + onePixel * vec2( 1, 1)) * u_kernel[8] ; outColor = vec4((colorSum / u_kernelWeight).rgb, 1); } `32:T1294,{ const canvas = html`

`; yield canvas; const gl = canvas.getContext('webgl2'); const vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderCode.value) const fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentShaderCode.value) const program = createProgram(gl,vertexShader, fragmentShader); // Tell it to use our program (pair of shaders) gl.useProgram(program); // look up where vertex data needs to go var positionAttrLocation = gl.getAttribLocation(program,'a_position'); var texCoordAttribLocation = gl.getAttribLocation(program,'a_texCoord'); // lookup uniforms var resolutionLocation = gl.getUniformLocation(program, 'u_resolution'); var imageLocation = gl.getUniformLocation(program, 'u_image'); // Create a vertexs array object var vao = gl.createVertexArray(); // make it the one we're currently working with gl.bindVertexArray(vao); // create buffer and put one pixel space rect in it (2 triangles) const positionBuffer = gl.createBuffer(); //Turn on the attribute gl.enableVertexAttribArray(positionAttrLocation); // Bind it to ARRAY_BUFFEE (Array_Buffer = positionBuffer gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell attribute how to get data out of posBuffer var size = 2; var type = gl.FLOAT; var norm = false; var stride = 0; var offset = 0; gl.vertexAttribPointer(positionAttrLocation, size, type, norm, stride, offset) // provide texture coordinates for the rectangle var texCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, ]), gl.STATIC_DRAW); gl.enableVertexAttribArray(texCoordAttribLocation); var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var norm = false; // don't normalize the data var stride = 0; var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer(texCoordAttribLocation,size,type,norm,stride,offset) // Create texture var texture = gl.createTexture(); // make unit 0 the active texture unit // (ie, the unit ) gl.activeTexture(gl.TEXTURE0 + 0); // Bind it to texture unit 0' 2D bind point gl.bindTexture(gl.TEXTURE_2D, texture); // Set the params so we don't need mips, we are not filtering and don't repeat edges gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // Upload image into texture var mipLevel = 0; // the largest mip var internalFormat = gl.RGBA // format we want in the texture var srcFormat = gl.RGBA // format of the data var srcType = gl.UNSIGNED_BYTE // type of supplied data gl.texImage2D(gl.TEXTURE_2D, mipLevel, internalFormat, srcFormat, srcType, image ); // Kernels if(option=='kernel'){ var kernelLocation = gl.getUniformLocation(program, "u_kernel[0]"); var kernelWeightLocation = gl.getUniformLocation(program, "u_kernelWeight"); var edgeDetectKernel = kernelValue; // set the kernel and it's weight gl.uniform1fv(kernelLocation, edgeDetectKernel); gl.uniform1f(kernelWeightLocation, computeKernelWeight(edgeDetectKernel)); } webglUtils.resizeCanvasToDisplaySize(gl.canvas) // Tell webgl how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // bind attributes and buffers gl.bindVertexArray(vao); // Pass in the canvas resolution so we can convert from // pixels top clip space in shader gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height); // Tell the shader to get the texture from texture unit gl.uniform1i(imageLocation, 0); // Bind position buffer gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Set rect same size as image setRectangle(gl, 0, 0, image.width, image.height); // Draw the rectangle var primitiveType = gl.TRIANGLES; var offset = 0; var count = 6; gl.drawArrays(primitiveType, offset, count); invalidation.then(d=>{ gl.deleteProgram(program); gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); }) }33:T6d7,kernels = ({ normal: [ 0, 0, 0, 0, 1, 0, 0, 0, 0, ], gaussianBlur: [ 0.045, 0.122, 0.045, 0.122, 0.332, 0.122, 0.045, 0.122, 0.045, ], gaussianBlur2: [ 1, 2, 1, 2, 4, 2, 1, 2, 1, ], gaussianBlur3: [ 0, 1, 0, 1, 1, 1, 0, 1, 0, ], unsharpen: [ -1, -1, -1, -1, 9, -1, -1, -1, -1, ], sharpness: [ 0, -1, 0, -1, 5, -1, 0, -1, 0, ], sharpen: [ -1, -1, -1, -1, 16, -1, -1, -1, -1, ], edgeDetect: [ -0.125, -0.125, -0.125, -0.125, 1, -0.125, -0.125, -0.125, -0.125, ], edgeDetect2: [ -1, -1, -1, -1, 8, -1, -1, -1, -1, ], edgeDetect3: [ -5, 0, 0, 0, 0, 0, 0, 0, 5, ], edgeDetect4: [ -1, -1, -1, 0, 0, 0, 1, 1, 1, ], edgeDetect5: [ -1, -1, -1, 2, 2, 2, -1, -1, -1, ], edgeDetect6: [ -5, -5, -5, -5, 39, -5, -5, -5, -5, ], sobelHorizontal: [ 1, 2, 1, 0, 0, 0, -1, -2, -1, ], sobelVertical: [ 1, 0, -1, 2, 0, -2, 1, 0, -1, ], previtHorizontal: [ 1, 1, 1, 0, 0, 0, -1, -1, -1, ], previtVertical: [ 1, 0, -1, 1, 0, -1, 1, 0, -1, ], boxBlur: [ 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, ], triangleBlur: [ 0.0625, 0.125, 0.0625, 0.125, 0.25, 0.125, 0.0625, 0.125, 0.0625, ], emboss: [ -2, -1, 0, -1, 1, 1, 0, 1, 2, ], })34:T723,glsl = function glslLoc(options){ let opt = options||{}; const interpolate = (strings, ...args) => { let s = ''; for (let i = 0; i < strings.length; i++) { s += strings[i]; if (i < args.length && args[i]) s += String(args[i]); } return s; }; const ID = 'glsl-styles'; const style = html`