WebGL | The Official Khronos WebGL Repository | Graphics library

I recently found out there is a very handy method in three-box for placing three.js objects on the map which is "projectToworld".

While trying to place my three.js objects using the method, I realized that the Vector3 the method returns are really huge and not on the map.

According to the documentation of threebox, it says

projectToWorld

tb.projectToWorld(lnglat) : THREE.Vector3

Calculate the corresponding THREE.Vector3 for a given lnglat. It's inverse method is tb.unprojectFromWorld.

So I decided to use this method to locate my animated object in three js canvas. But what the methods returns are really huge.

So as I expected, these values don't place the three objects on the map and all the objects disappeared because they presumably are placed at very distant locations.

How do I fix this issue?

I made a minimal code to demonstrate this issue as below.

1. instantiating map

I'm learning WebGl and trying to convert a web mining script to do elliptical curve addition. I started by replacing the working GL code with the code from vanitygen-plus, even though it does more than I need/want. I also began replacing the variables passed to the expected ones and removed a bunch of unneeded JavaScript. I now get the error "glminer.js:54 WebGL: INVALID_OPERATION: useProgram: program not valid" currently testing in chrome 91 on windows 10. unfortunately this doesn't help me much as it doesn't tell me what is invalid.

I trying to make a pure 3d cube, using my vectors. I thought it was perfect at once, but when rotate it, I can see some lines are not drawn correctly and it is not perfect.

I can't find why it is not perfect. Is some of my vectors wrong?

I'm using p5.js to draw it. I know they have methods of 3d rotation and some 3d primitives. But I don't want to use them. I want to draw my own 3d cube.

Here's the code I used as reference: https://github.com/OneLoneCoder/videos/blob/master/OneLoneCoder_olcEngine3D_Part1.cpp

Currently trying to create attraction effect on 3D cubes using createVector function. The attraction designed to trigger when mouse pressed but currently it's stating the error:

Because of computation efficiency, I use a fragment shader to implement a simple 2D metaballs algorithm. The data of the circles to render is top-left oriented.

I have everything working, except that the origin of WebGL's coordinate system (bottom-left) is giving me a hard time: Obviously, the rendered output is mirrored along the horizontal axis.

Following https://webglfundamentals.org/webgl/lessons/webgl-2d-rotation.html (and others), I tried to rotate things using a vertex shader. Without any success unfortunately.

What is the most simple way of achieving the reorientation of WebGL's coordinate system?

I'd appreciate any hints and pointers, thanks! :)

Please find a working (not working ;) ) example here: https://codesandbox.io/s/gracious-fermat-znbsw?file=/src/index.js

I'm trying to convert an old OpenGL screen saver to WebGL. It's supposed to render a Möbius strip with numbers from "00" to "23" written along it like the numbers on an analog clock's face. This is what the original looks like:

For reasons I don't fully remember now, the texture of the strip is divided into 4 separate files named hours?.bmp, where the ? stands for 0..3. Accordingly, I tried to load each file into a different texture unit as follows

I am trying to load glb file as:

In the fragment shader the alpha of gl_Fragcolor is null : gl_FragColor = vec4(0.88,0.33,0.55,0.0);

When you look the color of the point (size 24) , the color is the background-color of the canvas.

Where is the clearColor ? ( gl.clearColor(0.12, 0.34, 0.56, 1.0);)

I'm trying to unravel a bit of the dark unknown that is webgl via PixiJS library. At this point, it probably should be noted that I haven't used PixiJS for awhile either, but it seemed to be a much more preferable approach than to manipulate the lower level underlying webgl state.

My logic is currently this: I create two buffers ("current" and "previous") with the same fragment shader as well as a render buffer and a "render" fragment shader. Both buffers start off with the same content: a fill that is rgb(255, 10, 0) for every pixel.

Right now, the fragment shader does this: