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

前言

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

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

WebGL高级进阶之路-滤镜grayscale实现_第1张图片

  • 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>

body>
html>
  • JavaScript

你可能感兴趣的:(webgl)