在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