webgl-lessons | https : //github.com/tparisi/webgl-lessons | Blockchain library
kandi X-RAY | webgl-lessons Summary
kandi X-RAY | webgl-lessons Summary
is now the officially maintained fork for this project
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- This function exports an event .
- Export a native object as a native object .
- Return a JSON representation of a list of objects .
- Export a GLGE to a GLGE .
- Export a scene object to a scene object .
- Export a glge file .
- Initialize the graphics .
- Called when a file is selected .
- QKey event handler
webgl-lessons Key Features
webgl-lessons Examples and Code Snippets
Community Discussions
Trending Discussions on webgl-lessons
QUESTION
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:00I'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 RasterizationThe 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 xiw and yiw 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
QUESTION
I am not able to render anything in canvas and the console is not showing any error. I think my eye is missing something. I am doing nothing just trying to render the cube coordinate in canvas but nothing is being displayed.
( this sentence inside the bracket is just unwanted text for making this question pass the error of post is mostly code by StackOverflow)
...ANSWER
Answered 2020-Jul-22 at 16:58I moved my webgl helper to
Adding it I get this error
QUESTION
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:50If 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
QUESTION
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:28With 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.drawArraysI found thatoffsetandcountwere backwardit was
QUESTION
Javascript is a new languaje for me so this is a simple task that I cannot achieve. I can set the slider and update the position of my element when I change the slider with:
...ANSWER
Answered 2020-May-28 at 02:53There's a couple of things that needed to be done in my opinion to achieve this based on the example you provided. First, the main() function on lines 98 and 99 is setting up the sliders like so:
webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width }); webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});
If we check the library you provided (around line 99) we can see that the function setupSlider returns an object with both the html reference and a function to update its value:
QUESTION
I have a webgl proyect and I am able to load my shaders if I hardcode them from my main.js as
...ANSWER
Answered 2020-Mar-31 at 22:12In your HTML, you should use the bundle instead of the source JavaScript. According to your webpack config, the bundled file will be in "build/main.bundle.js" but your HTML loads "main.js", which is your unbundled JavaScript.
QUESTION
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:19For 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
QUESTION
I am looking at webglfundamentals blog series and learning animations. Based on my understanding, I am trying to replicate this in a slightly different manner, such that I do not have dependency on util files of the blog series. I am unable to resolve this error:
...ANSWER
Answered 2017-Nov-07 at 21:51The error message
Cannot read property 'projection' of undefined at createVertices.
means that projection is undefined when you try to use it. This is because m4.projectionis defined later int he script.
To solve this problem, you should do the declarations at the begin of the script and the function calls at the end.
Move the following code at the very and of the script:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install webgl-lessons
You can use webgl-lessons like any standard Python library. You will need to make sure that you have a development environment consisting of a Python distribution including header files, a compiler, pip, and git installed. Make sure that your pip, setuptools, and wheel are up to date. When using pip it is generally recommended to install packages in a virtual environment to avoid changes to the system.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
