--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>three.js webgl - raw shader</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+ <style>
+ body {
+ color: #ffffff;
+ font-family:Monospace;
+ font-size:13px;
+ text-align:center;
+ font-weight: bold;
+
+ background-color: #000000;
+ margin: 0px;
+ overflow: hidden;
+ }
+
+ #info {
+ position: absolute;
+ top: 0px; width: 100%;
+ padding: 5px;
+ }
+
+ a {
+ color: #ffffff;
+ }
+
+ #oldie a { color:#da0 }
+ </style>
+ </head>
+ <body>
+
+ <div id="container"></div>
+ <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raw shader demo</div>
+
+ <script src="../build/three.js"></script>
+
+ <script src="js/Detector.js"></script>
+ <script src="js/libs/stats.min.js"></script>
+
+ <script id="vertexShader" type="x-shader/x-vertex">
+
+ precision mediump float;
+ precision mediump int;
+
+ uniform mat4 modelViewMatrix; // optional
+ uniform mat4 projectionMatrix; // optional
+
+ attribute vec3 position;
+ attribute vec4 color;
+
+ varying vec3 vPosition;
+ varying vec4 vColor;
+
+ void main() {
+
+ vPosition = position;
+ vColor = color;
+
+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+ }
+
+ </script>
+
+ <script id="fragmentShader" type="x-shader/x-fragment">
+
+ precision mediump float;
+ precision mediump int;
+
+ uniform float time;
+
+ varying vec3 vPosition;
+ varying vec4 vColor;
+
+ void main() {
+
+ vec4 color = vec4( vColor );
+ color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
+
+ gl_FragColor = color;
+
+ }
+
+ </script>
+
+ <script>
+
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+ var container, stats;
+
+ var camera, scene, renderer;
+
+ init();
+ animate();
+
+ function init() {
+
+ container = document.getElementById( 'container' );
+
+ camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
+ camera.position.z = 2;
+
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x101010 );
+
+ // geometry
+
+ var triangles = 500;
+
+ var geometry = new THREE.BufferGeometry();
+
+ var vertices = new Float32Array( triangles * 3 * 3 );
+
+ for ( var i = 0, l = triangles * 3 * 3; i < l; i += 3 ) {
+
+ vertices[ i ] = Math.random() - 0.5;
+ vertices[ i + 1 ] = Math.random() - 0.5;
+ vertices[ i + 2 ] = Math.random() - 0.5;
+
+ }
+
+ geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+
+ var colors = new Uint8Array( triangles * 3 * 4 );
+
+ for ( var i = 0, l = triangles * 3 * 4; i < l; i += 4 ) {
+
+ colors[ i ] = Math.random() * 255;
+ colors[ i + 1 ] = Math.random() * 255;
+ colors[ i + 2 ] = Math.random() * 255;
+ colors[ i + 3 ] = Math.random() * 255;
+
+ }
+
+ geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4, true ) );
+
+ // material
+
+ var material = new THREE.RawShaderMaterial( {
+
+ uniforms: {
+ time: { value: 1.0 }
+ },
+ vertexShader: document.getElementById( 'vertexShader' ).textContent,
+ fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+ side: THREE.DoubleSide,
+ transparent: true
+
+ } );
+
+ var mesh = new THREE.Mesh( geometry, material );
+ scene.add( mesh );
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setPixelRatio( window.devicePixelRatio );
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ container.appendChild( renderer.domElement );
+
+ stats = new Stats();
+ container.appendChild( stats.dom );
+
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ function onWindowResize( event ) {
+
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( window.innerWidth, window.innerHeight );
+
+ }
+
+ //
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ render();
+ stats.update();
+
+ }
+
+ function render() {
+
+ var time = performance.now();
+
+ var object = scene.children[ 0 ];
+
+ object.rotation.y = time * 0.0005;
+ object.material.uniforms.time.value = time * 0.005;
+
+ renderer.render( scene, camera );
+
+ }
+
+ </script>
+
+ </body>
+</html>
OSDN Git Service
