-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathIVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html
1 lines (1 loc) · 89.7 KB
/
IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html
1
<!doctype html><html class="theme-next mist"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="google-site-verification" content="PBwskePkFkRAnqisXEBN7FyYihV0DkOHyvEC2eDt6Gg"><meta name="referrer" content="never"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="baidu-site-verification" content="haLEFmuOYV"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"0f81ff2f"}),daovoice("update")</script><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css"><meta name="keywords" content="webgl, wasm"><link rel="alternate" href="/atom.xml" title="Moorez" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.0.2"><meta name="description" content="最近团队在用 WASM + FFmpeg 打造一个 WEB 播放器。我们是通过写 C 语言用 FFmpeg 解码视频，通过编译 C 语言转 WASM 运行在浏览器上与 JavaScript 进行通信。默认 FFmpeg 去解码出来的数据是 yuv，而 canvas 只支持渲染 rgb，那么此时我们有两种方法处理这个yuv，第一个使用 FFmpeg 暴露的方法将 yuv 直接转成 rgb 然后给 c"><meta name="keywords" content="webgl, wasm"><meta property="og:type" content="article"><meta property="og:title" content="IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践"><meta property="og:url" content="http://www.shenzekun.cn/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html"><meta property="og:site_name" content="Moorez"><meta property="og:description" content="最近团队在用 WASM + FFmpeg 打造一个 WEB 播放器。我们是通过写 C 语言用 FFmpeg 解码视频，通过编译 C 语言转 WASM 运行在浏览器上与 JavaScript 进行通信。默认 FFmpeg 去解码出来的数据是 yuv，而 canvas 只支持渲染 rgb，那么此时我们有两种方法处理这个yuv，第一个使用 FFmpeg 暴露的方法将 yuv 直接转成 rgb 然后给 c"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-cb6af60b3e8c735a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-4f0efd72679c542f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-f82d8679cb4c6914.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-bf25f3fbb722a897.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-fcdd0b77fdda4dc6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-e53a07e1488c3c24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-5ce99a3cc1a175fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-1a79859ee92b9627.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-dde49928922dbfca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-6518639277fbe042.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-c942a3c1f34ab2c1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-8733acc2e8babedf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-d4fd034ee984ce88.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-94f2976468d13741.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-7a95aa21909d963f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-59cc7412ada8e78c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-16f9f049fed8e951.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-929e48871f354d38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-85d302e14e2d61ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-907b6837bcda8be5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-dc620d48dd41e1aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:updated_time" content="2019-12-14T05:21:43.417Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践"><meta name="twitter:description" content="最近团队在用 WASM + FFmpeg 打造一个 WEB 播放器。我们是通过写 C 语言用 FFmpeg 解码视频，通过编译 C 语言转 WASM 运行在浏览器上与 JavaScript 进行通信。默认 FFmpeg 去解码出来的数据是 yuv，而 canvas 只支持渲染 rgb，那么此时我们有两种方法处理这个yuv，第一个使用 FFmpeg 暴露的方法将 yuv 直接转成 rgb 然后给 c"><meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/5308475-cb6af60b3e8c735a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Mist",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!1,duoshuo:{userId:"0",author:"Author"}}</script><link rel="canonical" href="http://www.shenzekun.cn/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html"><title>IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践 | Moorez</title></head><body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/shenzekun" class="github-corner" aria-label="View source on Github"><svg width="92" height="92" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="//schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Moorez</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div><span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://www.shenzekun.cn/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="shenzekun"><meta itemprop="description" content=""><meta itemprop="image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Moorez"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2019-12-14T13:20:14+08:00" content="2019-12-14">2019-12-14</time></span> <span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span></span> <span id="/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html" class="leancloud_visitors" data-flag-title="IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践"> | <span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">热度</span><span class="leancloud-visitors-count"></span> <span>℃</span></span><div class="post-wordcount"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> <span class="post-meta-item-text">字数统计</span> <span title="字数统计">5,369 字</span> <span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span> <span class="post-meta-item-text">阅读时长</span> <span title="阅读时长">22 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><hr><blockquote><p>最近团队在用 WASM + FFmpeg 打造一个 WEB 播放器。我们是通过写 C 语言用 FFmpeg 解码视频，通过编译 C 语言转 WASM 运行在浏览器上与 JavaScript 进行通信。默认 FFmpeg 去解码出来的数据是 yuv，而 canvas 只支持渲染 rgb，那么此时我们有两种方法处理这个yuv，第一个使用 FFmpeg 暴露的方法将 yuv 直接转成 rgb 然后给 canvas 进行渲染，第二个使用 webgl 将 yuv 转 rgb ，在 canvas 上渲染。第一个好处是写法很简单，只需 FFmpeg 暴露的方法将 yuv 直接转成 rgb ，缺点呢就是会耗费一定的cpu，第二个好处是会利用 gpu 进行加速，缺点是写法比较繁琐，而且需要熟悉 WEBGL 。考虑到为了减少 cpu 的占用，利用 gpu 进行并行加速，我们采用了第二种方法。</p></blockquote><a id="more"></a><blockquote><p>在讲 YUV 之前，我们先来看下 YUV 是怎么获取到的：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-cb6af60b3e8c735a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="实现播放器必定要经过的步骤"><br>由于我们是写播放器，实现一个播放器的步骤必定会经过以下这几个步骤：</p><ol><li>将视频的文件比如 mp4，avi，flv等等，mp4，avi，flv 相当于是一个容器，里面包含一些信息，比如压缩的视频，压缩的音频等等， 进行解复用，从容器里面提取出压缩的视频以及音频，压缩的视频一般是 H265、H264 格式或者其他格式，压缩的音频一般是 aac或者 mp3。</li><li>分别在压缩的视频和压缩的音频进行解码，得到原始的视频和音频，原始的音频数据一般是pcm ，而原始的视频数据一般是 yuv 或者 rgb。</li><li>然后进行音视频的同步。<br>可以看到解码压缩的视频数据之后，一般就会得到 yuv。</li></ol></blockquote><h2 id="YUV"><a href="#YUV" class="headerlink" title="YUV"></a>YUV</h2><h4 id="YUV-是什么"><a href="#YUV-是什么" class="headerlink" title="YUV 是什么"></a>YUV 是什么</h4><p>对于前端开发者来说，YUV 其实有点陌生，对于搞过音视频开发的一般会接触到这个，简单来说，YUV 和我们熟悉的 RGB 差不多，都是颜色编码方式，只不过它们的三个字母代表的意义与 RGB 不同，YUV 的 “Y” 表示明亮度（Luminance或Luma），也就是灰度值；而 ”U” 和 ”V” 表示的则是色度（Chrominance或Chroma），描述影像色彩及饱和度，用于指定像素的颜色。</p><p>为了让大家对 YUV 有更加直观的感受，我们来看下，Y，U，V 单独显示分别是什么样子，这里使用了 FFmpeg 命令将一张火影忍者的宇智波鼬图片转成YUV420P：<br></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ffmpeg -<span class="selector-tag">i</span> frame<span class="selector-class">.jpg</span> -s <span class="number">352</span>x288 -pix_fmt yuv420p test.yuv</div></pre></td></tr></table></figure><p></p><p>在 <code>GLYUVPlay</code>软件上打开 <code>test.yuv</code>，显示原图：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-4f0efd72679c542f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="原图"><br>Y分量单独显示：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-f82d8679cb4c6914.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Y"><br>U分量单独显示：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-bf25f3fbb722a897.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="U"><br>V 分量单独显示：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-fcdd0b77fdda4dc6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="V"><br>由上面可以发现，Y 单独显示的时候是可以显示完整的图像的，只不过图片是灰色的。而U，V则代表的是色度，一个偏蓝，一个偏红。</p><h4 id="使用YUV-的好处"><a href="#使用YUV-的好处" class="headerlink" title="使用YUV 的好处"></a>使用YUV 的好处</h4><ol><li>由刚才看到的那样，Y 单独显示是黑白图像，因此YUV格式由彩色转黑白很简单，可以兼容老式黑白电视，这一特性用在于电视信号上。</li><li>YUV的数据尺寸一般都比RGB格式小，可以节约传输的带宽。（但如果用YUV444的话，和RGB24一样都是24位）</li></ol><h4 id="YUV-采样"><a href="#YUV-采样" class="headerlink" title="YUV 采样"></a>YUV 采样</h4><p>常见的YUV的采样有YUV444，YUV422，YUV420：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-e53a07e1488c3c24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><blockquote><p>注：黑点表示采样该像素点的Y分量，空心圆圈表示采用该像素点的UV分量。</p><ol><li>YUV 4:4:4采样，每一个Y对应一组UV分量。</li><li>YUV 4:2:2采样，每两个Y共用一组UV分量。</li><li>YUV 4:2:0采样，每四个Y共用一组UV分量。</li></ol></blockquote><h4 id="YUV-存储方式"><a href="#YUV-存储方式" class="headerlink" title="YUV 存储方式"></a>YUV 存储方式</h4><p>YUV的存储格式有两类：packed（打包）和 planar（平面）：</p><ul><li>packed 的YUV格式，每个像素点的Y,U,V是连续交错存储的。</li><li>planar 的YUV格式，先连续存储所有像素点的Y，紧接着存储所有像素点的U，随后是所有像素点的V。</li></ul><p>举个例子，对于 planar 模式，YUV 可以这么存 YYYYUUVV，对于 packed 模式，YUV 可以这么存YUYVYUYV。</p><p>YUV 格式一般有多种，YUV420SP、YUV420P、YUV422P，YUV422SP等，我们来看下比较常见的格式：</p><ul><li><p>YUV420P（每四个 Y 会共用一组 UV 分量）：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-5ce99a3cc1a175fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p></li><li><p>YUV420SP（packed，每四个 Y 会共用一组 UV 分量，和YUV420P不同的是，YUV420SP存储的时候 U，V 是交错存储）：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-1a79859ee92b9627.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p></li><li><p>YUV422P（planar，每两个 Y 共用一组 UV 分量，所以 U和 V 会比 YUV420P U 和 V 各多加一行）：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-dde49928922dbfca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p></li></ul><ul><li>YUV422SP（packed，每两个 Y 共用一组 UV 分量）：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-6518639277fbe042.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></li></ul><p>其中YUV420P和YUV420SP根据U、V的顺序，又可分出2种格式：</p><ul><li><p><code>YUV420P</code>：U前V后即<code>YUV420P</code>，也叫<code>I420</code>，V前U后，叫<code>YV12</code>。</p></li><li><p><code>YUV420SP</code>：U前V后叫<code>NV12</code>，V前U后叫<code>NV21</code>。</p></li></ul><p>数据排列如下:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">I420: YYYYYYYY UU VV =>YUV420P</div><div class="line"></div><div class="line">YV12: YYYYYYYY VV UU =>YUV420P</div><div class="line"></div><div class="line">NV12: YYYYYYYY UV UV =>YUV420SP</div><div class="line"></div><div class="line">NV21: YYYYYYYY VU VU =>YUV420SP</div></pre></td></tr></table></figure><p>至于为啥会有这么多格式，经过大量搜索发现原因是为了适配不同的电视广播制式和设备系统，比如 ios 下只有这一种模式<code>NV12</code>，安卓的模式是 <code>NV21</code>，比如 <code>YUV411</code>、<code>YUV420</code>格式多见于数码摄像机数据中，前者用于<code>NTSC</code>制，后者用于 <code>PAL</code>制。至于电视广播制式的介绍我们可以看下这篇文章<a href="http://www.microjie.com/professional-knowledge/82-standards-parterns/52-ntsc-pal-secam?showall=1" target="_blank" rel="external">【标准】NTSC、PAL、SECAM三大制式简介</a></p><h4 id="YUV-计算方法"><a href="#YUV-计算方法" class="headerlink" title="YUV 计算方法"></a>YUV 计算方法</h4><p>以YUV420P存储一张1080 x 1280图片为例子，其存储大小为 <code>((1080 x 1280 x 3) >> 1)</code> 个字节，这个是怎么算出来的？我们来看下面这张图：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-c942a3c1f34ab2c1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>以 Y420P 存储那么 Y 占的大小为 <code>W x H = 1080x1280</code>，U 为<code>(W/2) * (H/2)= (W*H)/4 = (1080x1280)/4</code>，同理 V为<br><code>(W*H)/4 = (1080x1280)/4</code>，因此一张图为 <code>Y+U+V = (1080x1280)*3/2</code>。<br>由于三个部分内部均是行优先存储，三个部分之间是Y,U,V 顺序存储，那么YUV的存储位置如下（PS：后面会用到）：<br></p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">Y：<span class="number">0</span> 到 <span class="number">1080</span>*<span class="number">1280</span></div><div class="line">U：<span class="number">1080</span>*<span class="number">1280</span> 到 (<span class="number">1080</span>*<span class="number">1280</span>)*<span class="number">5</span>/<span class="number">4</span></div><div class="line">V：(<span class="number">1080</span>*<span class="number">1280</span>)*<span class="number">5</span>/<span class="number">4</span> 到 (<span class="number">1080</span>*<span class="number">1280</span>)*<span class="number">3</span>/<span class="number">2</span></div></pre></td></tr></table></figure><p></p><h2 id="WEBGL"><a href="#WEBGL" class="headerlink" title="WEBGL"></a>WEBGL</h2><h4 id="WEBGL-是什么"><a href="#WEBGL-是什么" class="headerlink" title="WEBGL 是什么"></a>WEBGL 是什么</h4><blockquote><p>简单来说，WebGL是一项用来在网页上绘制和渲染复杂3D图形，并允许用户与之交互的技术。</p></blockquote><h4 id="WEBGL-组成"><a href="#WEBGL-组成" class="headerlink" title="WEBGL 组成"></a>WEBGL 组成</h4><p>在 webgl 世界中，能绘制的基本图形元素只有点、线、三角形，每个图像都是由大大小小的三角形组成，如下图，无论是多么复杂的图形，其基本组成部分都是由三角形组成。</p><p><img src="https://upload-images.jianshu.io/upload_images/5308475-8733acc2e8babedf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="图来源于网络"></p><h4 id="着色器"><a href="#着色器" class="headerlink" title="着色器"></a>着色器</h4><p>着色器是在GPU上运行的程序，是用OpenGL ES着色语言编写的，有点类似 c 语言：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-d4fd034ee984ce88.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>具体的语法可以参考<a href="https://github.com/wshxbqq/GLSL-Card" target="_blank" rel="external">着色器语言 GLSL (opengl-shader-language)入门大全</a>，这里不在多加赘述。</p><p>在 WEBGL 中想要绘制图形就必须要有两个着色器：</p><ul><li>顶点着色器</li><li>片元着色器</li></ul><p>其中顶点着色器的主要功能就是用来处理顶点的，而片元着色器则是用来处理由光栅化阶段生成的每个片元（PS：片元可以理解为像素），最后计算出每个像素的颜色。</p><h4 id="WEBGL-绘制流程"><a href="#WEBGL-绘制流程" class="headerlink" title="WEBGL 绘制流程"></a>WEBGL 绘制流程</h4><p><strong>一、提供顶点坐标</strong><br>因为程序很傻，不知道图形的各个顶点，需要我们自己去提供，顶点坐标可以是自己手动写或者是由软件导出：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-94f2976468d13741.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>在这个图中，我们把顶点写入到缓冲区里，缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。接着我们创建并编译顶点着色器和片元着色器，并用 program 连接两个着色器，并使用。举个例子简单理解下为什么要这样做，我们可以理解成创建Fragment 元素： <code>let f = document.createDocumentFragment()</code>，<br>所有的着色器创建并编译后会处在一种游离的状态，我们需要将他们联系起来，并使用（可以理解成 <code>document.body.appendChild(f)</code>，添加到 body，dom 元素才能被看到，也就是联系并使用）。<br>接着我们还需要将缓冲区与顶点着色器进行连接，这样才能生效。</p><p><strong>二、图元装配</strong><br>我们提供顶点之后，GPU根据我们提供的顶点数量，会挨个执行顶点着色器程序，生成顶点最终的坐标，将图形装配起来。可以理解成制作风筝，就需要将风筝骨架先搭建起来，图元装配就是在这一阶段。</p><p><strong>三、光栅化</strong><br>这一阶段就好比是制作风筝，搭建好风筝骨架后，但是此时却不能飞起来，因为里面都是空的，需要为骨架添加布料。而光栅化就是在这一阶段，将图元装配好的几何图形转成片元（PS: 片元可以理解成像素）。<br><img src="https://upload-images.jianshu.io/upload_images/5308475-7a95aa21909d963f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>四、着色与渲染</strong><br><img src="https://upload-images.jianshu.io/upload_images/5308475-59cc7412ada8e78c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>着色这一阶段就好比风筝布料搭建完成，但是此时并没有什么图案，需要绘制图案，让风筝更加好看，也就是光栅化后的图形此时并没有颜色，需要经过片元着色器处理，逐片元进行上色并写到颜色缓冲区里，最后在浏览器才能显示有图像的几何图形。</p><p><strong>总结</strong><br>WEBGL 绘制流程可以归纳为以下几点：</p><ol><li>提供顶点坐标（需要我们提供）</li><li>图元装配（按图元类型组装成图形）</li><li>光栅化（将图元装配好的图形，生成像素点）</li><li>提供颜色值（可以动态计算，像素着色）</li><li>通过 canvas 绘制在浏览器上。</li></ol><p><img src="https://upload-images.jianshu.io/upload_images/5308475-16f9f049fed8e951.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><h4 id="WEBGL-YUV-绘制图像思路"><a href="#WEBGL-YUV-绘制图像思路" class="headerlink" title="WEBGL YUV 绘制图像思路"></a>WEBGL YUV 绘制图像思路</h4><p>由于每个视频帧的图像都不太一样，我们肯定不可能知道那么多顶点，那么我们怎么将视频帧的图像用 webgl 画出来呢？这里使用了一个技巧—纹理映射。简单来说就是将一张图像贴在一个几何图形表面，使几何图形看起来像是有图像的几何图形，也就是将纹理坐标和 webgl 系统坐标进行一一对应：</p><p><img src="https://upload-images.jianshu.io/upload_images/5308475-929e48871f354d38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>如上图，上面那个是纹理坐标，分为 s 和 t 坐标（或者叫 uv 坐标），值的范围在【0，1】之间，值和图像大小、分辨率无关。下面那张图是webgl坐标系统，是一个三维的坐标系统，这里声明了四个顶点，用两个三角形组装成一个长方形，然后将纹理坐标的顶点与 webgl 坐标系进行一一对应，最终传给片元着色器，片元着色器提取图片的一个个纹素颜色，输出在颜色缓冲区里，最终绘制在浏览器里（PS：纹素你可以理解为组成纹理图像的像素）。但是如果按图上进行一一对应的话，成像会是反的，因为 canvas 的图像坐标，默认（0，0）是在左上角：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-85d302e14e2d61ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>而纹理坐标则是在左下角，所以绘制时成像就会倒立，解决方法有两种：</p><ul><li><p>对纹理图像进行 Y 轴翻转，webgl 提供了api：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 1代表对纹理图像进行y轴反转</span></div><div class="line">gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, <span class="number">1</span>);</div></pre></td></tr></table></figure></li><li><p>纹理坐标和 webgl 坐标映射进行倒转，举个栗子🌰，如上图所示，本来的纹理坐标<code>（0.0，1.0）</code>对应的是webgl 坐标<code>（-1.0，1.0，0.0）</code>，<code>（0.0，0.0）</code>对应的是<code>（-1.0，-1.0，0.0）</code>，那么我们倒转过来，<code>（0.0，1.0）</code>对应的是<code>（-1.0，-1.0，0.0）</code>，而<code>（0.0，0.0）</code>对应的是<code>（-1.0，1.0，0.0）</code>，这样在浏览器成像就不会是反的。</p></li></ul><p><strong>详细步骤</strong></p><ul><li><p>着色器部分</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 顶点着色器vertexShader</span></div><div class="line">attribute lowp vec4 a_vertexPosition; <span class="comment">// 通过 js 传递顶点坐标</span></div><div class="line">attribute vec2 a_texturePosition; <span class="comment">// 通过 js 传递纹理坐标</span></div><div class="line">varying vec2 v_texCoord; <span class="comment">// 传递纹理坐标给片元着色器</span></div><div class="line"><span class="keyword">void</span> main(){</div><div class="line"> gl_Position=a_vertexPosition;<span class="comment">// 设置顶点坐标</span></div><div class="line"> v_texCoord=a_texturePosition;<span class="comment">// 设置纹理坐标</span></div><div class="line">}</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment">// 片元着色器fragmentShader</span></div><div class="line">precision lowp float;<span class="comment">// lowp代表计算精度，考虑节约性能使用了最低精度</span></div><div class="line">uniform sampler2D samplerY;<span class="comment">// sampler2D是取样器类型，图片纹理最终存储在该类型对象中</span></div><div class="line">uniform sampler2D samplerU;<span class="comment">// sampler2D是取样器类型，图片纹理最终存储在该类型对象中</span></div><div class="line">uniform sampler2D samplerV;<span class="comment">// sampler2D是取样器类型，图片纹理最终存储在该类型对象中</span></div><div class="line">varying vec2 v_texCoord; <span class="comment">// 接受顶点着色器传来的纹理坐标</span></div><div class="line"><span class="keyword">void</span> main(){</div><div class="line"> float r,g,b,y,u,v,fYmul;</div><div class="line"> y = texture2D(samplerY, v_texCoord).r;</div><div class="line"> u = texture2D(samplerU, v_texCoord).r;</div><div class="line"> v = texture2D(samplerV, v_texCoord).r;</div><div class="line"> </div><div class="line"> <span class="comment">// YUV420P 转 RGB </span></div><div class="line"> fYmul = y * <span class="number">1.1643828125</span>;</div><div class="line"> r = fYmul + <span class="number">1.59602734375</span> * v - <span class="number">0.870787598</span>;</div><div class="line"> g = fYmul - <span class="number">0.39176171875</span> * u - <span class="number">0.81296875</span> * v + <span class="number">0.52959375</span>;</div><div class="line"> b = fYmul + <span class="number">2.01723046875</span> * u - <span class="number">1.081389160375</span>;</div><div class="line"> gl_FragColor = vec4(r, g, b, <span class="number">1.0</span>);</div><div class="line">}</div></pre></td></tr></table></figure></li><li><p>创建并编译着色器，将顶点着色器和片段着色器连接到 program，并使用：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> vertexShader=<span class="keyword">this</span>._compileShader(vertexShaderSource,gl.VERTEX_SHADER);<span class="comment">// 创建并编译顶点着色器</span></div><div class="line"><span class="keyword">let</span> fragmentShader=<span class="keyword">this</span>._compileShader(fragmentShaderSource,gl.FRAGMENT_SHADER);<span class="comment">// 创建并编译片元着色器</span></div><div class="line"></div><div class="line"><span class="keyword">let</span> program=<span class="keyword">this</span>._createProgram(vertexShader,fragmentShader);<span class="comment">// 创建program并连接着色器</span></div></pre></td></tr></table></figure></li><li><p>创建缓冲区，存顶点和纹理坐标（PS：缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用）。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> vertexBuffer = gl.createBuffer();</div><div class="line"><span class="keyword">let</span> vertexRectangle = <span class="keyword">new</span> <span class="built_in">Float32Array</span>([</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">0.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">0.0</span>,</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">0.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">0.0</span></div><div class="line">]);</div><div class="line">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);</div><div class="line"><span class="comment">// 向缓冲区写入数据</span></div><div class="line">gl.bufferData(gl.ARRAY_BUFFER, vertexRectangle, gl.STATIC_DRAW);</div><div class="line"><span class="comment">// 找到顶点的位置</span></div><div class="line"><span class="keyword">let</span> vertexPositionAttribute = gl.getAttribLocation(program, <span class="string">'a_vertexPosition'</span>);</div><div class="line"><span class="comment">// 告诉显卡从当前绑定的缓冲区中读取顶点数据</span></div><div class="line">gl.vertexAttribPointer(vertexPositionAttribute, <span class="number">3</span>, gl.FLOAT, <span class="literal">false</span>, <span class="number">0</span>, <span class="number">0</span>);</div><div class="line"><span class="comment">// 连接vertexPosition 变量与分配给它的缓冲区对象</span></div><div class="line">gl.enableVertexAttribArray(vertexPositionAttribute);</div><div class="line"></div><div class="line"><span class="comment">// 声明纹理坐标</span></div><div class="line"><span class="keyword">let</span> textureRectangle = <span class="keyword">new</span> <span class="built_in">Float32Array</span>([<span class="number">1.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">1.0</span>, <span class="number">1.0</span>, <span class="number">0.0</span>, <span class="number">1.0</span>]);</div><div class="line"><span class="keyword">let</span> textureBuffer = gl.createBuffer();</div><div class="line">gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);</div><div class="line">gl.bufferData(gl.ARRAY_BUFFER, textureRectangle, gl.STATIC_DRAW);</div><div class="line"><span class="keyword">let</span> textureCoord = gl.getAttribLocation(program, <span class="string">'a_texturePosition'</span>);</div><div class="line">gl.vertexAttribPointer(textureCoord, <span class="number">2</span>, gl.FLOAT, <span class="literal">false</span>, <span class="number">0</span>, <span class="number">0</span>);</div><div class="line">gl.enableVertexAttribArray(textureCoord);</div></pre></td></tr></table></figure></li><li><p>初始化并激活纹理单元（YUV）</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//激活指定的纹理单元</span></div><div class="line">gl.activeTexture(gl.TEXTURE0);</div><div class="line">gl.y=<span class="keyword">this</span>._createTexture(); <span class="comment">// 创建纹理</span></div><div class="line">gl.uniform1i(gl.getUniformLocation(program,<span class="string">'samplerY'</span>),<span class="number">0</span>);<span class="comment">//获取samplerY变量的存储位置，指定纹理单元编号0将纹理对象传递给samplerY</span></div><div class="line"></div><div class="line">gl.activeTexture(gl.TEXTURE1);</div><div class="line">gl.u=<span class="keyword">this</span>._createTexture();</div><div class="line">gl.uniform1i(gl.getUniformLocation(program,<span class="string">'samplerU'</span>),<span class="number">1</span>);<span class="comment">//获取samplerU变量的存储位置，指定纹理单元编号1将纹理对象传递给samplerU</span></div><div class="line"></div><div class="line">gl.activeTexture(gl.TEXTURE2);</div><div class="line">gl.v=<span class="keyword">this</span>._createTexture();</div><div class="line">gl.uniform1i(gl.getUniformLocation(program,<span class="string">'samplerV'</span>),<span class="number">2</span>);<span class="comment">//获取samplerV变量的存储位置，指定纹理单元编号2将纹理对象传递给samplerV</span></div></pre></td></tr></table></figure></li><li><p>渲染绘制（PS：由于我们获取到的数据是YUV420P，那么计算方法可以参考刚才说的计算方式）。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></td><td class="code"><pre><div class="line"> <span class="comment">// 设置清空颜色缓冲时的颜色值</span></div><div class="line"> gl.clearColor(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</div><div class="line"> <span class="comment">// 清空缓冲</span></div><div class="line"> gl.clear(gl.COLOR_BUFFER_BIT);</div><div class="line"></div><div class="line"><span class="keyword">let</span> uOffset = width * height;</div><div class="line"><span class="keyword">let</span> vOffset = (width >> <span class="number">1</span>) * (height >> <span class="number">1</span>);</div><div class="line"></div><div class="line">gl.bindTexture(gl.TEXTURE_2D, gl.y);</div><div class="line"><span class="comment">// 填充Y纹理,Y 的宽度和高度就是 width，和 height，存储的位置就是data.subarray(0, width * height)</span></div><div class="line">gl.texImage2D(</div><div class="line"> gl.TEXTURE_2D,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> width,</div><div class="line"> height,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> gl.UNSIGNED_BYTE,</div><div class="line"> data.subarray(<span class="number">0</span>, uOffset)</div><div class="line">);</div><div class="line"></div><div class="line">gl.bindTexture(gl.TEXTURE_2D, gl.u);</div><div class="line"><span class="comment">// 填充U纹理,Y 的宽度和高度就是 width/2 和 height/2，存储的位置就是data.subarray(width * height, width/2 * height/2 + width * height)</span></div><div class="line">gl.texImage2D(</div><div class="line"> gl.TEXTURE_2D,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> width >> <span class="number">1</span>,</div><div class="line"> height >> <span class="number">1</span>,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> gl.UNSIGNED_BYTE,</div><div class="line"> data.subarray(uOffset, uOffset + vOffset)</div><div class="line">);</div><div class="line"></div><div class="line">gl.bindTexture(gl.TEXTURE_2D, gl.v);</div><div class="line"><span class="comment">// 填充U纹理,Y 的宽度和高度就是 width/2 和 height/2，存储的位置就是data.subarray(width/2 * height/2 + width * height, data.length)</span></div><div class="line">gl.texImage2D(</div><div class="line"> gl.TEXTURE_2D,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> width >> <span class="number">1</span>,</div><div class="line"> height >> <span class="number">1</span>,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> gl.UNSIGNED_BYTE,</div><div class="line"> data.subarray(uOffset + vOffset, data.length)</div><div class="line">);</div><div class="line"></div><div class="line">gl.drawArrays(gl.TRIANGLE_STRIP, <span class="number">0</span>, <span class="number">4</span>); <span class="comment">// 绘制四个点，也就是长方形</span></div></pre></td></tr></table></figure></li></ul><p>上述那些步骤最终可以绘制成这张图：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-907b6837bcda8be5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>完整代码：</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div><div class="line">196</div><div class="line">197</div><div class="line">198</div><div class="line">199</div><div class="line">200</div><div class="line">201</div><div class="line">202</div><div class="line">203</div><div class="line">204</div><div class="line">205</div><div class="line">206</div><div class="line">207</div><div class="line">208</div><div class="line">209</div><div class="line">210</div><div class="line">211</div><div class="line">212</div><div class="line">213</div><div class="line">214</div><div class="line">215</div><div class="line">216</div><div class="line">217</div><div class="line">218</div><div class="line">219</div><div class="line">220</div><div class="line">221</div><div class="line">222</div><div class="line">223</div><div class="line">224</div><div class="line">225</div><div class="line">226</div><div class="line">227</div><div class="line">228</div><div class="line">229</div><div class="line">230</div><div class="line">231</div><div class="line">232</div><div class="line">233</div><div class="line">234</div><div class="line">235</div><div class="line">236</div><div class="line">237</div><div class="line">238</div><div class="line">239</div><div class="line">240</div><div class="line">241</div><div class="line">242</div><div class="line">243</div><div class="line">244</div><div class="line">245</div><div class="line">246</div><div class="line">247</div><div class="line">248</div><div class="line">249</div><div class="line">250</div><div class="line">251</div><div class="line">252</div><div class="line">253</div><div class="line">254</div><div class="line">255</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">WebglScreen</span> </span>{</div><div class="line"> <span class="keyword">constructor</span>(canvas) {</div><div class="line"> <span class="keyword">this</span>.canvas = canvas;</div><div class="line"> <span class="keyword">this</span>.gl = canvas.getContext(<span class="string">'webgl'</span>) || canvas.getContext(<span class="string">'experimental-webgl'</span>);</div><div class="line"> <span class="keyword">this</span>._init();</div><div class="line"> }</div><div class="line"></div><div class="line"> _init() {</div><div class="line"> <span class="keyword">let</span> gl = <span class="keyword">this</span>.gl;</div><div class="line"> <span class="keyword">if</span> (!gl) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'gl not support！'</span>);</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> <span class="comment">// 图像预处理</span></div><div class="line"> gl.pixelStorei(gl.UNPACK_ALIGNMENT, <span class="number">1</span>);</div><div class="line"> <span class="comment">// GLSL 格式的顶点着色器代码</span></div><div class="line"> <span class="keyword">let</span> vertexShaderSource = <span class="string">`</span></div><div class="line"> attribute lowp vec4 a_vertexPosition;</div><div class="line"> attribute vec2 a_texturePosition;</div><div class="line"> varying vec2 v_texCoord;</div><div class="line"> void main() {</div><div class="line"> gl_Position = a_vertexPosition;</div><div class="line"> v_texCoord = a_texturePosition;</div><div class="line"> }</div><div class="line"> `;</div><div class="line"></div><div class="line"> <span class="keyword">let</span> fragmentShaderSource = <span class="string">`</span></div><div class="line"> precision lowp float;</div><div class="line"> uniform sampler2D samplerY;</div><div class="line"> uniform sampler2D samplerU;</div><div class="line"> uniform sampler2D samplerV;</div><div class="line"> varying vec2 v_texCoord;</div><div class="line"> void main() {</div><div class="line"> float r,g,b,y,u,v,fYmul;</div><div class="line"> y = texture2D(samplerY, v_texCoord).r;</div><div class="line"> u = texture2D(samplerU, v_texCoord).r;</div><div class="line"> v = texture2D(samplerV, v_texCoord).r;</div><div class="line"></div><div class="line"> fYmul = y * 1.1643828125;</div><div class="line"> r = fYmul + 1.59602734375 * v - 0.870787598;</div><div class="line"> g = fYmul - 0.39176171875 * u - 0.81296875 * v + 0.52959375;</div><div class="line"> b = fYmul + 2.01723046875 * u - 1.081389160375;</div><div class="line"> gl_FragColor = vec4(r, g, b, 1.0);</div><div class="line"> }</div><div class="line"> `;</div><div class="line"></div><div class="line"> <span class="keyword">let</span> vertexShader = <span class="keyword">this</span>._compileShader(vertexShaderSource, gl.VERTEX_SHADER);</div><div class="line"> <span class="keyword">let</span> fragmentShader = <span class="keyword">this</span>._compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);</div><div class="line"></div><div class="line"> <span class="keyword">let</span> program = <span class="keyword">this</span>._createProgram(vertexShader, fragmentShader);</div><div class="line"></div><div class="line"> <span class="keyword">this</span>._initVertexBuffers(program);</div><div class="line"></div><div class="line"> <span class="comment">// 激活指定的纹理单元</span></div><div class="line"> gl.activeTexture(gl.TEXTURE0);</div><div class="line"> gl.y = <span class="keyword">this</span>._createTexture();</div><div class="line"> gl.uniform1i(gl.getUniformLocation(program, <span class="string">'samplerY'</span>), <span class="number">0</span>);</div><div class="line"></div><div class="line"> gl.activeTexture(gl.TEXTURE1);</div><div class="line"> gl.u = <span class="keyword">this</span>._createTexture();</div><div class="line"> gl.uniform1i(gl.getUniformLocation(program, <span class="string">'samplerU'</span>), <span class="number">1</span>);</div><div class="line"></div><div class="line"> gl.activeTexture(gl.TEXTURE2);</div><div class="line"> gl.v = <span class="keyword">this</span>._createTexture();</div><div class="line"> gl.uniform1i(gl.getUniformLocation(program, <span class="string">'samplerV'</span>), <span class="number">2</span>);</div><div class="line"> }</div><div class="line"> <span class="comment">/**</span></div><div class="line"> * 初始化顶点 buffer</div><div class="line"> * @param {glProgram} program 程序</div><div class="line"> */</div><div class="line"></div><div class="line"> _initVertexBuffers(program) {</div><div class="line"> <span class="keyword">let</span> gl = <span class="keyword">this</span>.gl;</div><div class="line"> <span class="keyword">let</span> vertexBuffer = gl.createBuffer();</div><div class="line"> <span class="keyword">let</span> vertexRectangle = <span class="keyword">new</span> <span class="built_in">Float32Array</span>([</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">0.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">0.0</span>,</div><div class="line"> <span class="number">1.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">0.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">-1.0</span>,</div><div class="line"> <span class="number">0.0</span></div><div class="line"> ]);</div><div class="line"> gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);</div><div class="line"> <span class="comment">// 向缓冲区写入数据</span></div><div class="line"> gl.bufferData(gl.ARRAY_BUFFER, vertexRectangle, gl.STATIC_DRAW);</div><div class="line"> <span class="comment">// 找到顶点的位置</span></div><div class="line"> <span class="keyword">let</span> vertexPositionAttribute = gl.getAttribLocation(program, <span class="string">'a_vertexPosition'</span>);</div><div class="line"> <span class="comment">// 告诉显卡从当前绑定的缓冲区中读取顶点数据</span></div><div class="line"> gl.vertexAttribPointer(vertexPositionAttribute, <span class="number">3</span>, gl.FLOAT, <span class="literal">false</span>, <span class="number">0</span>, <span class="number">0</span>);</div><div class="line"> <span class="comment">// 连接vertexPosition 变量与分配给它的缓冲区对象</span></div><div class="line"> gl.enableVertexAttribArray(vertexPositionAttribute);</div><div class="line"></div><div class="line"> <span class="keyword">let</span> textureRectangle = <span class="keyword">new</span> <span class="built_in">Float32Array</span>([<span class="number">1.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">1.0</span>, <span class="number">1.0</span>, <span class="number">0.0</span>, <span class="number">1.0</span>]);</div><div class="line"> <span class="keyword">let</span> textureBuffer = gl.createBuffer();</div><div class="line"> gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);</div><div class="line"> gl.bufferData(gl.ARRAY_BUFFER, textureRectangle, gl.STATIC_DRAW);</div><div class="line"> <span class="keyword">let</span> textureCoord = gl.getAttribLocation(program, <span class="string">'a_texturePosition'</span>);</div><div class="line"> gl.vertexAttribPointer(textureCoord, <span class="number">2</span>, gl.FLOAT, <span class="literal">false</span>, <span class="number">0</span>, <span class="number">0</span>);</div><div class="line"> gl.enableVertexAttribArray(textureCoord);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * 创建并编译一个着色器</div><div class="line"> * @param {string} shaderSource GLSL 格式的着色器代码</div><div class="line"> * @param {number} shaderType 着色器类型, VERTEX_SHADER 或 FRAGMENT_SHADER。</div><div class="line"> * @return {glShader} 着色器。</div><div class="line"> */</div><div class="line"> _compileShader(shaderSource, shaderType) {</div><div class="line"> <span class="comment">// 创建着色器程序</span></div><div class="line"> <span class="keyword">let</span> shader = <span class="keyword">this</span>.gl.createShader(shaderType);</div><div class="line"> <span class="comment">// 设置着色器的源码</span></div><div class="line"> <span class="keyword">this</span>.gl.shaderSource(shader, shaderSource);</div><div class="line"> <span class="comment">// 编译着色器</span></div><div class="line"> <span class="keyword">this</span>.gl.compileShader(shader);</div><div class="line"> <span class="keyword">const</span> success = <span class="keyword">this</span>.gl.getShaderParameter(shader, <span class="keyword">this</span>.gl.COMPILE_STATUS);</div><div class="line"> <span class="keyword">if</span> (!success) {</div><div class="line"> <span class="keyword">let</span> err = <span class="keyword">this</span>.gl.getShaderInfoLog(shader);</div><div class="line"> <span class="keyword">this</span>.gl.deleteShader(shader);</div><div class="line"> <span class="built_in">console</span>.error(<span class="string">'could not compile shader'</span>, err);</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> shader;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * 从 2 个着色器中创建一个程序</div><div class="line"> * @param {glShader} vertexShader 顶点着色器。</div><div class="line"> * @param {glShader} fragmentShader 片断着色器。</div><div class="line"> * @return {glProgram} 程序</div><div class="line"> */</div><div class="line"> _createProgram(vertexShader, fragmentShader) {</div><div class="line"> <span class="keyword">const</span> gl = <span class="keyword">this</span>.gl;</div><div class="line"> <span class="keyword">let</span> program = gl.createProgram();</div><div class="line"></div><div class="line"> <span class="comment">// 附上着色器</span></div><div class="line"> gl.attachShader(program, vertexShader);</div><div class="line"> gl.attachShader(program, fragmentShader);</div><div class="line"></div><div class="line"> gl.linkProgram(program);</div><div class="line"> <span class="comment">// 将 WebGLProgram 对象添加到当前的渲染状态中</span></div><div class="line"> gl.useProgram(program);</div><div class="line"> <span class="keyword">const</span> success = <span class="keyword">this</span>.gl.getProgramParameter(program, <span class="keyword">this</span>.gl.LINK_STATUS);</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (!success) {</div><div class="line"> <span class="built_in">console</span>.err(<span class="string">'program fail to link'</span> + <span class="keyword">this</span>.gl.getShaderInfoLog(program));</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> program;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * 设置纹理</div><div class="line"> */</div><div class="line"> _createTexture(filter = <span class="keyword">this</span>.gl.LINEAR) {</div><div class="line"> <span class="keyword">let</span> gl = <span class="keyword">this</span>.gl;</div><div class="line"> <span class="keyword">let</span> t = gl.createTexture();</div><div class="line"> <span class="comment">// 将给定的 glTexture 绑定到目标（绑定点</span></div><div class="line"> gl.bindTexture(gl.TEXTURE_2D, t);</div><div class="line"> <span class="comment">// 纹理包装 参考https://github.com/fem-d/webGL/blob/master/blog/WebGL基础学习篇（Lesson%207）.md -> Texture wrapping</span></div><div class="line"> gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);</div><div class="line"> gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</div><div class="line"> <span class="comment">// 设置纹理过滤方式</span></div><div class="line"> gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);</div><div class="line"> gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);</div><div class="line"> <span class="keyword">return</span> t;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * 渲染图片出来</div><div class="line"> * @param {number} width 宽度</div><div class="line"> * @param {number} height 高度</div><div class="line"> */</div><div class="line"> renderImg(width, height, data) {</div><div class="line"> <span class="keyword">let</span> gl = <span class="keyword">this</span>.gl;</div><div class="line"> <span class="comment">// 设置视口，即指定从标准设备到窗口坐标的x、y仿射变换</span></div><div class="line"> gl.viewport(<span class="number">0</span>, <span class="number">0</span>, gl.canvas.width, gl.canvas.height);</div><div class="line"> <span class="comment">// 设置清空颜色缓冲时的颜色值</span></div><div class="line"> gl.clearColor(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</div><div class="line"> <span class="comment">// 清空缓冲</span></div><div class="line"> gl.clear(gl.COLOR_BUFFER_BIT);</div><div class="line"></div><div class="line"> <span class="keyword">let</span> uOffset = width * height;</div><div class="line"> <span class="keyword">let</span> vOffset = (width >> <span class="number">1</span>) * (height >> <span class="number">1</span>);</div><div class="line"></div><div class="line"> gl.bindTexture(gl.TEXTURE_2D, gl.y);</div><div class="line"> <span class="comment">// 填充纹理</span></div><div class="line"> gl.texImage2D(</div><div class="line"> gl.TEXTURE_2D,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> width,</div><div class="line"> height,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> gl.UNSIGNED_BYTE,</div><div class="line"> data.subarray(<span class="number">0</span>, uOffset)</div><div class="line"> );</div><div class="line"></div><div class="line"> gl.bindTexture(gl.TEXTURE_2D, gl.u);</div><div class="line"> gl.texImage2D(</div><div class="line"> gl.TEXTURE_2D,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> width >> <span class="number">1</span>,</div><div class="line"> height >> <span class="number">1</span>,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> gl.UNSIGNED_BYTE,</div><div class="line"> data.subarray(uOffset, uOffset + vOffset)</div><div class="line"> );</div><div class="line"></div><div class="line"> gl.bindTexture(gl.TEXTURE_2D, gl.v);</div><div class="line"> gl.texImage2D(</div><div class="line"> gl.TEXTURE_2D,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> width >> <span class="number">1</span>,</div><div class="line"> height >> <span class="number">1</span>,</div><div class="line"> <span class="number">0</span>,</div><div class="line"> gl.LUMINANCE,</div><div class="line"> gl.UNSIGNED_BYTE,</div><div class="line"> data.subarray(uOffset + vOffset, data.length)</div><div class="line"> );</div><div class="line"></div><div class="line"> gl.drawArrays(gl.TRIANGLE_STRIP, <span class="number">0</span>, <span class="number">4</span>);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">/**</span></div><div class="line"> * 根据重新设置 canvas 大小</div><div class="line"> * @param {number} width 宽度</div><div class="line"> * @param {number} height 高度</div><div class="line"> * @param {number} maxWidth 最大宽度</div><div class="line"> */</div><div class="line"> setSize(width, height, maxWidth) {</div><div class="line"> <span class="keyword">let</span> canvasWidth = <span class="built_in">Math</span>.min(maxWidth, width);</div><div class="line"> <span class="keyword">this</span>.canvas.width = canvasWidth;</div><div class="line"> <span class="keyword">this</span>.canvas.height = canvasWidth * height / width;</div><div class="line"> }</div><div class="line"></div><div class="line"> destroy() {</div><div class="line"> <span class="keyword">const</span> {</div><div class="line"> gl</div><div class="line"> } = <span class="keyword">this</span>;</div><div class="line"></div><div class="line"> gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure><p>最后我们来看下效果图：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-dc620d48dd41e1aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><h2 id="遇到的问题"><a href="#遇到的问题" class="headerlink" title="遇到的问题"></a>遇到的问题</h2><p>在实际开发过程中，我们测试一些直播流，有时候渲染的时候图像显示是正常的，但是颜色会偏绿，经研究发现，直播流的不同主播的视频宽度是会不一样，比如在主播在 pk 的时候宽度368，热门主播宽度会到 720，小主播宽度是 540，而宽度为 540 的会显示偏绿，具体原因是 webgl 会经过预处理，默认会将以下值设置为 4：<br></p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 图像预处理</span></div><div class="line">gl.pixelStorei(gl.UNPACK_ALIGNMENT, <span class="number">4</span>);</div></pre></td></tr></table></figure><p></p><p>这样默认设置会每行 4 个字节 4 个字节处理，而 Y分量每行的宽度是 540，是 4 的倍数，字节对齐了，所以图像能够正常显示，而 U，V 分量宽度是 <code>540 / 2 = 270</code>，270 不是4 的倍数，字节非对齐，因此色素就会显示偏绿。目前有两种方法可以解决这个问题：</p><ul><li><p>第一个是直接让 webgl 每行 1 个字节 1 个字节处理（对性能有影响）：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 图像预处理</span></div><div class="line">gl.pixelStorei(gl.UNPACK_ALIGNMENT, <span class="number">1</span>);</div></pre></td></tr></table></figure></li><li><p>第二个是让获取到的图像的宽度是 8 的倍数，这样就能做到 YUV 字节对齐，就不会显示绿屏，但是不建议这样做， 转的时候CPU占用极大，建议采取第一个方案。</p></li></ul><h2 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h2><p><a href="https://www.cnblogs.com/eustoma/p/6664907.html" target="_blank" rel="external">图像视频编码和FFmpeg(2)——YUV格式介绍和应用 - eustoma - 博客园</a><br><a href="http://www.fourcc.org/yuv.php" target="_blank" rel="external">YUV pixel formats</a><br><a href="https://wiki.videolan.org/YUV/" target="_blank" rel="external">https://wiki.videolan.org/YUV/</a><br><a href="https://docs.microsoft.com/zh-cn/previous-versions/ms867704(v=msdn.10" target="_blank" rel="external">使用 8 位 YUV 格式的视频呈现 | Microsoft Docs</a>?redirectedfrom=MSDN)<br><a href="https://www.jianshu.com/p/2933b1cbebf6" target="_blank" rel="external">IOS 视频格式之YUV - 简书</a><br><a href="https://www.cnblogs.com/wanbo/p/6754066.html" target="_blank" rel="external">图解WebGL&Three.js工作原理 - cnwander - 博客园</a></p></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></div></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html">IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践</a></p><p><span>文章作者:</span><a href="/" title="访问 shenzekun 的个人博客">shenzekun</a></p><p><span>发布时间:</span>2019年12月14日 - 13:20</p><p><span>最后更新:</span>2019年12月14日 - 13:21</p><p><span>原始链接:</span><a href="/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html" title="IVWEB 玩转 WASM 系列-WEBGL YUV渲染图像实践">http://www.shenzekun.cn/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html</a><span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://www.shenzekun.cn/IVWEB-玩转-WASM-系列-WEBGL-YUV渲染图像实践.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>您的支持将鼓励我继续创作！</div><button id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'><span>赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/image/wechat-reward-image.png" alt="shenzekun WeChat Pay"><p>微信打赏</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/webgl/" rel="tag"><i class="fa fa-tag"></i>webgl</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/页面CPU和内存占用监控可视化Chrome插件-Graph-Process.html" rel="next" title="页面CPU和内存占用监控可视化Chrome插件-Graph Process"><i class="fa fa-chevron-left"></i> 页面CPU和内存占用监控可视化Chrome插件-Graph Process</a></div><div class="post-nav-prev post-nav-item"><a href="/React-16-8-6-版本存在内存泄露.html" rel="prev" title="React 16.8.6 版本存在内存泄露">React 16.8.6 版本存在内存泄露<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"></div></div></div><div class="comments" id="comments"><div id="lv-container" data-id="city" data-uid="MTAyMC8yODgyMi81Mzky"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview">站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person"><img class="site-author-image" itemprop="image" src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg" alt="shenzekun"><p class="site-author-name" itemprop="name">shenzekun</p><p class="site-description motion-element" itemprop="description">Road endless its long and far, I will seek up and down！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">39</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">6</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">19</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/shenzekun" target="_blank" rel="external nofollow" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://www.jianshu.com/u/b473784d730c" target="_blank" rel="external nofollow" title="简书"><i class="fa fa-fw fa-heartbeat"></i> 简书</a></span><span class="links-of-author-item"><a href="https://twitter.com/shenzekun" target="_blank" rel="external nofollow" title="Twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a></span><span class="links-of-author-item"><a href="https://segmentfault.com/u/juli_590dd17068b9e" target="_blank" rel="external nofollow" title="SegmentFault"><i class="fa fa-fw fa-meh-o"></i> SegmentFault</a></span><span class="links-of-author-item"><a href="http://blog.csdn.net/qq_33699981?viewmode=list" target="_blank" rel="external nofollow" title="csdn"><i class="fa fa-fw fa-crosshairs"></i> csdn</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/5866ed77ac502e00612f1949" target="_blank" rel="external nofollow" title="掘金"><i class="fa fa-fw fa-spinner"></i> 掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a></li><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a></li><li class="links-of-blogroll-item"><a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a></li><li class="links-of-blogroll-item"><a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a></li><li class="links-of-blogroll-item"><a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a></li></ul></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#YUV"><span class="nav-number">1.</span> <span class="nav-text">YUV</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#YUV-是什么"><span class="nav-number">1.0.1.</span> <span class="nav-text">YUV 是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#使用YUV-的好处"><span class="nav-number">1.0.2.</span> <span class="nav-text">使用YUV 的好处</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#YUV-采样"><span class="nav-number">1.0.3.</span> <span class="nav-text">YUV 采样</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#YUV-存储方式"><span class="nav-number">1.0.4.</span> <span class="nav-text">YUV 存储方式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#YUV-计算方法"><span class="nav-number">1.0.5.</span> <span class="nav-text">YUV 计算方法</span></a></li></ol></li></ol><li class="nav-item nav-level-2"><a class="nav-link" href="#WEBGL"><span class="nav-number">2.</span> <span class="nav-text">WEBGL</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#WEBGL-是什么"><span class="nav-number">2.0.1.</span> <span class="nav-text">WEBGL 是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WEBGL-组成"><span class="nav-number">2.0.2.</span> <span class="nav-text">WEBGL 组成</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#着色器"><span class="nav-number">2.0.3.</span> <span class="nav-text">着色器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WEBGL-绘制流程"><span class="nav-number">2.0.4.</span> <span class="nav-text">WEBGL 绘制流程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#WEBGL-YUV-绘制图像思路"><span class="nav-number">2.0.5.</span> <span class="nav-text">WEBGL YUV 绘制图像思路</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#遇到的问题"><span class="nav-number">3.</span> <span class="nav-text">遇到的问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参考文章"><span class="nav-number">4.</span> <span class="nav-text">参考文章</span></a></li></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">shenzekun</span></div><div class="theme-info"><i class="fa fa-pencil"></i> <span class="post-count">博客全站共 40.7k 字</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script><script type="text/javascript">!function(e,t){var n,c=e.getElementsByTagName(t)[0];"function"!=typeof LivereTower&&((n=e.createElement(t)).src="https://cdn-city.livere.com/js/embed.dist.js",n.async=!0,c.parentNode.insertBefore(n,c))}(document,"script")</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),n=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!1,n=r.title.trim().toLowerCase(),s=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=decodeURIComponent(r.url),i=-1,l=-1,p=-1;if(""!=n&&a.forEach(function(e,t){i=n.indexOf(e),l=s.indexOf(e),(i>=0||l>=0)&&(c=!0,0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+n+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;u<0&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),n.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").click(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script><script>AV.initialize("Cc9hxvKgB63w6aMIIBCV2Bfz-gzGzoHsz","mBmolCuukl1GN11A7m8VQj9f")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){if(0!==e.length){for(c=0;c<e.length;c++){var t=e[c],i=t.get("url"),s=t.get("time"),l=document.getElementById(i);$(l).find(".leancloud-visitors-count").text(s)}for(var c=0;c<n.length;c++){var i=n[c],l=document.getElementById(i),r=$(l).find(".leancloud-visitors-count");""==r.text()&&r.text(0)}}else o.find(".leancloud-visitors-count").text(0)}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var s=new e,l=new AV.ACL;l.setPublicReadAccess(!0),l.setPublicWriteAccess(!0),s.setACL(l),s.set("title",o),s.set("url",n),s.set("time",1),s.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script></body></html>