shader.fragmentShader

* index8.html
//화면 생성
const scene = new THREE.Scene();

//카메라 설정
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.z = 50

//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

//메쉬 설정
var geometry = new THREE.SphereBufferGeometry(10, 36, 18);
var material = new THREE.PointsMaterial({color: 0xffff00, size: 0.5});
material.onBeforeCompile = shader => {
    shader.vertexShader = `varying float vVisible;` + shader.vertexShader;
    shader.vertexShader = shader.vertexShader.replace(
        `gl_PointSize = size;`,
        `vec3 vNormal = normalMatrix * normal;
        vVisible = step( 0., dot( -normalize(mvPosition.xyz), normalize(vNormal) ) );
        gl_PointSize = size;`
    );
    shader.fragmentShader = `varying float vVisible;` + shader.fragmentShader;
    shader.fragmentShader = shader.fragmentShader.replace(
    `#include `,
    `if ( floor(vVisible + 0.1) == 0.0 ) discard;
    #include `);
}
var points = new THREE.Points(geometry, material);
scene.add(points);

var mesh = new THREE.MeshBasicMaterial({color:"green", wireframe: true});
var wire = new THREE.Mesh(geometry, mesh);
scene.add(wire);


//조명 설정
const ambientLight = new THREE.AmbientLight(0x663399)
scene.add(ambientLight);

//애니메이션 설정
function animate() {
    requestAnimationFrame(animate);

    wire.rotation.x += .005
    wire.rotation.y += .005
    wire.rotation.z += .005

    points.rotation.x += .005
    points.rotation.y += .005
    points.rotation.z += .005

    renderer.render(scene, camera);
}
animate();

//화면 사이즈 설정
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);