Flat Surface Shader

用于2D渲染的简单平面着色器

介绍

在线演示：https://pengsirs.gitee.io/51xk/14/

WebGL很酷，毫无疑问。但你知道什么更酷吗？2D。有时，你只想在2D图形领域工作。不幸的是，WebGL并不总是适用于这种场景。这就是简单而轻量级的平面着色器发挥作用的地方。

概述

这个平面着色器是在2D环境中渲染光照的强大工具。它高度可配置，可以与画布元素的2D上下文或SVG多边形数组一起使用，以绘制三角形。该着色器充分利用本机Float32Arrays来存储高度优化的数值数据，以满足您的所有渲染需求。

代码


<!doctype html>
<html>
<head>

<meta charset="utf-8"/>
<title>Flat Surface Shader</title>
<meta name="author" content="Matthew Wagerfield"/>
<meta name="keywords" content="flat,surface,shader,Float32Array"/>
<meta name="description" content="Simple, lightweight Flat Surface Shader for rendering lit triangles."/>
<meta property="og:description" content="Simple, lightweight Flat Surface Shader for rendering lit triangles."/>
<meta property="og:site_name" content="Flat Surface Shader"/>
<meta property="og:title" content="Flat Surface Shader"/>
<meta property="og:type" content="website"/>
<link rel="stylesheet" type="text/css" href="https://pengsirs.gitee.io/51xk/14/css/styles.css"/>

</head>
<body>

<div id="container" class="container">
    <div id="output" class="container"></div>
    <div id="vignette" class="overlay vignette"></div>
    <div id="noise" class="overlay noise"></div>
    <div id="ui" class="wrapper">
        <header id="header" class="header">
            <img class="logo" src="https://blog.hkiii.cn/content/uploadfile/202108/thum-c2a61629782832.jpeg">
            <h1>平面着色</h1>
        </header>
        <article id="information" class="information">
            <p>承认吧，3D很酷。但是，你知道什么更酷吗？二维。<br />我爱WebGL，但不幸的是它不工作，到处。</p>
            <p>这种灯光模拟可以被配置为使用画布元素的2D上下文或SVG多边形数组来绘制三角形。它还采用天然float32arrays存储高度优化的计算数值数据。</p>
        </article>
    </div>
</div>

<div id="controls" class="controls"></div>

<script src="https://pengsirs.gitee.io/51xk/14/js/prefixfree.min.js"></script>
<script src="https://pengsirs.gitee.io/51xk/14/js/dat.gui.min.js"></script>
<script src="https://pengsirs.gitee.io/51xk/14/js/fss.min.js"></script>
<script src="https://pengsirs.gitee.io/51xk/14/js/example.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</body>
</html>