Василика Климова
<canvas>
![]() |
+ | ![]() |
+ | GLSL ES |
Описатели/Шейдеры | Вершинный | Фрагментный |
---|---|---|
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.299 * col.r + 0.587 * col.g + 0.114 * 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);
}
![]() |
![]() |
HueLevels[0] = 0.0;
HueLevels[1] = 80.0;
HueLevels[2] = 160.0;
HueLevels[3] = 240.0;
HueLevels[4] = 320.0;
HueLevels[5] = 360.0;
if (color == "Hue")
for (int i = 0; i<HueLevCount-1; i++)
if (col >= HueLevels[i] && col <= HueLevels[i+1])
return HueLevels[i+1];
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 );