ShaderToy上后处理练习4——边缘检测

最新推荐文章于 2024-07-03 21:07:32 发布
最新推荐文章于 2024-07-03 21:07:32 发布
阅读量536 收藏
点赞数 1
分类专栏： 计算机图形学 后处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jmxin422/article/details/117852127
版权

边缘检测

主要参考，或者说就是照着著名大佬QianMo的后处理教程写的，不过他是在Unity里面实现的，作为一个高品质后处理插件，然后本人是在ShaderToy上实现的，当然我都是在复现大佬的代码，推荐大家去读大佬的文章，地址：https://github.com/QianMo/GPU-Gems-Book-Source-Code
强烈安利！！！！

Edge Detection Sobel

Common

#define _EdgeColor vec4(1., 0., 0., 1.)
#define _BackgroundColor vec4(0., 1., 0., 1.)
#define _EdgeWidth (1.)
#define _BackgroundFade (0.3)

float intensity(in vec4 color)
{
    return sqrt((color.x * color.x) + (color.y * color.y) + (color.z * color.z));
}

Image

float sobel(float stepx, float stepy, vec2 center)
{
    // get samples around pixel
    float topLeft = intensity(texture(iChannel0, center + vec2(-stepx, stepy)));
    float midLeft = intensity(texture(iChannel0, center + vec2(-stepx, 0)));
    float bottomLeft = intensity(texture(iChannel0, center + vec2(-stepx, -stepy)));
    float midTop = intensity(texture(iChannel0, center + vec2(0, stepy)));
    float midBottom = intensity(texture(iChannel0, center + vec2(0, -stepy)));
    float topRight = intensity(texture(iChannel0, center + vec2(stepx, stepy)));
    float midRight = intensity(texture(iChannel0, center + vec2(stepx, 0)));
    float bottomRight = intensity(texture(iChannel0, center + vec2(stepx, -stepy)));

    // Sobel masks (see http://en.wikipedia.org/wiki/Sobel_operator)
    //        1 0 -1     -1 -2 -1
    //    X = 2 0 -2  Y = 0  0  0
    //        1 0 -1      1  2  1

    // Gx = sum(kernelX[i][j]*image[i][j])
    float Gx = topLeft + 2.0 * midLeft + bottomLeft - topRight - 2.0 * midRight - bottomRight;
    // Gy = sum(kernelY[i][j]*image[i][j]);
    float Gy = -topLeft - 2.0 * midTop - topRight + bottomLeft + 2.0 * midBottom + bottomRight;
    float sobelGradient = sqrt((Gx * Gx) + (Gy * Gy));
    return sobelGradient;
}


vec3 EdgeDetectionSobel(vec2 uv)
{
    vec4 col = texture(iChannel0, uv);
    float sobelGradient = sobel(_EdgeWidth / iResolution.x, _EdgeWidth / iResolution.y, uv);
    vec4 back_col = mix(col, _BackgroundColor, _BackgroundFade);
    vec3 edge_col = mix(back_col.rgb, _EdgeColor.rgb, sobelGradient);
    return edge_col;
    
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = EdgeDetectionSobel(uv);

    // Output to screen
    fragColor = vec4(col,1.0);
}

结果

在这里插入图片描述

Edge Detection Sobel Neon

Common

#define _EdgeColor vec4(1., 0., 0., 1.)
#define _BackgroundColor vec4(0., 1., 0., 1.)
#define _EdgeWidth (5.)
#define _BackgroundFade (0.5)
#define _Brigtness (1.1)

float intensity(in vec4 color)
{
    return sqrt((color.x * color.x) + (color.y * color.y) + (color.z * color.z));
}

Image

float sobel(float stepx, float stepy, vec2 center)
{
    // get samples around pixel
    float topLeft = intensity(texture(iChannel0, center + vec2(-stepx, stepy)));
    float midLeft = intensity(texture(iChannel0, center + vec2(-stepx, 0)));
    float bottomLeft = intensity(texture(iChannel0, center + vec2(-stepx, -stepy)));
    float midTop = intensity(texture(iChannel0, center + vec2(0, stepy)));
    float midBottom = intensity(texture(iChannel0, center + vec2(0, -stepy)));
    float topRight = intensity(texture(iChannel0, center + vec2(stepx, stepy)));
    float midRight = intensity(texture(iChannel0, center + vec2(stepx, 0)));
    float bottomRight = intensity(texture(iChannel0, center + vec2(stepx, -stepy)));

    // Sobel masks (see http://en.wikipedia.org/wiki/Sobel_operator)
    //        1 0 -1     -1 -2 -1
    //    X = 2 0 -2  Y = 0  0  0
    //        1 0 -1      1  2  1

    // Gx = sum(kernelX[i][j]*image[i][j])
    float Gx = topLeft + 2.0 * midLeft + bottomLeft - topRight - 2.0 * midRight - bottomRight;
    // Gy = sum(kernelY[i][j]*image[i][j]);
    float Gy = -topLeft - 2.0 * midTop - topRight + bottomLeft + 2.0 * midBottom + bottomRight;
    float sobelGradient = sqrt((Gx * Gx) + (Gy * Gy));
    return sobelGradient;
}


vec3 EdgeDetectionSobel(vec2 uv)
{
    vec4 col = texture(iChannel0, uv);
    float sobelGradient = sobel(_EdgeWidth / iResolution.x, _EdgeWidth / iResolution.y, uv);
    vec4 back_col = mix(col, _BackgroundColor, _BackgroundFade);
    vec3 edge_col = mix(back_col.rgb, col.rgb, sobelGradient);
    return edge_col * _Brigtness;
    
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = EdgeDetectionSobel(uv);

    // Output to screen
    fragColor = vec4(col,1.0);
}

结果

在这里插入图片描述

Edge Detection Roberts

Common

#define _EdgeColor vec4(1., 0., 0., 1.)
#define _BackgroundColor vec4(0., 1., 0., 1.)
#define _EdgeWidth (5.)
#define _BackgroundFade (0.5)
#define _Brigtness (1.1)

float intensity(in vec4 color)
{
    return sqrt((color.x * color.x) + (color.y * color.y) + (color.z * color.z));
}

Image

float sobel(float stepx, float stepy, vec2 center)
{
    // get samples around pixel
    float topLeft = intensity(texture(iChannel0, center + vec2(-stepx, stepy)));
    float bottomLeft = intensity(texture(iChannel0, center + vec2(-stepx, -stepy)));
    float topRight = intensity(texture(iChannel0, center + vec2(stepx, stepy)));
    float bottomRight = intensity(texture(iChannel0, center + vec2(stepx, -stepy)));

    // Roberts Operator
    //X = -1   0      Y = 0  -1
    //     0   1          1   0
        
    // Gx = sum(kernelX[i][j]*image[i][j])
    float Gx = -1.0 * topLeft + 1.0 * bottomRight;

    // Gy = sum(kernelY[i][j]*image[i][j]);
    float Gy = -1.0 * topRight + 1.0 * bottomLeft;
    
    float sobelGradient = sqrt((Gx * Gx) + (Gy * Gy));
    return sobelGradient;
}


vec3 EdgeDetectionSobel(vec2 uv)
{
    vec4 col = texture(iChannel0, uv);
    float sobelGradient = sobel(_EdgeWidth / iResolution.x, _EdgeWidth / iResolution.y, uv);
    vec4 back_col = mix(col, _BackgroundColor, _BackgroundFade);
    vec3 edge_col = mix(back_col.rgb, _EdgeColor.rgb, sobelGradient);
    return edge_col * _Brigtness;
    
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = EdgeDetectionSobel(uv);

    // Output to screen
    fragColor = vec4(col,1.0);
}

结果

在这里插入图片描述

Edge Detection Scharr

Common

#define _EdgeColor vec4(1., 0., 0., 1.)
#define _BackgroundColor vec4(0., 1., 0., 1.)
#define _EdgeWidth (5.)
#define _BackgroundFade (0.5)
#define _Brigtness (1.1)

float intensity(in vec4 color)
{
    return sqrt((color.x * color.x) + (color.y * color.y) + (color.z * color.z));
}

Image

float sobel(float stepx, float stepy, vec2 center)
{
    // get samples around pixel
    float topLeft = intensity(texture(iChannel0, center + vec2(-stepx, stepy)));
    float midLeft = intensity(texture(iChannel0, center + vec2(-stepx, 0)));
    float bottomLeft = intensity(texture(iChannel0, center + vec2(-stepx, -stepy)));
    float midTop = intensity(texture(iChannel0, center + vec2(0, stepy)));
    float midBottom = intensity(texture(iChannel0, center + vec2(0, -stepy)));
    float topRight = intensity(texture(iChannel0, center + vec2(stepx, stepy)));
    float midRight = intensity(texture(iChannel0, center + vec2(stepx, 0)));
    float bottomRight = intensity(texture(iChannel0, center + vec2(stepx, -stepy)));

    // scharr masks ( http://en.wikipedia.org/wiki/Sobel_operator#Alternative_operators)
    //        3 0 -3        3 10   3
    //    X = 10 0 -10  Y = 0  0   0
    //        3 0 -3        -3 -10 -3

    // Gx = sum(kernelX[i][j]*image[i][j]);
    float Gx = 3.0* topLeft + 10.0 * midLeft + 3.0 * bottomLeft -3.0* topRight - 10.0 * midRight - 3.0* bottomRight;
    // Gy = sum(kernelY[i][j]*image[i][j]);
    float Gy = 3.0 * topLeft + 10.0 * midTop + 3.0 * topRight -3.0* bottomLeft - 10.0 * midBottom -3.0* bottomRight;

    float scharrGradient = sqrt((Gx * Gx) + (Gy * Gy));
    return scharrGradient;
}


vec3 EdgeDetectionSobel(vec2 uv)
{
    vec4 col = texture(iChannel0, uv);
    float sobelGradient = sobel(_EdgeWidth / iResolution.x, _EdgeWidth / iResolution.y, uv);
    vec4 back_col = mix(col, _BackgroundColor, _BackgroundFade);
    vec3 edge_col = mix(back_col.rgb, col.rgb, sobelGradient);
    return edge_col * _Brigtness;
    
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = EdgeDetectionSobel(uv);

    // Output to screen
    fragColor = vec4(col,1.0);
}

结果

Image( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = EdgeDetectionSobel(uv);

    // Output to screen
    fragColor = vec4(col,1.0);
}

在这里插入图片描述

JMXIN422
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
边缘检测（各类边缘算子）以及角点检测 python
12-21
边缘检测： 1.Roberts算子 2.Prewitt算子 3.Sobel算子 4.Laplacian算子 5.Canny函数 代码如下： import cv2 import numpy as np import matplotlib.pyplot as plt image = cv2.imread('lenna.jpg', cv2.IMREAD_GRAYSCALE) cv2.imshow('origin', image) h, w = image.shape # 获取图像的高度和宽度 # Roberts算子 kernelx = np.array([[-1, 0], [0, 1]], dt
opencv 边缘检测练习
qq_15025505的博客
04-04 145
#include<opencv2/opencv.hpp>  #include<iostream>  #include<stdint.h>using namespace std;using namespace cv;void conv2D(InputArray src, InputArray kernel, OutputArray dst, int ddepth,...
【Threejs进阶教程-着色器篇】1. Shader入门(ShadertoyShader和ThreejsShader入门)
最新发布
qq_42760477的博客
07-03 1225
【Threejs进阶教程-着色器篇】1. Shader入门，本文主要对 Threejs的Shader和Shadertoy做了简单的介绍，后续会编写更多的Shader效果案例，欢迎大家持续关注
【Shader】ShaderToy通用模板
Zok93
12-11 1184
代码参考CandyCat妹纸的文章，自己拿过来做个记录，方便查询【链接】Shader "Shadertoy/Template" { Properties{ iMouse ("Mouse Pos", Vector) = (100, 100, 0, 0) iChannel0("iChannel0", 2D) = "white" {} iCha
【图像处理】sobel算子简述
Image
03-14 1万+
sobel算子是什么在图像处理上，算子一般也可以认为是滤波器filter，滤波器就是在一个像素点上对它进行与邻域之间的运算。如中值滤波，就是在以像素点为中心，上下左右左上左下右上右下为邻域的集合里，如下图所示结构： 中值滤波就是对P1到P9进行排序，然后获取数值大小排在中间的值，把这个值当做该中心像素点P5的新值。而sobel算子，是为了用来计算边缘的，一般而言，以3x3为大小，有下面这两种形
Unity中的ShaderToy
楠溪泽岸的博客
12-11 2356
我们在之前的文章中，学习了很多的Shadar知识。但是，我们没有自己实现一些奇特的效果。而ShaderToy是一个国外的网站，上面刚好有很多Shader大神实现的效果，提供给我们借鉴。我们在这篇文章中了解一下ShaderToy。
（十）unity Shader之——————屏幕后处理效果（边缘检测）
cgy56191948的博客
09-12 1508
提醒：本文章用到的后处理基类脚本在这篇文章可以找到定义，后续会用此为基类来写： https://blog.csdn.net/cgy56191948/article/details/100665580 下面讲述一个常见的屏幕后处理效果————边缘检测，这是描边效果的一种实现方法，边缘检测的原理是利用一些边缘检测算子对图像进行卷积操作，如下图： 先说一下什么是卷积： 一、什么是卷积 ...
shadertoy-android:适用于 Android 的非官方 Shadertoy 应用
06-23
Shadertoy的核心是基于OpenGL的着色器语言GLSL，它允许开发者在GPU上编写代码，实现复杂的图像处理和实时渲染效果。在Android平台上，GLSL通常通过OpenGL ES（OpenGL for Embedded Systems）接口来使用，这是Android...
webgl shader 边缘检测
03-30
Shader是运行在GPU（图形处理器）上的程序，用于处理像素的颜色和位置信息，它们能够高效地执行复杂的计算，比如边缘检测。 在WebGL中，我们通常使用着色器语言GLSL（OpenGL Shading Language）编写自定义的顶点和...
unity边缘检测Shader
12-13
基于unity引擎编写的边缘检测Shader，绝对真实可用，效果还可以，可以用于学习借鉴
非常方便的 VSCode 的 Shader 插件 —— Shader Toy
ShaderJoy 的兴趣技术杂货铺
02-23 1万+
Visual Studio Code - Shader Toy 这个扩展可以在 VSCode 中查看 GLSL 着色器的 WebGL 实时预览，通过提供 “Show GLSL Preview” 命令可以达到类似于访问 shadertoy.com 的效果。 metaballs example 要运行该命令，可以打开 “Command Palette” 并输入“ Shader...
WebGL-Shader-Editor:简单的基于WebGL的实时片段着色器编辑器，类似于Shadertoy.com
04-19
WebGL Shader编辑器 简单的基于WebGL的实时片段着色器编辑器，类似于Shadertoy.com。
利用matlab编写的soble锐化程序
12-02
基于SOBEL算子的锐化程序，其中mg为锐化后的结果，A为待锐化的图像 % SOBEL算子有水平、垂直、45°、135°等，在此仅编写"水平、垂直"一种，其他类似
Unity中实现ShaderToy卡通火（移植篇）
楠溪泽岸的博客
12-11 1499
在上一篇文章中，我们讲解了基础的ShaderToy怎么转化为Unity中的Shader。我们在这篇文章中，复刻一个复杂的ShaderToy效果卡通火。
【ShaderToy】基础篇之谈谈点、线的绘制
痞子龙3D编程
09-18 1426
写在前面 写前面一篇的时候，发现还是不够基础。因此打算增加几篇基础篇，从点线面开始，希望可以更好理解。 其实用Pixel Shader的过程很像在纸上绘画的过程。屏幕上的每一个像素对应了纸上的一个方格，如果你愿意，你甚至可以一个个判断像素的位置，从而画出任何你想画的图像，也的确有爱好者这么做过。但往往，我们需要的是一个动态的效果，这个效果往往依赖于数学公式的约束
Mali OpenCL SDK v1.1.0 教程样例之六“索贝尔滤波器”
u012129372的专栏
03-31 1353
Sobel图像滤波器是一种简单的卷积滤波器，主要用于边缘检测算法。 样例结果 输入图像 输出图像 算法 　　一种做图像边缘检测的技术是，找出图像的梯度。大梯度值的区域对应图像色彩或密度的剧变区域。典型地，这些区域是边缘。 　　如果你对于幅图像卷积两个Sobel算子，你会得到两个输出：
shadertoy上手指南
热门推荐
寒风的技术博客
09-24 1万+
一 shadertoy是什么下面是维基百科上的定义： Shadertoy.com is a cross-browser online community and tool for creating and sharing shaders through WebGL, used both for learning and teaching 3D computer graphics in a web
计算机视觉中的边缘检测
weixin_34006468的博客
05-09 536
边缘检测是计算机视觉中最重要的概念之一。这是一个很直观的概念，在一个图像上运行图像检测应该只输出边缘，与素描比较相似。我的目标不仅是清晰地解释边缘检测是怎样工作的，同时也提供一个新而又容易的方法只需要最小工作来明显地提高边缘检测。 通过获得这些边缘，许多计算机算法才得以有可能实现，因为在一个场景中边缘包含着绝大部分（至少很多）的信息。 举个例子，我们都记得 Windows XP 的那个绿色...
-04-实时Prewitt边缘检测，第二步：Prewitt的NEON加速实现【ARM NEON加速】
vacajk的博客
03-20 3327
下面进行Prewitt的NEON加速设计，将实现的具体思路描述一下。S0. Prewitt的C语言实现我把Prewitt算子的计算过程按下图重新进行表示： 可以看到该算法主要分为了三个步骤去实现： 1. 像素灰度化，将源图像数像素点的彩色图像转换为灰度值，使用常用的公式：GRAY=(R*77+G*151+G*28)/256 2. x、y方向一阶梯度计算 3. 两个方向梯度均方根计算C代码：uns
shadertoy网站shader转成Unity使用的shader
04-26
4. 将从Shadertoy复制的代码粘贴到Unity的着色器文件中。 5. 根据需要进行适当的调整和修改。由于Shadertoy和Unity使用的着色器语言可能有一些差异，你可能需要根据Unity的着色器语言进行一些调整。 6. 在Unity中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JMXIN422

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值