在GLSL中插入具有片段和頂點着色器的Colous

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 ，如下所示：

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 個解決方案

解決方案1
0 已采納 2017-06-28 18:58:03

在GLSL中插入具有片段和頂點着色器的Colous

問題描述

1 個解決方案

解決方案1 0 已采納 2017-06-28 18:58:03

解決方案1
0 已采納 2017-06-28 18:58:03