simple Shader

simpleShader

 


<html>
<head>
 <title>FIRST THREE.JS TUTORIAL</title>
 <script id="vertexShader" type="x-shader/x-vertex">
 uniform sampler2D baseTexture;
 varying vec2 vUv;

 varying float vAmount;
 void main()
 {

 vUv = uv;
 vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 gl_Position = projectionMatrix * mvPosition;

 }
 </script>
 <script id="fragmentShader" type="x-shader/x-vertex">
 uniform sampler2D baseTexture;
 uniform sampler2D secondTexture;
 uniform sampler2D snowyTexture;

 uniform float alpha;
 varying vec2 vUv;

 varying float vAmount;

 void main()
 {
 vec4 grass = texture2D( baseTexture, vUv * 20.0 );
 vec4 rock = texture2D(secondTexture, vUv * 10.0);
 vec4 snowy = (smoothstep(0.01, 0.65, vAmount))* texture2D( snowyTexture, vUv * 70.0 );
 grass.a = alpha;
 rock.a = alpha;
 snowy.a = alpha;

 gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + grass + snowy;
 }
 </script>
</head>
<body>
 <div id="treejs" style="position: absolute; left:0px; top:0px"></div>
 <script type="text/javascript" src="js/three2.js"></script>
 <script src="js/loaders/ColladaLoader.js"></script>
 <script src="js/OrbitControls.js"></script>
 <script src="js/libs/stats.min.js"></script>
 <script type="text/javascript">
 var container;
 var scene, camera, renderer, stats, controls, sceneCube;
 var geometry, material;
 var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
 var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
 var clock = new THREE.Clock();

 var uniform;
 //-- variable uniforms
 var customUniforms;

 init();
 animate();

 function init()
 {
 container = document.getElementById('treejs');
 document.body.appendChild(container);

 scene = new THREE.Scene();


 //-- camera
 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
 camera.position.set(0,400,400);
 camera.lookAt(scene.position);
 scene.add(camera);
 //-- light
 var light = new THREE.PointLight(0xffffff);
 light.position.set(0,250,0);
 light.lookAt(scene.position);
 scene.add(light);


 //-- axes
 var axes = new THREE.AxisHelper(1000);
 scene.add(axes);

 //-- grid
 var grid = new THREE.GridHelper(500,500);
 scene.add(grid);

 // Skybox
 sceneCube = new THREE.Scene();

 var path = "resource/Cloudy-Sky/";
 var format = '.jpg';
 //-- bt buttom, ft front, up top,
 var urls = [
 path + 'px' + format, //benar salah
 path + 'nx' + format, // benar
 path + 'py' + format, //
 path + 'ny' + format, //bawah benar
 path + 'pz' + format, //benar benar
 path + 'nz' + format // benar
 ];

 var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
 var shader = THREE.ShaderLib[ "cube" ];
 shader.uniforms[ "tCube" ].value = textureCube;

 var material = new THREE.ShaderMaterial( {

 fragmentShader: shader.fragmentShader,
 vertexShader: shader.vertexShader,
 uniforms: shader.uniforms
 ,depthWrite: false,
 side: THREE.BackSide

 } ),

 meshSkybox = new THREE.Mesh( new THREE.CubeGeometry( 10000, 10000, 10000,1 ,1 ,1, null, true ), material );
 scene.add( meshSkybox );
 scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
 scene.fog.color.setHSL( 0.6, 0, 1 );

 var jsonLoader = new THREE.JSONLoader();
 jsonLoader.load( "resource/heightmap/IceAge.js", addModelToScene );

 var cube = new THREE.CubeGeometry(50,50,50);
 var box = new THREE.Mesh(cube);
 scene.add(box);


 stats = new Stats();
 stats.domElement.style.position = 'absolute';
 stats.domElement.style.bottom = '0px';
 stats.domElement.style.zIndex = 100;
 container.appendChild(stats.domElement);

 renderer = new THREE.WebGLRenderer();
 renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 container.appendChild( renderer.domElement );

 // CONTROLS
 controls = new THREE.OrbitControls( camera, renderer.domElement );
 }
 //-- model function
 function addModelToScene(geometry, material)
 {
 var texture1 = new THREE.ImageUtils.loadTexture("resource/images/grass-512.jpg");
 texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;

 var texture2 = new THREE.ImageUtils.loadTexture("resource/images/grass-512.jpg");
 texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;

 var snowyTexture = new THREE.ImageUtils.loadTexture( 'resource/images/snow-512.jpg' );
 snowyTexture.wrapS = snowyTexture.wrapT = THREE.RepeatWrapping;


 customUniforms =
 {
 baseTexture : { type:"t", value: texture1},
 secondTexture: { type:"t", value: texture2},
 snowyTexture: { type: "t", value: snowyTexture },
 alpha : { type:"f", value: 1.0}
 };

 var shMaterial = new THREE.ShaderMaterial
 (
 {
 uniforms : customUniforms,
 fragmentShader : document.getElementById('fragmentShader').textContent,
 vertexShader : document.getElementById('vertexShader').textContent,
 }
 );


 terrain = new THREE.Mesh(geometry, shMaterial);
 terrain.scale.set(128,128,128);
 //camera.lookAt(terrain.position);
 scene.add(terrain);
 }
 function animate()
 {
 requestAnimationFrame(animate);
 render();
 update();
 }
 function update()
 {
 var delta = clock.getDelta();
 time = clock.getElapsedTime() * 1000;
 stats.update();
 controls.update(delta);
 }
 function render()
 {
 renderer.render(scene, camera);
 }

 </script>
</body>
</html>

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s