WebGL高级进阶之路-滤镜grayscale实现

最新推荐文章于 2024-07-24 17:16:40 发布
最新推荐文章于 2024-07-24 17:16:40 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： webgl 文章标签： webgl grayscale 直播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_xpw/article/details/78058432
版权
本文探讨WebGL中的核心着色器——顶点着色器和片元着色器，重点讲解如何使用它们来实现颜色效果，特别是创建灰度滤镜。通过示例代码展示HTML和JavaScript的应用，帮助读者理解WebGL滤镜的实现过程。
摘要由CSDN通过智能技术生成

前言

WebGL比较核心的两大着色器, 顶点着色器、片元着色器, 它俩肩负重任。顶点着色器负责顶点的坐标位置、大小定义, 片元着色器负责颜色效果。

  • 先看看我们要实现的效果, 开下胃（奸笑~~）

这里写图片描述

  • HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div style="float: left; margin-right: 10px">
    <img src="../../resources/keepUp.png">
</div>
<!--这是图片的大小。原图原比例画图-->
<canvas id="webgl" width="431" height="335" style="background-color: #0d72da"></canvas
最低0.47元/天 解锁文章
csdn_xpw
关注
专栏目录
webgl 2.0 camera
04-06
WebGL成像采用的是虚拟相机模型。在场景中你通过模型变换，将物体放在场景中不同位置后，最终哪些部分需要成像，显示在屏幕上，主要由视变换和后面要介绍的投影变换、视口变换等决定。其中视变换阶段，通过假想的相机来处理矩阵计算能够方便处理。对于WebGL来说并不存在真正的相机，所谓的相机坐标空间(camera space 或者eye space)只是为了方便处理，而引入的坐标空间。
webgl滤镜--会呼吸的痛
weixin_34122548的博客
10-29 190
我们一起来完成一个webgl的滤镜效果，可能有的人会问？为什么要叫会呼吸的痛呢？没有为什么，因为刚睡醒 闲言少叙让我们直接看一下效果。 是的，上面就是我们要实现的效果，不是整张图片全部做一个滤镜效果，而是在图片的左上角做一个呼吸的红色渐变效果。 我们分三步完成这个效果，第一步把图片显示出来，也就是没有滤镜效果的图片显示出来。 第二步为整张图片做一个红色的滤镜效果。 第三步为局部做一个呼吸的红...
《WebGL编程指南》学习笔记 01、着色器获取js数据
最新发布
公子我姓柯
07-24 928
WebGL 着色器获取js数据
WebGL实现的一个Depth Blur(深度模糊/或景深模糊)的动态效果
vily_lei的专栏
07-30 2750
demo:http://www.artvily.com/sample?sample=depthBlur 移动端Demo:http://www.artvily.com/sample?sample=depthBlur3 实现原理: 在渲染到贴图(RTT)的过程记录下深度值(最好用float texture format)，然后不同的深度取不同的模糊值(这里只做了距离摄像机越远，越模糊)，这里...
webgl 第三人称相机
七岁
12-18 1014
发现自己越来越懒了。。。基础的我不写了，有很多博客都写了，连w3c都有，瞬间没有心思写下去了，并且也很忙；每天都在研究；别骂我。。。真心没心思；我会考虑写一些难度大点的，这样有动力点； 代码如下： 看下面需要注意的是向量的计算， &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF...
WebGL Shader着色器GLSL语言
weixin_45086164的博客
08-04 1544
WebGL Shader着色器GLSL语言
【开发工具】UnitySetup-WebGL-Support-for-Editor-5.3.8f2.exe
12-18
用于打包WebGL的插件，下载之后默认安装即可，很好用。
UnitySetup-WebGL-Support-for-Editor-2018.3.7f1.exe
03-01
给 untiy 3d 提供 webgl 支持的工具 WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以...
webgl函数库（cuon-matrix、cuon-utils、webgl-debug、webgl-utils）
10-02
本篇将详细介绍四个与WebGL相关的函数库——cuon-matrix、cuon-utils、webgl-debug以及webgl-utils，它们是WebGL开发中的常用工具，极大地简化了WebGL编程。 1. cuon-matrix： cuon-matrix是一个专门处理矩阵运算...
OpenGL/WebGL着色器开发入门指南
新缸中之脑
07-07 784
学习编写图形着色器就是学习利用 GPU 的强大功能，它的数千个内核全部并行运行。这是一种需要不同思维方式的编程，但其巨大的潜力值得开始时的投入。几乎你看到的每一个现代图形模拟都以某种方式由为 GPU 编写的代码提供支持，从尖端 AAA 游戏中的逼真照明效果到 2D 后处理效果和流体模拟。 Minecraft 中的一个场景，在应用一些着色器前后。着色器编程有时会成为一种神秘的黑魔法，并且经常被误解。有很多代码示例向您展示如何创建令人难以置信的效果，但很少或根本没有提供任何解释。本指南旨在弥合这一差距。我将更多
webgl进阶Shader篇（基于Three.js）——第一个简单的Shader
热门推荐
niuge8905的博客
05-05 1万+
    Three.js已经简化了很多写shader的工作，最主要的工作就是他把一些常用的矩阵已经作为一个常量提供给我们。    首先来看Three.js官网的说明，一些常用参数已经和几何元素、相机等关联在一起，我们只需要拿来用即可。    来看第一个shader，通过shader改变几何体表面的颜色，效果还是很炫酷的。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...
学习WebGL_011_嵌套纹理、雪碧图、视频纹理
qq_21476953的博客
10-23 623
作者: DSLMing 时间: 2019.10.23 参考: FunWithWebGL2 014 Texture Masks FunWithWebGL2 015 Texture Atlas 一、嵌套纹理 指定纹理的位置,从而将2张纹理组合成一个新的纹理。 例如,有纹理A: 还有纹理B: 最终组合为: 1、片元代码 precision mediump float; uniform samp...
WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
点燃火柴的博客
04-19 828
立方体雾化效果1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值4. demo代码5. 使用gl_Position的w分量 1. demo效果 如上图，可以通过向上/向下键盘控制雾化的距离 2.相关知识点 2.1 雾化相关概念 雾化的方式有很多种，这里使用最简单方式：线性雾化,在这里介绍一些相关概念 视点 查看物体的眼睛(摄像机) 雾化的 起点 表示开始雾化之处 雾化的
Webgl 练习记录 log 贴图 滤镜
lemossrkilakila
07-19 1769
Webgl 练习记录 log 贴图 滤镜
Web变灰-grayscale
qq_25834201的博客
12-05 183
Web变灰，grayscale
webgl 系列 —— 着色器语言
2301_76725413的博客
07-22 753
GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。逻辑异或，只有左右两个表达式有且只有一个为 true 时，运算结果才为 true，否则是 false。类似 js 中的对象，访问也是通过 .。由于基本类型就三种（int、float、bool），所以类型转化也较js简单多了，共 6 种。: 变量的命名就按照js的习惯来就好，如果有问题，浏览器会给出较好的错误提示。矢量和矩阵类型的变量包含多个元素，每个元素是一个数值（整型、浮点、布尔）。
WebGL Shader
张琳的博客
05-21 1479
shdertoy上的动态黄昏图 看效果 外加两张shader里用到的图片 下面是shader代码，在webgl可以运行，在three也可以 <script id="vertexshader" type="x-shader/x-vertex"> attribute vec3 A_position3; attribute vec2 A_uv; uniform mat4 mvp; varying vec2 out_uv; void main(void){
7.WebGL+Shader纹理应用
code for life
06-08 220
纹理映射能为图像添加上皮肤，将一张图片或者图像映射到几何图形上，其作用是根据纹理图像，为之前光栅化的每个片元涂上颜色 (组成纹理图像的像素又被称为纹素)
WebGL进阶：动态变量与缓冲区应用
为了实现这些，你需要熟练掌握WebGL提供的API，如`gl.drawArrays`、`gl.drawElements`等，以及如何设置渲染状态。 WebGL学习的关键在于掌握变量的声明与传递、缓冲区的管理以及各种图形绘制方法。理解这些基础概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值