मैं वेबग्ल के लिए नया हूं और मैं सभी त्रिकोणों को यादृच्छिक रंगों में बदलने के लिए अलग-अलग उपयोग करके टुकड़े टुकड़े करने वाले को एक विशेषता पारित करने का प्रयास कर रहा हूं:

लेकिन अभी, सभी त्रिकोण सफेद रंग में हैं, और मुझे नहीं पता कि क्या गलत हुआ। साथ ही, मैं त्रिभुजों को कैनवास में फ़िट करने के लिए कैसे करूँ? कृपया मदद करें, धन्यवाद।

// Application info.
var app = app || {};
var nbTriangles = 20;

function getContextGL(canvasElement) {
    var can = document.getElementById(canvasElement);
    if (can == null) {
        return [null, null];
    }

    var gl = can.getContext("webgl");

    return [can, gl];
}


function createShaderFromElement(gl, id) {
    // Grab the script element.
    var scriptElt = document.getElementById(id);
    if (!scriptElt) {
        return null;
    }

    // Retrieve the source.
    var scriptSource = scriptElt.textContent;

    // Identify shader type based on element type.
    var shaderObj;
    if (scriptElt.type == "x-shader/x-fragment") {
        shaderObj = gl.createShader(gl.FRAGMENT_SHADER);
    }
    else if (scriptElt.type == "x-shader/x-vertex") {
        shaderObj = gl.createShader(gl.VERTEX_SHADER);
    }
    else {
        return null;
    }

    // Compile and check status.
    gl.shaderSource(shaderObj, scriptSource);
    gl.compileShader(shaderObj);

    var ok = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);

    if (!ok) {
        var msgError = gl.getShaderInfoLog(shaderObj);
        alert(msgError);
        gl.deleteShader(shader);

        return null;
    }

    return shaderObj;
}

function buildProgram(gl, vertexShader, fragmentShader) {
    if (!vertexShader || !fragmentShader) {
        return null;
    }

    var progObject = gl.createProgram();
    if (!progObject) {
        alert("Can't create program object.");
        return;
    }

    gl.attachShader(progObject, vertexShader);
    gl.attachShader(progObject, fragmentShader);

    gl.linkProgram(progObject);

    var ok = gl.getProgramParameter(progObject, gl.LINK_STATUS);
    if (!ok) {
        var msgError = gl.getProgramInfoLog(progObject);
        alert(msgError);

        gl.deleteProgram(progObject);
        return null;
    }

    return progObject;
}

function initGL() {
    app.gl.viewport(0, 0, app.can.width, app.can.height);


    app.gl.clearColor(0., 0., 0., 1.0);
    app.gl.clear(app.gl.COLOR_BUFFER_BIT);

    var vs = createShaderFromElement(app.gl, "vs");
    var fs = createShaderFromElement(app.gl, "fs");
    app.progObject = buildProgram(app.gl, vs, fs);

    app.gl.useProgram(app.progObject);
}

function initScene() {
    var gl = app.gl;

    // Creer le buffer de geometrie (vertex)
    //
    var positions = [];

    for (var i = 0; i < nbTriangles; ++i) {


        var orig = [0.0, 1.0, 1.0, -1.0, -1.0, -1.0];
        var scale = Math.random() * 0.2;
        var Trans = [Math.random() * 1.6, Math.random() * 1.6];
        var P0 = [
            orig[0] * scale + Trans[0],
            orig[1] * scale + Trans[1],
        ];
        var P1 = [
            orig[2] * scale + Trans[0],
            orig[3] * scale + Trans[1],
        ];
        var P2 = [
            orig[4] * scale + Trans[0],
            orig[5] * scale + Trans[1],
        ];
        positions.push(...P0, ...P1, ...P2);
    }


    var colors = [];
    for (var i = 0; i < nbTriangles; ++i) {
        
        var newColor = [Math.random() * 256, Math.random() * 256, Math.random() * 256, 1.0];
        colors.push(...newColor);


    }


    // Creer un nouveau buffer vide.
    var posBuffer = gl.createBuffer();
    var colorBuffer = gl.createBuffer();


    // Ref sur l'attribut "pos" dans le vertex shader.
    var posLocation = gl.getAttribLocation(app.progObject, "pos");
    var colorLocation = gl.getAttribLocation(app.progObject, "color");



    // Activer le buffer. Toute operation sur buffer
    // sera appliquer a posBuffer (il est actif!).
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    gl.enableVertexAttribArray(posLocation);
    gl.vertexAttribPointer(posLocation, 2, gl.FLOAT, false /*no normalization*/, 0 /*stride*/, 0 /*offset*/);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);


    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(colorLocation);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}

