|
@@ -15,17 +15,20 @@
|
|
font-weight: lighter;
|
|
font-weight: lighter;
|
|
}
|
|
}
|
|
|
|
|
|
- a {
|
|
|
|
- color: gray;
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
#info {
|
|
#info {
|
|
- color: gray;
|
|
|
|
|
|
+ color: #fff;
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 0px;
|
|
|
|
|
|
+ top: 10px;
|
|
width: 100%;
|
|
width: 100%;
|
|
- padding: 15px;
|
|
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #info a {
|
|
|
|
+ color: #f88;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ text-decoration: underline;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
.dg.ac {
|
|
.dg.ac {
|
|
@@ -48,13 +51,12 @@
|
|
<div id="container"></div>
|
|
<div id="container"></div>
|
|
|
|
|
|
<div id="info">
|
|
<div id="info">
|
|
- <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - pixel shader example<br/>
|
|
|
|
- shader by <a href="http://wongbryan.github.io">wongbryan</a>
|
|
|
|
|
|
+ <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - pixel shader by <a href="http://wongbryan.github.io">wongbryan</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
- var camera, scene, renderer, gui, composer,controls;
|
|
|
|
|
|
+ var camera, scene, renderer, gui, composer, controls;
|
|
var pixelPass, params;
|
|
var pixelPass, params;
|
|
|
|
|
|
var group;
|
|
var group;
|
|
@@ -84,7 +86,6 @@
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
- renderer.setClearColor( 0xbfe7ff );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
@@ -152,11 +153,11 @@
|
|
window.addEventListener( 'resize', resize );
|
|
window.addEventListener( 'resize', resize );
|
|
|
|
|
|
params = {
|
|
params = {
|
|
- pixelSize: 128,
|
|
|
|
|
|
+ pixelSize: 16,
|
|
postprocessing: true
|
|
postprocessing: true
|
|
};
|
|
};
|
|
gui = new dat.GUI();
|
|
gui = new dat.GUI();
|
|
- gui.add( params, 'pixelSize' ).min( 2 ).max( 256 ).step( 2 );
|
|
|
|
|
|
+ gui.add( params, 'pixelSize' ).min( 2 ).max( 32 ).step( 2 );
|
|
gui.add( params, 'postprocessing' );
|
|
gui.add( params, 'postprocessing' );
|
|
|
|
|
|
}
|
|
}
|