Results 1 to 2 of 2

Thread: load json

  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    1

    load json

    Hello all,
    I was experimenting with the learningwebgl tuts and was trying to load a json file and draw it on the screen
    I have a json file named cube.json in the directory where i have stored my index.html
    the json have been converted from the obj of a plane.
    I cant seem to load the json and draw it. I dont knwo where i am doing wrong, please somebody help me

    this is the json file

    {
    "objectName" : ["Plane"],
    "texturePath" : ["(null)"],
    "vertexPositions" : [1.000000,0.000000,-1.000000,1.000000,0.000000,1.000000,-1.000000,0.000000,1.000000,-1.000000,0.000000,-1.000000],
    "vertexTextureCoords" : [],
    "indices" : [0,3,2,1],
    "texIndices" : []
    }


    and my index.html is

    <html>

    <head>
    <title>Learning WebGL &mdash; lesson 1</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>

    <script id="shader-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif

    void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
    </script>

    <script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    }
    </script>


    <script type="text/javascript">

    var gl;
    function initGL(canvas) {
    try {
    gl = canvas.getContext("experimental-webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
    } catch (e) {
    }
    if (!gl) {
    alert("Could not initialise WebGL, sorry ");
    }
    }


    function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
    return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
    if (k.nodeType == 3) {
    str += k.textContent;
    }
    k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
    shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
    return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
    return null;
    }

    return shader;
    }


    var shaderProgram;

    function initShaders() {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Could not initialise shaders");
    }

    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPos itionAttribute);

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    }


    var mvMatrix = mat4.create();
    var pMatrix = mat4.create();

    function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
    }



    var triangleVertexPositionBuffer;
    var squareVertexPositionBuffer;

    function initBuffers() {
    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
    0.0, 1.0, 0.0,
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3;
    triangleVertexPositionBuffer.numItems = 3;

    squareVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    vertices = [
    1.0, 1.0, 0.0,
    -1.0, 1.0, 0.0,
    1.0, -1.0, 0.0,
    -1.0, -1.0, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    squareVertexPositionBuffer.itemSize = 3;
    squareVertexPositionBuffer.numItems = 4;
    }

    var cubeVertexPositionBuffer;

    function handlecube(Data) {
    cubeVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(Data.vertexPositions), gl.STATIC_DRAW);
    cubeVertexPositionBuffer.itemSize = 3;
    cubeVertexPositionBuffer.numItems = Data.vertexPositions.length / 3;

    document.getElementById("loadingtext").textContent = "";
    }


    function loadTeapot() {
    var request = new XMLHttpRequest();
    request.open("GET", "cube.json");
    request.onreadystatechange = function () {
    if (request.readyState == 4) {
    handlecube(JSON.parse(request.responseText));
    }
    }
    request.send();
    }

    function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositio nAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);


    mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositio nAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

    mat4.translate(mvMatrix, [2.0, 0.0, 0.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositio nAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLES, cubeVertexPositionBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    }



    function webGLStart() {
    var canvas = document.getElementById("lesson01-canvas");
    initGL(canvas);
    initShaders();
    initBuffers();
    loadTeapot();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    drawScene();
    }


    </script>


    </head>


    <body onload="webGLStart();">
    &lt;&lt; Back to Lesson 1


    <canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>



    &lt;&lt; Back to Lesson 1

    </body>

    </html>

  2. #2
    Junior Member
    Join Date
    Dec 2011
    Location
    Kingston, Ontario, Canada
    Posts
    29

    Re: load json

    Please post the problem that you are getting.

    Do you get anything displayed at all?

    Do you get any errors?

    Do you get any Javascript error (visible in the Error Console).

    If you are using FireFox then you can also turn the Verbose on WebGL to True so that you will also see WebGL errors in the Error Console.

    You can also look at my WebGL Joint And Object Framework (available at http://webtable.byethost15.com/WebGL). This is a Framework for creating objects and moving their joints but it contains a Javascript file for loading simple and complex (as in your case) JSON files.
    "We often compare ourselves to the U.S.
    and often they come out the best,
    but they only have the right to bear arms
    while we have the right to bare breasts"
    Song "Busting The Breast" by Bowser & Blue

Similar Threads

  1. JSON instructions
    By tarquin in forum Developers Coding:Beginner
    Replies: 1
    Last Post: 10-15-2012, 04:14 AM
  2. Collada to JSON
    By Impelluso in forum WebGL - General
    Replies: 0
    Last Post: 10-28-2011, 08:21 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •