java幂指数函数_GPU编程shader之正余弦波和幂/指数函数

Document

margin:0;

height:100%;

}

canvas {

display: block;

}

voidmain(){

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

}

uniform vec2 resolution;void main( void) {float x =gl_FragCoord.x;float y =gl_FragCoord.y;float fy = sin(x / 100. + time * 5.) * 100. + 250.;float opacity = 0.0;if(y >fy){

opacity= 1.0;

}

gl_FragColor= vec4(1.,1.,1.,opacity);

}

varrenderer;varclock ;

function initRender() {

clock= newTHREE.Clock();

renderer= new THREE.WebGLRenderer({antialias: true,alpha:true});

renderer.setSize(window.innerWidth, window.innerHeight);//告诉渲染器需要阴影效果//renderer.shadowMap.enabled = true;//renderer.shadowMap.type = THREE.PCFSoftShadowMap;//默认的是，没有设置的这个清晰 THREE.PCFShadowMap

renderer.setClearColor(0xffffff);

document.body.appendChild(renderer.domElement);

}varcamera;

function initCamera() {

camera= new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 0, 150);

camera.lookAt(new THREE.Vector3(0, 0, 0));

}varscene;

function initScene() {

scene= newTHREE.Scene();var bgTexture = new THREE.TextureLoader().load("../texture/starfiled.jpeg");

scene.background=bgTexture;

}

function initLight() {var hemisphereLight1 = new THREE.HemisphereLight(0xffffff, 0x444444, 2);

hemisphereLight1.position.set(0, 200, 0);

scene.add(hemisphereLight1);

}varplane;

function addplane(){var planeGeometry = new THREE.PlaneGeometry(450,250)var meshMaterial = createMaterial("vertex-shader", "fragment-shader-8");

plane= newTHREE.Mesh(planeGeometry,meshMaterial);

scene.add(plane);

}//创建ShaderMaterial纹理的函数

function createMaterial(vertexShader, fragmentShader) {var vertShader = document.getElementById(vertexShader).innerHTML; //获取顶点着色器的代码

var fragShader = document.getElementById(fragmentShader).innerHTML; //获取片元着色器的代码//配置着色器里面的attribute变量的值

var attributes ={};//配置着色器里面的uniform变量的值

var uniforms ={

time: {type:'f', value: 1.0},

scale: {type:'f', value: 0.2},

alpha: {type:'f', value: 0.6},

resolution: {type:"v2", value: newTHREE.Vector2(window.innerWidth, window.innerHeight)}

};var meshMaterial = newTHREE.ShaderMaterial({

uniforms: uniforms,

defaultAttributeValues : attributes,

vertexShader: vertShader,

fragmentShader: fragShader,

transparent:true});returnmeshMaterial;

}//初始化性能插件

varstats;

function initStats() {

stats= newStats();

document.body.appendChild(stats.dom);

}//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放

varcontrols;

function initControls() {

controls= newTHREE.OrbitControls(camera, renderer.domElement);//如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );//使动画循环使用时阻尼或自转 意思是否有惯性

controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放

controls.enableZoom = true;//是否自动旋转

controls.autoRotate = false;

controls.autoRotateSpeed= 3;//设置相机距离原点的最远距离

controls.minDistance = 1;//设置相机距离原点的最远距离

controls.maxDistance = 200;//是否开启右键拖拽

controls.enablePan = true;

}

function render() {var delta =clock.getDelta();

renderer.render(scene, camera);if(plane){

plane.material.uniforms.time.value+= 0.01;

}

}//窗口变动触发的函数

function onWindowResize() {

camera.aspect= window.innerWidth /window.innerHeight;

camera.updateProjectionMatrix();

render();

renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {//更新控制器

render();//更新性能插件

stats.update();

controls.update();

requestAnimationFrame(animate);

}

function draw() {

initScene();

initCamera();

initLight();

initRender();

addplane();

initControls();

initStats();

animate();

window.οnresize=onWindowResize;

}

draw();