gl-matrix | Javascript Matrix and Vector library | Graphics library

 by   toji JavaScript Version: v3.4.1 License: MIT

kandi X-RAY | gl-matrix Summary

kandi X-RAY | gl-matrix Summary

gl-matrix is a JavaScript library typically used in User Interface, Graphics, WebGL applications. gl-matrix has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i gl-matrix-vec4' or download it from GitHub, npm.

Javascript Matrix and Vector library for High Performance WebGL apps
Support
    Quality
      Security
        License
          Reuse

            kandi-support Support

              gl-matrix has a medium active ecosystem.
              It has 4988 star(s) with 722 fork(s). There are 157 watchers for this library.
              OutlinedDot
              It had no major release in the last 12 months.
              There are 68 open issues and 213 have been closed. On average issues are closed in 327 days. There are 11 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of gl-matrix is v3.4.1

            kandi-Quality Quality

              gl-matrix has 0 bugs and 0 code smells.

            kandi-Security Security

              gl-matrix has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              gl-matrix code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              gl-matrix is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              gl-matrix releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.
              gl-matrix saves you 12477 person hours of effort in developing the same functionality from scratch.
              It has 25142 lines of code, 0 functions and 60 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of gl-matrix
            Get all kandi verified functions for this library.

            gl-matrix Key Features

            No Key Features are available at this moment for gl-matrix.

            gl-matrix Examples and Code Snippets

            No Code Snippets are available at this moment for gl-matrix.

            Community Discussions

            QUESTION

            WebGL and glMatrix minimal example with lookAt and perspective transformations
            Asked 2021-Apr-26 at 03:02

            I am new to 3d graphics, and I am trying to figure out how to use the lookAt and perspective matrices in the glMatrix math library.

            Not trying to do anything fancy at this point, but I believe I am missing something, here is the relevant part of my code:

            ...

            ANSWER

            Answered 2021-Apr-26 at 03:02

            Looks like I was starting the frustum at a negative value (behind the camera at -1), when I changed to .001 it seems to work.

            The corrected code looks like this:

            Source https://stackoverflow.com/questions/67259651

            QUESTION

            WebGL render only vertices, but not triangles using gl.drawElements()
            Asked 2021-Mar-19 at 12:16

            I am trying to render an indexed cube (with duplicate vertices to achieve flat shading). I set up a position buffer, an indices buffer, set the shader inputs and draw it using gl.drawElements(gl.TRIANGLES, ...):

            However, on the screen, I only see the vertices, but the triangles are not being rendered.

            I have put prints with gl.getError() after each gl call, but all return 0 (no error). Here is the live demo (the cube can be rotated by clicking and dragging on the canvas):

            ...

            ANSWER

            Answered 2021-Mar-19 at 12:16

            GL_LINES and GL_TRIANGLES are not valid WebGL enumerator constants. However, LINES and TRIANGLES are valide:

            gl.drawElements(gl.GL_LINES, 36, gl.UNSIGNED_SHORT, 0);

            Source https://stackoverflow.com/questions/66706016

            QUESTION

            Using mat4 attribute in WebGL2
            Asked 2021-Feb-12 at 18:50

            I am trying to pass a 4x4 matrix as an attribute to WebGL2 vertex shader. After following closely this SO answer, I am stuck with wrapping my head around why I can't successfully render and get a glDrawArrays: attempt to access out of range vertices in attribute 0 error in my console.

            It is my understanding that mat4 is represented as 4 times vec4 in WebGL. When I query a_modelMatrix position on the GPU I can see it occupies location from 0 to 3, so this seems okay. I break up the assignments into 4 parts like this:

            ...

            ANSWER

            Answered 2021-Feb-12 at 18:50

            You must specify 1 attribute for each vertex coordinate. The vertices cannot share 1 matrix attribute. Each vertex coordinate must have its own model matrix attribute:

            Source https://stackoverflow.com/questions/66176062

            QUESTION

            gl-matrix is not included properly in webgl application
            Asked 2021-Feb-11 at 02:32

            I'm trying to learn the basics of webgl and following the MDN tutorial here.

            However, my rendering script (render.js) does not recognize the included gl-matrix script. Running index.html in Chrome(Version 88.0.4324.150 (Official Build) (64-bit)) I expect to see a red square against a black background. Instead, I get a black background and the following console error:

            ...

            ANSWER

            Answered 2021-Feb-11 at 02:32

            If I remember correctly newer versions of glMatrix only expose the glMatrix namespace rather than the individual classes. So in your case I think it's easiest if you make them available by destructuring it at the top of your render.js:

            Source https://stackoverflow.com/questions/66147508

            QUESTION

            WebGL 3D perspective
            Asked 2020-Nov-13 at 12:20

            I'm new to WebGL and I'm following the WebGL tutorial in https://webglfundamentals.org/. I draw a 3d cube in my canvas and It worked correct.

            Then I tried 3D perspective from this. After that my cube stretched and it looks like this. (I used gl-matrix to do matrix calculations)

            ...

            ANSWER

            Answered 2020-Nov-13 at 12:20

            The shader code is incorrect for perspective.

            Here is what you have

            Source https://stackoverflow.com/questions/64819970

            QUESTION

            How to import other types in to a typescript .d.ts module
            Asked 2020-Oct-26 at 22:19

            I have a custom .d.ts file for an external module that looks like

            ...

            ANSWER

            Answered 2020-Oct-26 at 22:19

            You just showed the most prevalent use case for import types in TypeScript:

            Modules can import types declared in other modules. But non-module global scripts cannot access types declared in modules. Enter import types.

            In other words, this language feature allows to import types of an external module 'gl-matrix' from within the global scope of your project .d.ts file like this:

            Source https://stackoverflow.com/questions/64453239

            QUESTION

            Shading in webgl
            Asked 2020-Sep-24 at 12:53

            I have been trying to create shading in webgl just like in this image: where we can see a cone, a sphere, and a light (which we can change his position with the sliders).

            I've tried to write some code in the html file by seeing multiple examples of shading from some webgl tutoring sites, but right now, I can't even see the shapes. It's sure that I'm doing something wrong, but I just don't know where. Here's my code and I also included a link because it contains multiple files. Thanks in advance.

            Link: https://wetransfer.com/downloads/cd0f66f2e2866c0d118e95b02e01cb0520200923203442/274553

            ...

            ANSWER

            Answered 2020-Sep-24 at 12:53

            Honestly, there are too many issues to cover. Trying to get your code work. First you really need to learn how to make a minimal repo. The code you posted doesn't run, references several scripts that don't exist, and data that doesn't exist.

            The tutorial the code is based off appears to be old. No one uses XMLHttpRequest in 2020. There's no such function as requestAnimFrame it's requestAnimationFrame. I think that's left over from a polyfill from like 2011. It's still using which few use anymore. It's also using new Date().getTime() which there's no reason to use as the time is passed into requestAnimationFrame. It's calling some function to get a webgl context but there's no reason for that either in 2020. It's also apparently using an old version of glMatrix because the current version uses a different API. In the current version every function takes a matrix to store the result as the first argument. Also in the current version perspective takes the field of view in radians. I have no idea if it used to take it in degrees but the code was passing degrees.

            I changed the XHR code to just return a cube. (an example of the minimal and complete parts of an "minimal complete verifiable example" (mcve) - I think now S.O calls them a "minimal reproducible example". I also removed all the references to ColorPicker (another example of making a minimal repo)

            The code should have gotten errors in the JavaScript console. Did you check the JavaScript console? In particular uNMatrix is a mat3 but the code was calling gl.uniformMatrix4fv to set it which is an error.

            Using webgl-lint pointed out several uniforms were not being set including "ambientProduct", "diffuseProduct", "specularProduct" and several were being set that don't exist (that part is not a bug necessarily) but there are several uniforms in the vertex shader that are not actually used and for example the colors seem to be set with

            Source https://stackoverflow.com/questions/64035870

            QUESTION

            Range Slider for camera in WebGL
            Asked 2020-Sep-21 at 09:40

            I'm trying to get a range slider to change the far plane and the angle of the camera in Webgl but I can't. How do I do in order for my code to read the value from the slider and then change the value in the perspective of the camera?

            ...

            ANSWER

            Answered 2020-Sep-21 at 09:40

            QUESTION

            Create a new model matrix Webgl
            Asked 2020-Sep-15 at 01:49

            I am new to webgl and I've been trying to create two cubes that rotate around their own axis, but right now, they rotate only according to one axis. I would like to know what I am doing wrong, (I think it's because I need to create a new model matrix for the rotation but I am not sure how to do that). Thank you!

            ...

            ANSWER

            Answered 2020-Sep-15 at 01:49

            I'm not exactly sure what your code is trying to do.

            In any case, in general to rotate in place to translate then rotate

            Source https://stackoverflow.com/questions/63891741

            QUESTION

            ReferenceError: WebGLRenderingContext is not defined
            Asked 2020-Aug-03 at 22:03

            Context:

            I'm coding a personal WebGL Api using Typescript with Webpack. WebGL stuffs renders correctly in the browser.

            Everything is ok !

            Now, trying to create some unit tests following this setup with mocha :

            Unit testing node applications with TypeScript — using mocha and chai

            mocha --reporter list -r ts-node/register -r jsdom-global/register 'test/**/*.spec.ts'

            Everything is also ok !

            Problem :

            Until I try to test a code which references WebGLRenderingContextwhere the following error arise:

            ...

            ANSWER

            Answered 2020-Aug-02 at 16:40

            Your unit tests are running in node.js via mocha. node.js does not support WebGL just like it doesn't support most of the browser's APIs.

            You can use mocha inside puppeteer if you want to run tests that use browser APIs. The examples page of that puppeteer article links to an example of using mocha with puppeteer.

            Source https://stackoverflow.com/questions/63217172

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network

            Vulnerabilities

            No vulnerabilities reported

            Install gl-matrix

            You can install using 'npm i gl-matrix-vec4' or download it from GitHub, npm.

            Support

            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
            CLONE
          • HTTPS

            https://github.com/toji/gl-matrix.git

          • CLI

            gh repo clone toji/gl-matrix

          • sshUrl

            git@github.com:toji/gl-matrix.git

          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link