`
flyfox1982
  • 浏览: 81110 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

WebGL 着色器偏导数dFdx和dFdy介绍

阅读更多

本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。

偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令(函数)。在WebGL中,使用的是dFdx和dFdy,还有另外一个函数fwidth = dFdx + dFdy。

偏导数计算

在三角形栅格化期间,GPU会同时跑片元着色器的多个实例,但并不是一个pixel一个pixel去执行的,而是将其组织在2x2的一组pixels块中并行执行。偏导数就是通过像素块中的变量的差值(变化率)而计算出来的。dFdx表示的是像素块中右边像素的值减去素块中左边像素的值,而dFdy表示的是下面像素的值减去上面像素的值。如下图所示,图中显示的是渲染的屏幕像素,图中红色区域是一个像素块,p(x,y)表示在屏幕空间坐标系中坐标(x,y)的片元(像素)上的某一个变量,图中显示了dFdx和dFdy的计算过程。

偏导数计算偏导数计算

偏导数函数可以用于片元着色器中的任何变量。对于向量和矩阵类型的变量,该函数会计算变量的每一个元素的偏导数。

偏导数函数是纹理mipmaps实现的基础,也能实现一系列算法和效果,特别是哪些依赖于屏幕空间坐标的(比如渲染统一线宽的线框参考我的另外一篇文章:https://www.jianshu.com/p/1a0979a2d972)。

偏导数和mipmaps

Mipmaps用于计算纹理的一些列的子图,每个子图都比前一个的尺寸缩小了2倍。 他们用于在纹理缩小(纹理映射到比自身尺寸小的表面)的时候的去锯齿。
Mipmaps 对于纹理缓存的一致性也很重要,在遍历一个三角形(的片元)的时候,它会强制获取一个最近的像素比例:这个比例保证三角形上的一个像素尽量对应纹理上的一个像素。 Mipmaps是可以同时可视化效果和性能的少数技术之一。
在纹理取样过程中使用偏导数来选择最佳的 mipmap 级数。纹理坐标在屏幕空间中的变化率作为选择mimmap级数的依据,变化率越大,mimap级数越大,反之越小。

面的法线向量计算(flat shader)

偏导数函数可以用来在片元着色器中计算当前面(三角形)的法线向量。当前片元的世界坐标系的水平偏导数和垂直偏导数是两个三角形表面上的两个向量,它们的叉乘结果是一个垂直于表面的向量,该向量的归一化结果就是面的法线向量。需要特别注意的是两个向量的叉乘的顺序。下面是GLSL中通过镜头坐标系中坐标计算面法线向量的代码:

normalize(  cross(dFdx(pos),  dFdy(pos))  );

关于偏导数函数的应用之一可以参考 “WebGL 单通道wireframe渲染”,更多应用将在后续介绍。

参考文档
http://www.aclockworkberry.com/shader-derivative-functions/#footnote_3_1104

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划和程序员理财投资有浓厚兴趣。

ITman彪叔公众号ITman彪叔公众号

0
0
分享到:
评论

相关推荐

    创建播放和分享像素在线WebGL着色器编辑器

    这个项目“创建播放和分享像素在线WebGL着色器编辑器”是一个实用的工具,旨在帮助开发者和设计师在浏览器环境中创建、测试和共享WebGL着色器代码。着色器是运行在GPU上的小程序,用于处理图形渲染,包括光照、纹理...

    WebH5视频滤镜的百搭解决方案-WebGL着色器.docx

    本文将详细介绍一种新的解决方案——WebGL着色器,它能够帮助开发者实现几乎任何类型的视频滤镜效果。 #### 二、问题概述及传统方法局限性 ##### 2.1 CSS3滤镜的局限性 在讨论WebGL着色器之前,我们首先回顾一下...

    轻量级WebGL着色器助手_JavaScript_下载.zip

    "轻量级WebGL着色器助手"是一个JavaScript库,旨在简化WebGL中着色器的创建、管理和调试过程,使得WebGL编程更加便捷。 着色器是WebGL的核心组成部分,分为顶点着色器(Vertex Shader)和片段着色器(Fragment ...

    WebGL着色器——数组

    在WebGL的上下文中,着色器分为两种主要类型:顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)。这些着色器程序可以使用类似于C语言的语法,其中就包括对数组的支持。本文将深入探讨WebGL着色器中的...

    用于混合网格粒子流体模拟的WebGL着色器_TypeScript.zip

    2. **着色器语言GLSL**:GLSL(OpenGL Shading Language)是WebGL的核心组成部分,用于编写顶点着色器和片段着色器。这些着色器运行在GPU上,处理图形管线中的计算任务,如顶点变换、光照计算和颜色渲染。 3. **...

    gl-shader-config:使用数据结构配置 WebGL 着色器状态

    gl-shader-config(实验性) 使用简单的数据结构对象配置 WebGL 着色器的状态。 轻松绑定、绘制和解绑。 该模块隐藏了底层 WebGL API 的冗长性,但保留了如何处理应用程序中数据的表达方式。如何使用: require('gl-...

    ShaderEditor:实时 GLSL WebGL 着色器编辑器

    实时 WebGL 着色器编辑器 这是一个 JavaScript 库,旨在提供与Firefox DevTools Shader Editor相同的功能:在浏览器中实时修改着色器的源代码,无需重新加载,易于包含且完全与实现无关。 使用函数钩子修改...

    shader-gradients:一个 HTML5 页面,它使用在 GPU 上运行的 Three.js 和 webGL 着色器在浏览器中创建动画渐变效果

    WebGL着色器是运行在GPU上的小程序,分为顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)。顶点着色器处理场景中的每个顶点,而片段着色器则负责渲染像素颜色。在这个项目中,主要涉及的是片段着色器,...

    WebGL 开发介绍.zip

    2. 着色器语言:WebGL使用GLSL(OpenGL Shading Language)编写着色器程序,控制顶点和像素的处理。 3. 模型加载:WebGL可以加载和解析3D模型文件,如OBJ或GLTF格式。 4. 帧缓冲和深度测试:WebGL支持帧缓冲对象和...

    WebGL编程指南PDF和源码

    在“WebGL编程指南”中,你将学习到WebGL的基本概念和核心原理,包括如何在Web页面上设置和初始化WebGL上下文,理解顶点、着色器、缓冲区以及纹理等关键概念。这本书可能涵盖以下几个重要知识点: 1. **WebGL上下文...

    基于Caputo-Fabrizio偏导数定义的边缘检测Edge Detection using partial derivati

    一、Caputo-Fabrizio偏导数介绍 Caputo-Fabrizio偏导数是分数阶微积分的一个变种,由Michele Caputo和Giovanni Fabrizio提出。与经典的Riemann-Liouville导数相比,C-F导数具有更简单的形式,更适合处理非局部和非...

    webglsl:Eclipse 的 WebGL 着色器语言插件-开源

    而着色器语言(Shader Language),通常指的是 GLSL(OpenGL Shading Language),在 WebGL 中扮演着至关重要的角色,它允许开发者编写自定义的顶点和片段着色器,实现细腻的视觉效果。 Eclipse 是一个著名的开源...

    harmonyos2-Project5-WebGL:WebGL着色器简介

    的世界:顶点着色和片段着色。 该项目的第一部分是图像处理器,该项目的第二部分是波浪顶点着色器。 在本项目的第一部分,您将实现 GLSL 顶点着色器作为 WebGL 演示的一部分。 您将使用完全在 GPU 上运行的代码创建...

    gl-shader::wrapped_gift: WebGL 着色器包装器

    WebGL 着色器的包装器。 例子 现在在您的浏览器中尝试一下: : var shell = require ( 'gl-now' ) ( ) var createShader = require ( 'gl-shader' ) var shader , buffer shell . on ( 'gl-init' , function ( ) ...

    ConwayShader:WebGL着色器,用于Conway的生活游戏

    Shader,是WebGL中处理图形的关键部分,分为顶点着色器和片段着色器。顶点着色器负责处理场景中的几何形状,而片段着色器则专注于每个像素的颜色计算。在康威Shader中,片段着色器被用来模拟康威生活的规则,每个...

    FluidSimulation:WebGL着色器,用于混合的网格-粒子流体模拟

    WebGL着色器,用于混合的网格-粒子流体模拟。 现场演示,为 。 该仿真解决了GPU片段着色器中不可压缩流体的。 在基于网格的流体模拟之上,有成千上万的,这些跟随流体流动并在它们运动时创建半透明的轨迹。 为了...

    WebGL-water

    开发者可以通过顶点着色器和片段着色器来定义物体的形状和颜色,这些着色器是用类似于C的语言GLSL(OpenGL Shading Language)编写的。 在WebGL-water项目中,核心部分是水波纹的生成和动画。这通常涉及到数学和...

    WEBGL_webgl_

    WebGL渲染管线分为顶点着色器和片段着色器两部分,它们是GLSL(OpenGL Shading Language)编写的程序,运行在GPU上。 2. **顶点着色器**:负责处理图形的几何信息,如位置、颜色、纹理坐标等,将3D模型转换为2D屏幕...

    WebGL Beginner's Guide

    5. **着色器语言GLSL**:深入探讨GLSL(OpenGL Shading Language),这是编写WebGL着色器的语言。讲解顶点着色器和片段着色器的语法,以及它们在渲染管道中的作用。 6. **矩阵操作**:介绍投影、模型和视图变换矩阵...

    webgl ppt 示例 代码

    3. **着色器**:WebGL使用两种类型的着色器:顶点着色器和片段着色器。顶点着色器处理每个顶点,而片段着色器处理像素颜色。GLSL是用于编写着色器的语言,它允许我们在GPU上执行计算。 4. **矩阵运算**:在3D图形中...

Global site tag (gtag.js) - Google Analytics