function render() {
    var gl = app.gl;

    gl.clear(gl.COLOR_BUFFER_BIT)


    // Dessiner le buffer.
    gl.drawArrays(gl.TRIANGLES, 0, 3 * nbTriangles);
}

function init() {
    [app.can, app.gl] = getContextGL('can');
    if (app.can == null || app.gl == null) {
        alert("Can't init canvas or context");
        return;
    }

    app.can.width = app.can.height * (app.can.clientWidth / app.can.clientHeight);

    var rect = app.can.getBoundingClientRect();
    app.scaleX = app.can.width / rect.width;
    app.scaleY = app.can.height / rect.height;

    initGL();
    initScene();
    render();
}
div 
{
}

#main-div
{
display:inline-block;
}

#viewport, #manager
{
    float: left;
    margin: auto;
}

.color
{
    width:100px;
    height:50px;
}

.blue{
    background:#0f0;
}

#viewport
{
    width: 600px;
    height:700px;
}

#can
{
    width: 600px;
    height: 500px;
    border:1px solid orange;
}

#manager
{
    width: 200px;
    height:300px;
    padding: 0 0 0 5px;

}

#obj-list
{
    width: 200px;
}
<!DOCTYPE html>
<html>

<head>
    <title>Colored Quad</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="colored_quad.js"></script> 

    <script id="vs" type="x-shader/x-vertex">
  precision mediump float;
    attribute vec2 pos;
    attribute vec4 color;
    varying vec4 fcolor;

  void main() 
    {
        vec4 pt = vec4(pos, 0.0, 1.0);
        gl_Position = pt;
        fcolor=color;
  }
 </script>

    <script id="fs" type="x-shader/x-fragment">
  precision mediump float;
  varying vec4 fcolor;
  void main() 
    {
        vec4 color= fcolor;
    gl_FragColor = color;
  }
  </script>

</head>

<body onload="init();">

    <div id="main-div">

            <div id="viewport">
                <canvas id="can" >Your browser doesn't seem to support canvas!</canvas>
            </div>

    </div>

</body>
</html>
1
Beibei Huang 29 अगस्त 2020, 18:18

1 उत्तर

सबसे बढ़िया उत्तर

रंग विशेषता में एक फ़्लोटिंग पॉइंट प्रकार होता है:

attribute vec4 color;
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);

इसलिए रंग मानों को [0, 256] के बजाय [0.0, 1.0] श्रेणी में निर्दिष्ट करना होगा:

var newColor = [Math.random() * 256, Math.random() * 256, Math.random() * 256, 1.0];

var newColor = [Math.random(), Math.random(), Math.random(), 1.0];

इसके अलावा, प्रत्येक त्रिभुज में 3 शीर्ष (कोने) होते हैं। प्रत्येक शीर्ष निर्देशांक को एक अलग रंग विशेषता से जोड़ा जाना चाहिए। तो प्रत्येक त्रिभुज में 3 रंग विशेषताएँ भी होनी चाहिए:

var colors = [];
for (var i = 0; i < nbTriangles; ++i) {
        
    var newColor = [Math.random(), Math.random(), Math.random(), 1.0];
    colors.push(...newColor);
    colors.push(...newColor);
    colors.push(...newColor);
}

// Application info.
var app = app || {};
var nbTriangles = 20;

function getContextGL(canvasElement) {
    var can = document.getElementById(canvasElement);
    if (can == null) {
        return [null, null];
    }

    var gl = can.getContext("webgl");

    return [can, gl];
}


function createShaderFromElement(gl, id) {
    // Grab the script element.
    var scriptElt = document.getElementById(id);
    if (!scriptElt) {
        return null;
    }

    // Retrieve the source.
    var scriptSource = scriptElt.textContent;

    // Identify shader type based on element type.
    var shaderObj;
    if (scriptElt.type == "x-shader/x-fragment") {
        shaderObj = gl.createShader(gl.FRAGMENT_SHADER);
    }
    else if (scriptElt.type == "x-shader/x-vertex") {
        shaderObj = gl.createShader(gl.VERTEX_SHADER);
    }
    else {
        return null;
    }

    // Compile and check status.
    gl.shaderSource(shaderObj, scriptSource);
    gl.compileShader(shaderObj);

    var ok = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);

    if (!ok) {
        var msgError = gl.getShaderInfoLog(shaderObj);
        alert(msgError);
        gl.deleteShader(shader);

        return null;
    }

    return shaderObj;
}

