shader01_texture単純応用
电子书籍あるいはソースコードQ群:820202939みんなと一绪に勉强して、一绪に进歩することを望みます!!
もし誤字や理解が不十分なところがあれば、伝言や微信152509699798を加えることができ、ブロガーはすぐに修正します!!!
最近ブログ主がshaderを勉強しているので、手当たり次第に覚えておきました!!
このブログは頂点、チップシェーダの基礎をある程度理解するのに適しています.理解しない場合はブロガーのWebGLシリーズのブログを見てください.
公式ドキュメントShaderMaterialです!
今日はshaderのtextureの簡単な応用を勉強します
効果図:
コードは次のとおりです.
もし誤字や理解が不十分なところがあれば、伝言や微信152509699798を加えることができ、ブロガーはすぐに修正します!!!
最近ブログ主がshaderを勉強しているので、手当たり次第に覚えておきました!!
このブログは頂点、チップシェーダの基礎をある程度理解するのに適しています.理解しない場合はブロガーのWebGLシリーズのブログを見てください.
公式ドキュメントShaderMaterialです!
今日はshaderのtextureの簡単な応用を勉強します
効果図:
コードは次のとおりです.
shader01_texture
//
uniform sampler2D texture1;
//
varying vec2 vUv;
void main(void){
//texture2D()
gl_FragColor = texture2D(texture1, vUv);
}
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
//projectionMatrix * mvPosition; MVP
gl_Position = projectionMatrix * mvPosition;
}
var scene, camera, renderer,controls;
var mesh;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onResize, false);
var controls = new THREE.OrbitControls(camera);
var textureLoader = new THREE.TextureLoader();
// shaderMaterial uniforms
var uniforms = {
texture1: {
value: textureLoader.load('../../textures/cube/Bridge2/negz.jpg')
}
};
//
uniforms.texture1.value.warpS = uniforms.texture1.value.warpT = THREE.RepeatWrapping;
// BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )
var geometry = new THREE.BoxGeometry(5, 5, 5, 3, 3, 3);
var Material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent,
side: THREE.DoubleSide
});
mesh = new THREE.Mesh(geometry, Material);
scene.add(mesh);
function onResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = (window.innerWidth / window.innerHeight);
camera.updateProjectionMatrix();
}
function render() {
requestAnimationFrame(render);
if (controls) controls.update();
mesh.rotation.y += 0.005;
renderer.render(scene, camera);
}
render();