Three.js/Webgl X-RAY 效果 [英] Three.js / Webgl X-RAY effect

问题描述

如何在three.js/webgl中实现x-ray风格的效果?一些这样的

更新

我需要使用这些东西进行实时渲染，而不是静止图像.这可以通过着色器来完成，它根据距离以非线性方式在重叠上改变密度.我简单地了解理论，但没有实践，这就是为什么我需要帮助

解决方案

好的，得到了​​可以接受的结果:

<头><title>X射线</title><script type="text/javascript" src="js/three.js/build/three.js"></script><script type="text/javascript" src="js/three.js/examples/js/loaders/OBJLoader.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="js/stats.min.js"></script><script type="text/javascript" src="js/three.js/examples/js/renderers/SVGRenderer.js"></script><script id="vertexShader" type="x-shader/x-vertex">统一的 vec3 viewVector；均匀浮动c；均匀浮动p；不同的漂浮强度；无效主(){vec3 vNormal = normalize( normalMatrix * normal );vec3 vNormel = normalize( normalMatrix * viewVector );强度 = pow( c - dot(vNormal, vNormel), p);gl_Position = 投影矩阵 * 模型视图矩阵 * vec4( 位置, 1.0 );}<!-- 片段着色器又名像素着色器--><script id="fragmentShader" type="x-shader/x-vertex">统一的 vec3 发光颜色；不同的漂浮强度；无效主(){vec3 辉光 = 辉光颜色 * 强度；gl_FragColor = vec4(glow, 1.0);}<风格>身体 {/* 将边距设置为 0 并将溢出设置为隐藏，以全屏显示 */边距:0；溢出:隐藏；}</风格><身体><div id="统计输出">

<!-- 将保存输出的 Div --><div id="WebGL-输出">

<!-- 运行我们 Three.js 示例的 Javascript 代码 --><script type="text/javascript">//加载完所有内容后，我们运行 Three.js 内容.$(函数(){var mouseX = 0, mouseY = 0;变种人；坎步 = 0;var stats = initStats();//创建一个场景，该场景将包含我们所有的元素，例如对象、相机和灯光.var scene = new THREE.Scene();//创建一个相机，它定义了我们正在看的地方.var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);//创建渲染并设置大小var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});renderer.setClearColor(0x000000, 1.0);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;renderer.shadowMapType = THREE.PCFShadowMap;materialCameraPosition = camera.position.clone();materialCameraPosition.z += 10;//将相机定位并指向场景的中心camera.position.x = -10;相机.位置.y = 0;相机.位置.z = 15;lookAt = 场景位置；看.y = 15;相机.看(看)；//添加微妙的环境照明varambientLight = new THREE.AmbientLight(0x0c0c0c);//scene.add(ambientLight);//将渲染器的输出添加到 html 元素$("#WebGL-output").append(renderer.domElement);var customMaterial = new THREE.ShaderMaterial({制服:{"c": { type: "f", value: 1.0 },"p": { 类型: "f", 值: 3 },glowColor: { type: "c", value: new THREE.Color(0x84ccff) },viewVector: { type: "v3", value: materialCameraPosition }},vertexShader: document.getElementById('vertexShader').textContent,fragmentShader: document.getElementById('fragmentShader').textContent,侧面:三.FrontSide，混合:三.AdditiveBlending，透明:真实，//不透明度:0.5，深度写入:假});var manager = new THREE.LoadingManager();manager.onProgress = 函数(项目，已加载，总计){控制台日志(项目，已加载，总计)；};var loader = new THREE.OBJLoader(manager);loader.load('body_anatomy3.obj', 函数(对象){控制台日志(对象)；object.traverse(函数(子){如果(THREE.Mesh的子实例){控制台日志(孩子)；child.material = customMaterial;}});object.position.y = 4;object.scale.x = 0.01;object.scale.y = 0.01;object.scale.z = 0.01;人 = 对象；场景添加(人类)；});//调用渲染函数无功步骤= 0;使成为();函数渲染(){stats.update();坎步 += 0.02;camera.position.x = -20 * (Math.cos(camstep));camera.position.z = (20 * (Math.sin(camstep)));相机位置 y = 20;相机.看(看)；如果(人类){//human.rotation.y += 0.02;materialCameraPosition = camera.position.clone();materialCameraPosition.z += 10;人类.traverse(功能(孩子){如果(THREE.Mesh的子实例){//console.log(child.material.uniforms.viewVector);child.material.uniforms.viewVector.value =new THREE.Vector3().subVectors(camera.position, human.position);}});}//sphere.material.uniforms.viewVector.value = new THREE.Vector3().subVectors(camera.position, sphere.position);//使用 requestAnimationFrame 渲染请求动画帧(渲染)；renderer.render(场景，相机)；}函数 initStats() {var stats = new Stats();stats.setMode(0);//0: fps, 1: 毫秒//左上对齐stats.domElement.style.position = '绝对';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';$("#Stats-output").append(stats.domElement);返回统计数据；}});

How to achieve an x-ray-style effect in three.js / webgl? Some sort of this

UPD

I need real-time render with this stuff, not a still image. This can be done with shaders, that change density in non-linear way on overlaps based on distance. I briefly understand theory, but have no practice, that is why I need help with this

解决方案

Ok, got acceptable result with this:

<!DOCTYPE html>
<html>

<head>
    <title>X-ray</title>
    <script type="text/javascript" src="js/three.js/build/three.js"></script>
    <script type="text/javascript" src="js/three.js/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/stats.min.js"></script>
    <script type="text/javascript" src="js/three.js/examples/js/renderers/SVGRenderer.js"></script>

    <script id="vertexShader" type="x-shader/x-vertex">
        uniform vec3 viewVector;
        uniform float c;
        uniform float p;
        varying float intensity;
        void main()
        {
            vec3 vNormal = normalize( normalMatrix * normal );
            vec3 vNormel = normalize( normalMatrix * viewVector );
            intensity = pow( c - dot(vNormal, vNormel), p );

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    </script>

    <!-- fragment shader a.k.a. pixel shader -->
    <script id="fragmentShader" type="x-shader/x-vertex">
        uniform vec3 glowColor;
        varying float intensity;
        void main()
        {
            vec3 glow = glowColor * intensity;
            gl_FragColor = vec4( glow, 1.0 );
        }
    </script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */

            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
    // once everything is loaded, we run our Three.js stuff.
    $(function () {
        var mouseX = 0, mouseY = 0;
        var human;
        camstep = 0;

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        renderer.shadowMapType = THREE.PCFShadowMap;


        materialCameraPosition = camera.position.clone();
        materialCameraPosition.z += 10;

        // position and point the camera to the center of the scene
        camera.position.x = -10;
        camera.position.y = 0;
        camera.position.z = 15;
        lookAt = scene.position;
        lookAt.y = 15;
        camera.lookAt(lookAt);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        //scene.add(ambientLight);


        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);

        var customMaterial = new THREE.ShaderMaterial(
                {
                    uniforms: {
                        "c": { type: "f", value: 1.0 },
                        "p": { type: "f", value: 3 },
                        glowColor: { type: "c", value: new THREE.Color(0x84ccff) },
                        viewVector: { type: "v3", value: materialCameraPosition }
                    },
                    vertexShader: document.getElementById('vertexShader').textContent,
                    fragmentShader: document.getElementById('fragmentShader').textContent,
                    side: THREE.FrontSide,
                    blending: THREE.AdditiveBlending,
                    transparent: true,
                    //opacity: 0.5,
                    depthWrite: false
                });

        var manager = new THREE.LoadingManager();
        manager.onProgress = function (item, loaded, total) {
            console.log(item, loaded, total);
        };
        var loader = new THREE.OBJLoader(manager);
        loader.load('body_anatomy3.obj', function (object) {
            console.log(object);
            object.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    console.log(child);
                    child.material = customMaterial;
                }
            });
            object.position.y = 4;
            object.scale.x = 0.01;
            object.scale.y = 0.01;
            object.scale.z = 0.01;
            human = object;
            scene.add(human);
        });


        // call the render function
        var step = 0;
        render();

        function render() {
            stats.update();

            camstep += 0.02;

            camera.position.x = -20 * (Math.cos(camstep));
            camera.position.z = (20 * (Math.sin(camstep)));
            camera.position.y = 20;

            camera.lookAt(lookAt);

            if (human) {
                //human.rotation.y += 0.02;
                materialCameraPosition = camera.position.clone();
                materialCameraPosition.z += 10;
                human.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        //console.log(child.material.uniforms.viewVector);
                        child.material.uniforms.viewVector.value =
                                new THREE.Vector3().subVectors(camera.position, human.position);
                    }
                });
            }

            //sphere.material.uniforms.viewVector.value = new THREE.Vector3().subVectors(camera.position, sphere.position);

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            $("#Stats-output").append(stats.domElement);

            return stats;
        }
    });
</script>
</body>

</html>

这篇关于Three.js/Webgl X-RAY 效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！