Question

我想在场景中绘制一个正方形的立方体，两者都带有插值颜色。我想只使用片段和顶点着色器！我可以用简单的一种颜色绘制它。

该代码如下

<!DOCTYPE html>
[enter image description here][1]<html>
<head>
    <meta charset="utf-8">
    <title>GLSL - Texturen</title>  
</head>

<body>
    <h1>Texturen</h1>
    <!-- three.js einbinden -->
    <script src="js/three.min.js"></script>
    <!-- Einbinden der OrbitControls, um die Darstellung mit der Maus rotieren zu können. -->
    <script src="js/OrbitControls.js"></script>

    <script type="x-shader/x-vertex" id="vertexshader">

        // switch on high precision floats
        #ifdef GL_ES
        precision highp float;
        #endif

        // transmit uv coordinates to fragment shader

        void main()
        {
            /* set fragment position */
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);             
            // transmit uv coordinates to fragment shader
        }

    </script>

    <script type="x-shader/x-fragment" id="fragmentshader">

        #ifdef GL_ES
        precision highp float;
        #endif
        // transmit uv coordinates to fragment shader

        void main()
        {
            // set color based on uv coordinates
            // gl_FragColor = 
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }

    </script>

    <!-- TODO: separate Shader für spätere getrennte Behandlung von Kugel und Würfel -->

    <script>
        /* Copyright world image: By NASA/Goddard Space Flight Center [Public domain], via Wikimedia Commons */

        /* Scene */
        var scene = new THREE.Scene();

        /* Camera */
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/(window.innerHeight-150),1,1000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 20;
        camera.lookAt(new THREE.Vector3(0,0,-10));
        scene.add(camera);

        /* Renderer */
        var renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, (window.innerHeight-150));
        renderer.setClearColor( 0xeeeeee);
        renderer.clear();

        /* Append document to HTML */
        document.body.appendChild(renderer.domElement);

        // load vertex shader by using the inner content of the element
        // 'vertexshader' 
        var vShader = document.getElementById('vertexshader').textContent;
        // load fragement shader by using the inner content of the element
        // 'fragmentshader' 
        var fShader = document.getElementById('fragmentshader').textContent;


        // create the shader material to use the custom vertex and fragment shaders
        var shaderMaterial =
          new THREE.ShaderMaterial({
            vertexShader:   vShader,
            fragmentShader: fShader,
            vertexColors: THREE.FaceColors,
        });

        /* definition of a sphere */
        var sphereGeometry = new THREE.SphereGeometry(5, 60, 60);
        // create the mesh
        sphereMesh = new THREE.Mesh(sphereGeometry, shaderMaterial);
        // location
        sphereMesh.position.set(-8, 0, -5);
        // ... and add it to the scene
        scene.add(sphereMesh);

        // TODO (1d): Add your code so that only the right part of the texture is shown 
        // for each face


        // END TODO

        /* definition of a cube */
        var cubeGeometry = new THREE.BoxGeometry(8, 8, 8);
        // create the mesh
        cubeMesh = new THREE.Mesh(cubeGeometry, shaderMaterial);
        // location
        cubeMesh.position.set(8, 0, -5);
        // ... and add it to the scene
        scene.add(cubeMesh);

        // OrbitControls erzeugen, um mit der Maus beliebig rotieren zu können
        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        // initialize the system
        init();


        function render() {
            requestAnimationFrame( render );
            controls.update();

            renderer.render( scene, camera );
        }

        function init() {
            render();
        }

    </script>

，结果如下：

立方体和正方形只是红色！但我希望它是插值颜色。任何人都可以告诉我如何在片段和顶点着色器中添加一些东西吗？

我想得到的结果应该是这样的：

Answer 1

您可以使用变量将顶点着色器中的UV坐标传递到片段着色器，然后使用其x和y值来制作gl_FragColor，如下所示：< / p>

var vShader = `
varying vec2 vUv;
void main()
{
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);             
}`;

var fShader = `
varying vec2 vUv;
void main()
{
    gl_FragColor = vec4(vUv.x, vUv.y, 0., 1.0);
}
`;

jsfiddle示例r86。

PS Bonus：如果您想了解有关片段着色器的更多信息，那么您可以访问https://www.shadertoy.com/

在GLSL中插入具有片段和顶点着色器的Colous

1 个答案: