Vasilika Klimova
<canvas>
![]() |
+ | ![]() |
+ | GLSL ES |
Perspective projection - PerspectiveCamera
Orthographic projection - OrthographicCamera
Qualifiers/Shaders | Vertex | Fragment |
---|---|---|
attribute | READ | - |
uniform | READ | READ |
varying | READ/WRITE | READ |
<script type="x-shader/x-vertex" id="vshader">
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fshader">
uniform sampler2D u_Sampler;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(u_Sampler, vUv);
}
</script>
var vShader = document.getElementById("vshader").text;
var fShader = document.getElementById("fshader").text;
object.material = new THREE.ShaderMaterial({
uniforms: {
u_Sampler: {type: "t", value: texture}
},
vertexShader: vShader,
fragmentShader: fShader,
});
filter: grayscale(100%);
<script type="x-shader/x-fragment" id="fshader">
uniform sampler2D u_Sampler;
varying vec2 vUv;
void main() {
vec4 color = texture2D(u_Sampler, vUv);
color.rgb = vec3(color.r + color.g + color.b)/3.0;
gl_FragColor = color;
} </script>
float tone = 0.2126 * col.r + 0.7152 * col.g + 0.0722 * col.b;
col.r = (tone > (0.81)) ? 1.0 : tone + 0.19;
col.g = (tone < (0.055)) ? 0.0 : tone - 0.055;
col.b = (tone < (0.22)) ? 0.0 : tone - 0.22;
gl_FragColor = col;
renderer = new THREE.WebGLRenderer()
animate();
animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
const urls = [
require('/posx.jpg'),
require('/negx.jpg'),
require('/posy.jpg'),
require('/negy.jpg'),
require('/posz.jpg'),
require('/negz.jpg'),
];
const materials = [];
for (let i = 0, length = urls.length; i < length; i++) {
materials.push(new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load(urls[i]),
side: THREE.BackSide
}));
}
const skybox = new THREE.Mesh(
new THREE.CubeGeometry(7000, 7000, 7000),
new THREE.MultiMaterial(materials)
);
composer = new THREE.EffectComposer(renderer);
composer.addPass( new THREE.RenderPass(scene, camera) );
Toon = { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, };
effect = new THREE.ShaderPass(Toon);
effect.renderToScreen = true;
composer.addPass(effect);
animate();
animate: function() {
requestAnimationFrame(animate);
composer.render();
}
particleObj = new THREE.ParticleSystem(geometry, material);
particleObj.position.set(0, 50, 0);
particleObj.dynamic = true;
particleObj.sortParticles = true;
scene.add( particleObj );