54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<!doctype html>
|
|
|
|
<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
|
|
<!--[if IE 7 ]> <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]> <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
|
|
<!--[if IE 9 ]> <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
|
|
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<!--
|
|
HTML5 Reset: https://github.com/murtaugh/HTML5-Reset
|
|
Free to use
|
|
-->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<title>LUT image transform proof of concept</title>
|
|
<meta name="author" content="Peter Marquardt" />
|
|
<meta name="description" content="Proof of concept" />
|
|
|
|
<meta name="Copyright" content="Peter Marquardt" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="assets/css/reset.css" />
|
|
<link rel="stylesheet" href="assets/css/style.css" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="wrapper">
|
|
<h1>In-Browser texturing of precalculated 3D geometry and color grading demo</h1>
|
|
<canvas id="canvas" width="256" height="256"></canvas><img id="result" /><br />
|
|
<h2>texture select</h2>
|
|
<a class="textureselect active" href="source1.png">test pattern</a> <a class="textureselect" href="source2.jpg">floral</a> <a class="textureselect" href="source3.png">wood</a> <a class="textureselect" href="source4.jpg">abstract</a> <a class="textureselect" href="source5.jpg">visualization</a> <a class="textureselect" href="source6.jpg">product</a><br /><br />
|
|
<h2>bring your own texture</h2>
|
|
<label>Texture: <input type="file" id="imageLoader" name="imageLoader"/></label><br /><br />
|
|
<h2>parts used (precalculated using 3D software)</h2>
|
|
<img src="shadows0000.jpg" id="shadows" /><img src="specular0000.jpg" id="specular" /><img src="surface0000.png" id="surface map" /><br />
|
|
<h2>color grading tests</h2>
|
|
<a class="calcgrading" href="#">apply color grading</a><br /><br />
|
|
<img id="result2" /><img id="result3" /><img id="result4" />
|
|
</div>
|
|
|
|
<script src="assets/js/libs/jquery-1.11.3.min.js"></script>
|
|
<script src="assets/js/functions.js"></script>
|
|
<script>$(document).ready(initPage);</script>
|
|
|
|
</body>
|
|
</html>
|