webgl-tutorial | Computational Design | Learning library

by rezaali JavaScript Version: Current License: Apache-2.0

X-Ray Key Features Code Snippets Community Discussions(4)Vulnerabilities Install Support

kandi X-RAY | webgl-tutorial Summary

webgl-tutorial is a JavaScript library typically used in Tutorial, Learning, Example Codes applications. webgl-tutorial has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

Tutorial for Tool & Algorithms for Computational Design (YCAM GRP)

Support

Quality

Security

License

Reuse

Support

webgl-tutorial has a low active ecosystem.

It has 14 star(s) with 2 fork(s). There are 1 watchers for this library.

It had no major release in the last 6 months.

webgl-tutorial has no issues reported. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of webgl-tutorial is current.

Quality

webgl-tutorial has no bugs reported.

Security

webgl-tutorial has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

webgl-tutorial is licensed under the Apache-2.0 License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

webgl-tutorial releases are not available. You will need to build from source code and install.

Installation instructions are not available. Examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi has reviewed webgl-tutorial and discovered the below as its top functions. This is intended to give you an instant insight into webgl-tutorial implemented functionality, and help decide if they suit your requirements.

Draws the mesh
draw a new mesh
create a geo geometry
Update the drawing frame .
draws a geo geometry

Get all kandi verified functions for this library.

webgl-tutorial Key Features

No Key Features are available at this moment for webgl-tutorial.

webgl-tutorial Examples and Code Snippets

No Code Snippets are available at this moment for webgl-tutorial.

Community Discussions

Trending Discussions on webgl-tutorial

Normals transformation for Back-Face culling

Why is this set of F rotating in this locus

Canvas is not rendering anything

Webgl - Rendering depth to texture returns gl.INVALID_FRAMEBUFFER_OPERATION in Safari

QUESTION

Normals transformation for Back-Face culling

Asked 2021-Feb-11 at 05:35

Starting from this lesson here: WebGL 3D Perspective I am triyng to implement Back-Face culling no magic.

I am computing on the fly the face normals in object space. After that, I am setting the fudgeFactor inside m[2][3] to get the perspective divide by Z.

To check if the shear matrix works, I expanded my snippet using directly the vertex positions projected out of the WebGL vertex shader, and added the "projected position" flag.

Now, I am triyng to use the z-component inside the transformed normals to hide the faces with normal.z <0. This technique works well using orthogonal projection - or when fudgeFactor is 0. Why this doesn't work also for perspective projection, when I set the fudgeFactor by my self?

To see what's happen, I wrote the minimal example below to visualize the normal vectors (thanks to: Geeks3D) and colored it. Green normal: face is visible, red normal: face is culled.

I followed the hints of gman and implemented the basic polygon rasterization (out of the WebGL vertex shader) as a proof of concept . Try to drag the fudgeFactor slider and check that works correctly.

...

ANSWER

Answered 2021-Feb-05 at 03:00

I'm sorry if this is not an answer to your question but "back face culling" has nothing to do with normals and you don't generally do it manually. You let WebGL do it for you

From the spec

3.5.1 Basic Polygon Rasterization
The first step of polygon rasterization is to determine if the polygon is back facing or front facing. This determination is made based on the sign of the (clipped or unclipped) polygon’s area computed in window coordinates. One way to compute this area is

where xⁱ_w and yⁱ_w are the x and y window coordinates of the ith vertex of the n-vertex polygon (vertices are numbered starting at zero for purposes of this computation) and i⊕1 is (i+1) mod n. The interpretation of the sign of this value is controlled with

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

QUESTION

Why is this set of F rotating in this locus

Asked 2020-Jun-24 at 16:50

In this code , I am not able to understand why the rotation is not in circular locus. This may be basic logic behind this but i can't understand why this so random locus.

I am rotating camera in orbital motion but it is not following it.

In my knowledge, i created a orbital motion camera and inverse of that is view matrix. So, view matrix will transform the world space for this result.Is there any fault in my thinking process ?

...

ANSWER

Answered 2020-Jun-24 at 16:50

If I understand your question, the problem you see is it looks like the camera is getting closer to and further from the Fs

The issue is the vertex data for the Fs are built so the top left front corner is at 0,0,0, from that they go +X 100 units (so 100 units wide), +Y 150 units (so 100 units tall), and +Z 30 units so 30 units deep

So then, when you draw them around a 100 unit circle their origin is the part you are positioning and you get this

The image is top down so the Fs are just a rectangle. The green circle is the local origin of each F, its local 0,0,0. The other vertices of the F are relative to that local origin so they are closer to the outer circle (the orbit of the camera) on one side and further on the other

You can fix it by moving the Fs -50 in X and -15 in Z. In other words

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

QUESTION

Canvas is not rendering anything

Asked 2020-Jun-24 at 11:59

I am learning WebGL and while I was trying to do look at after learning it from webglfundamental2, I wrote this code but this is not throwing any error but there is nothing displayed on the screen.

This is code I tried to render 'F' using the perspective camera.

There is no error in console:

Any help, I can't debug it. Any help, please !!!

...

ANSWER

Answered 2020-Jun-23 at 16:28

With the JavaScript console open in the browser, if I run your snippet I get this warning

That is a warning, not an error, that the code is trying to draw zero vertices. Checking the call to gl.drawArrays I found that offset and count were backward

it was

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

QUESTION

Webgl - Rendering depth to texture returns gl.INVALID_FRAMEBUFFER_OPERATION in Safari

Asked 2020-Feb-19 at 10:03

If you look at the following snippet in Safari (taken from https://webglfundamentals.org/webgl/lessons/webgl-shadows.html), you will notice it looks different than in other browsers, because the depth texture is always completely black:

...

ANSWER

Answered 2020-Feb-18 at 18:19

For Safari you need to setup a color attachment even if though the sample doesn't use it

first create an RGBA/UNSIGNED_BYTE color attachment the same size as the depth texture

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

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

Vulnerabilities

No vulnerabilities reported

Install webgl-tutorial

You can download it from GitHub.

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: