个人中心
gpt4 book ai didi

javascript - 在 webgl 中绘制多个对象

转载 作者：行者123 更新时间：2023-11-30 00:20:58 25 4
gpt4 key购买 nike

我是 WebGL 初学者，正在尝试绘制多个对象，我已经渲染了一个，现在要绘制多个。多对象渲染的教程非常少，我能找到的是这个链接 http://webglfundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html

我尝试根据它更改代码但它不起作用，请有人纠正问题并给出解决方案并解释那我的尝试有什么问题吗？

我的完整代码是:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script class="WebGL">
        var gl;
        function createProgram(gl, vertexShader, fragmentShader)
        {
            var vs = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vs, vertexShader);
            gl.compileShader(vs);

            if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
                alert(gl.getShaderInfoLog(vs));
            //////
            var fs = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fs, fragmentShader);
            gl.compileShader(fs);

            if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
                alert(gl.getShaderInfoLog(fs));
            program = gl.createProgram();
            gl.attachShader(program, vs);
            gl.attachShader(program, fs);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program, gl.LINK_STATUS))
                alert(gl.getProgramInfoLog(program));
            return program;
        }
        function createShaderFromScriptElement(gl , shaderName)
        {
            var Shader = document.getElementById(shaderName).firstChild.nodeValue;
            return Shader;
        }
        function start()
        {
            var canvas = document.getElementById("canvas");
            gl = canvas.getContext("experimental-webgl");
            if (!gl) { alert("error while GL load"); }

              var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
              var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");

              var program = createProgram(gl, vertexShader, fragmentShader);

            gl.useProgram(program);
            var colorMult = gl.getAttribLocation(program, "u_colorMult");
            var colorLocation = gl.getUniformLocation(program, "u_color");


            // Our uniforms for each thing we want to draw
            var sphereUniforms = {
                u_colorMult: [0.5, 1, 0.5, 1],
                u_matrix: makeIdentity(),
            };
            var cubeUniforms = {
                u_colorMult: [1, 0.5, 0.5, 1],
                u_matrix: makeIdentity(),
            };
            var coneUniforms = {
                u_colorMult: [0.5, 0.5, 1, 1],
                u_matrix: makeIdentity(),
            };

            // The translation for each object.
            var sphereTranslation = [0, 0, 0];
            var cubeTranslation = [-40, 0, 0];
            var coneTranslation = [40, 0, 0];


            var sphereXRotation = time;
            var sphereYRotation = time;
            var cubeXRotation = -time;
            var cubeYRotation = time;
            var coneXRotation = time;
            var coneYRotation = -time;

            // ------ Draw the sphere --------

            gl.useProgram(programInfo.program);

            // Setup all the needed attributes.
            setBuffersAndAttributes(gl, programInfo.attribSetters, sphereBufferInfo);

            sphereUniforms.u_matrix = computeMatrix(
                viewMatrix,
                projectionMatrix,
                sphereTranslation,
                sphereXRotation,
                sphereYRotation);

            // Set the uniforms we just computed
            setUniforms(programInfo.uniformSetters, sphereUniforms);

            gl.drawArrays(gl.TRIANGLES, 0, sphereBufferInfo.numElements);

            // ------ Draw the cube --------

            // Setup all the needed attributes.
            setBuffersAndAttributes(gl, programInfo.attribSetters, cubeBufferInfo);

            cubeUniforms.u_matrix = computeMatrix(
                viewMatrix,
                projectionMatrix,
                cubeTranslation,
                cubeXRotation,
                cubeYRotation);

            // Set the uniforms we just computed
            setUniforms(programInfo.uniformSetters, cubeUniforms);

            gl.drawArrays(gl.TRIANGLES, 0, cubeBufferInfo.numElements);

            // ------ Draw the cone --------

            // Setup all the needed attributes.
            setBuffersAndAttributes(gl, programInfo.attribSetters, coneBufferInfo);

            coneUniforms.u_matrix = computeMatrix(
                viewMatrix,
                projectionMatrix,
                coneTranslation,
                coneXRotation,
                coneYRotation);

            // Set the uniforms we just computed
            setUniforms(programInfo.uniformSetters, coneUniforms);

            gl.drawArrays(gl.TRIANGLES, 0, coneBufferInfo.numElements);
        }
    </script>
    <script id="2d-vertex-shader" type="x-shader/x-vertex">
        // Passed in from the vertex shader.
        varying vec4 v_color;
        uniform vec4 u_colorMult;

        void main() 
        {
            gl_FragColor = v_color * u_colorMult;
        }
    </script>

    <script id="2d-fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec4 u_color;

        void main()
        {
        gl_FragColor = u_color;  // green
        }
    </script>
</head>
<body onload="start()">
    <div style="text-align: center">

    </div>
    <table style="width:100%; height: 10%;">       
        <tr>
            <td style="width:200px; max-width:200px; ">
                <canvas id="canvas" width="300" height="300"></canvas>
            </td>
            <td style="width:200px; max-width:200px; background-color:gray; ">
                <canvas id="canvas2" width="300" height="300"></canvas>
            </td>
        </tr>
    </table>
</body>
</html>

请向我解释解决方案，以便我理解并在未来保留它。谢谢

最佳答案

GLSL 着色器有 3 种类型的变量:

  • Uniforms 由主机应用设置，并在一次绘制调用中在所有顶点/片段中保持不变。
  • 属性由主机应用程序按顶点设置，并且在顶点着色器中只读。
  • Varyings 仅在光栅化器中进行插值后，才由顶点着色器写入，并由片段着色器读取。

下面是我可以在您的代码中发现的一些问题:

  • 您正试图在顶点着色器中读取“变化”，请改用顶点属性。
  • 您正在调用诸如 makeIdentity 之类的函数，但我没有看到它们已声明，请编辑您的页面以引入适当的矩阵库来提供这些函数。
  • 我在这里没有看到任何实际的顶点数据被传递到 WebGL。没有顶点数据就不会渲染任何东西。

您在问题中链接到的文章有一个 standalone demo您可以在 View source 上查看完整的工作示例。请注意，它在顶部引入了一些矩阵数学辅助库，并调用诸如 createCubeVertices 之类的函数来创建顶点数据。

另请查看 lesson 2 of Learning WebGL他们将顶点颜色应用于某些多边形。您可能想通过 all of the lessons 进行工作那里。

此外，大多数开发人员发现他们不需要从头开始构建自己的 3D 引擎。考虑学习 existing WebGL frameworks 之一可以隐藏 WebGL 的底层细节。其中，Three.js是一个受欢迎的起点。如果您不需要深入了解所有底层细节，这将为您节省大量时间和精力。

关于javascript - 在 webgl 中绘制多个对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33194402/

25 4 0
文章推荐： php - 如何用 PHP 制作群组电子邮件
文章推荐： mysql - SQL 查询从两个不同的表获取附加结果集
文章推荐： php - 我想要选择具有相同值的记录，并且 joomla 的一个用户将其添加到数据库表中
文章推荐： javascript - 从多个文本框(循环)获取数字并编写方程式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com