function buildProgram(gl, vertexShader, fragmentShader) {
    if (!vertexShader || !fragmentShader) {
        return null;
    }

    var progObject = gl.createProgram();
    if (!progObject) {
        alert("Can't create program object.");
        return;
    }

    gl.attachShader(progObject, vertexShader);
    gl.attachShader(progObject, fragmentShader);

    gl.linkProgram(progObject);

    var ok = gl.getProgramParameter(progObject, gl.LINK_STATUS);
    if (!ok) {
        var msgError = gl.getProgramInfoLog(progObject);
        alert(msgError);

        gl.deleteProgram(progObject);
        return null;
    }

    return progObject;
}

function initGL() {
    app.gl.viewport(0, 0, app.can.width, app.can.height);


    app.gl.clearColor(0., 0., 0., 1.0);
    app.gl.clear(app.gl.COLOR_BUFFER_BIT);

    var vs = createShaderFromElement(app.gl, "vs");
    var fs = createShaderFromElement(app.gl, "fs");
    app.progObject = buildProgram(app.gl, vs, fs);

    app.gl.useProgram(app.progObject);
}

function initScene() {
    var gl = app.gl;

    // Creer le buffer de geometrie (vertex)
    //
    var positions = [];

    for (var i = 0; i < nbTriangles; ++i) {


        var orig = [0.0, 1.0, 1.0, -1.0, -1.0, -1.0];
        var scale = Math.random() * 0.2;
        var Trans = [Math.random() * 1.6, Math.random() * 1.6];
        var P0 = [
            orig[0] * scale + Trans[0],
            orig[1] * scale + Trans[1],
        ];
        var P1 = [
            orig[2] * scale + Trans[0],
            orig[3] * scale + Trans[1],
        ];
        var P2 = [
            orig[4] * scale + Trans[0],
            orig[5] * scale + Trans[1],
        ];
        positions.push(...P0, ...P1, ...P2);
    }


    var colors = [];
    for (var i = 0; i < nbTriangles; ++i) {
        
        var newColor = [Math.random(), Math.random(), Math.random(), 1.0];
        colors.push(...newColor);
        colors.push(...newColor);
        colors.push(...newColor);
    }


    // Creer un nouveau buffer vide.
    var posBuffer = gl.createBuffer();
    var colorBuffer = gl.createBuffer();


    // Ref sur l'attribut "pos" dans le vertex shader.
    var posLocation = gl.getAttribLocation(app.progObject, "pos");
    var colorLocation = gl.getAttribLocation(app.progObject, "color");



    // Activer le buffer. Toute operation sur buffer
    // sera appliquer a posBuffer (il est actif!).
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    gl.enableVertexAttribArray(posLocation);
    gl.vertexAttribPointer(posLocation, 2, gl.FLOAT, false /*no normalization*/, 0 /*stride*/, 0 /*offset*/);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);


    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(colorLocation);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}

function render() {
    var gl = app.gl;

    gl.clear(gl.COLOR_BUFFER_BIT)


    // Dessiner le buffer.
    gl.drawArrays(gl.TRIANGLES, 0, 3 * nbTriangles);
}

function init() {
    [app.can, app.gl] = getContextGL('can');
    if (app.can == null || app.gl == null) {
        alert("Can't init canvas or context");
        return;
    }

    app.can.width = app.can.height * (app.can.clientWidth / app.can.clientHeight);

    var rect = app.can.getBoundingClientRect();
    app.scaleX = app.can.width / rect.width;
    app.scaleY = app.can.height / rect.height;

    initGL();
    initScene();
    render();
}
div 
{
}

#main-div
{
display:inline-block;
}

#viewport, #manager
{
    float: left;
    margin: auto;
}

.color
{
    width:100px;
    height:50px;
}

.blue{
    background:#0f0;
}

#viewport
{
    width: 600px;
    height:700px;
}

#can
{
    width: 600px;
    height: 500px;
    border:1px solid orange;
}

#manager
{
    width: 200px;
    height:300px;
    padding: 0 0 0 5px;

}

#obj-list
{
    width: 200px;
}
<!DOCTYPE html>
<html>

<head>
    <title>Colored Quad</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="colored_quad.js"></script> 

    <script id="vs" type="x-shader/x-vertex">
  precision mediump float;
    attribute vec2 pos;
    attribute vec4 color;
    varying vec4 fcolor;

  void main() 
    {
        vec4 pt = vec4(pos, 0.0, 1.0);
        gl_Position = pt;
        fcolor=color;
  }
 </script>

    <script id="fs" type="x-shader/x-fragment">
  precision mediump float;
  varying vec4 fcolor;
  void main() 
    {
        vec4 color= fcolor;
    gl_FragColor = color;
  }
  </script>

</head>

<body onload="init();">

    <div id="main-div">

            <div id="viewport">
                <canvas id="can" >Your browser doesn't seem to support canvas!</canvas>
            </div>

    </div>

</body>
</html>
1
Rabbid76 29 अगस्त 2020, 15:42