Questions tagged [javascript]
The javascript tag has no usage guidance.
39
questions
1
vote
1
answer
67
views
Convert between screen and world coordinates in isometric 3D
I'm working on a a simple 3D scene in WebGL. The purpose is to:
Implement an isometric viewing angle in orthographic 3D
Translate between XY screen coordinates and XY world coordinates
Codepen: ...
- 127
0
votes
0
answers
34
views
HTML Canvas not drawing
I'm working on a 3D Renderer with the canvas element and JS but currently the cube I made is not rendering. I currently have it set to just render a wireframe of the cube and am hoping to render the ...
0
votes
1
answer
47
views
Position a 3D camera directly above or below the target
I'm trying to setup a 3D camera in WebGL. The camera is setup with the help of a lookAt function. The lookAt function takes cameraTarget, ...
- 127
1
vote
1
answer
93
views
Move the camera in orthographic 3D
I'm trying to figure out how to move a camera in orthographic 3D. The scene is orthographic in the sense that an object looks the same regardless of position. The only thing that may affect the size ...
- 127
0
votes
0
answers
48
views
Given 2d control points, how to write a vertex shader that evaluates a cubic bezier curve?
I need to write a program that evaluates a cubic bezier curve, using threejs and vertex shader.
I tried to calculate the bezier curve based on the x axis and the control points using the cubic bezier ...
- 111
4
votes
1
answer
69
views
How to apply transformation matrices from multiple primitives on a mesh
I'm working on some code to convert a 3d geometry from IFC to gltf/glb. One of the challenges I'm facing with this is that - IFC provides transformations for each primitive separately i.e., if I have ...
- 143
2
votes
0
answers
36
views
How to add HemisphereLight to a simple threejs scene?
I'm trying to add light and see its changes in a simple scene in threejs but no matter the intensity or the color I set for the light, I see no change in a scene. Actually, if I don't include the ...
- 31
1
vote
0
answers
35
views
How to make elevated parts of a steep plane seem darker than the lower surface? [GLSL]
I made a plane in THREEjs using Mesh, PlaneGeometry and ShaderMaterial. It's a very simple/basic form.
I applied a simple phormula to make the plain more steep. Now I'm trying to make the lower ...
- 111
0
votes
0
answers
36
views
How do I make "attribute vec0.5" in GLSL. Sorry if it confuses
Is it possible, in OpenGL (specifically in WebGL), to use a single value from buffer for multiple shader iterations? Like to put the same element from buffer into shader attribute multiple times?
Like:...
- 1
0
votes
0
answers
88
views
Ray tracing of a diffuse material sphere doesn't work, the sphere just shades black
I made this ray tracer in javascript to run on html with imageData. I have been using the book "Ray Tracing in One Weekend" as a reference (https://raytracing.github.io/books/...
- 101
1
vote
1
answer
340
views
Is it possible to get recording device from meta data?
Im not sure if this is the right section to ask this question but i figured its worth a shot.
Is it possible to take metadata from a video and use that data to identify what phone model was used to ...
- 11
0
votes
1
answer
150
views
Fastest Simulation Of Mass Spring Systems
I'd like to simulate a 4-dimensional cloth in the web browser, since browsers don't offer great ressources for numerical computation, I'd like to know which algorithm uses the least amount of ...
- 127
1
vote
1
answer
1k
views
Rotating a Bitmap
I would like to rotate an bitmap image using math. I have two issues with my current implementation: the pixel-by-pixel rotation of the copied bitmap is extremely slow and it is leaving gaps between ...
3
votes
1
answer
203
views
Non jagged line algorithm for javascript canvas
I'm trying to draw a line between two specified points, by updating values in an array which is heightxWidth with each element a set of four bytes (r,g,b,a). In my naive implementation I get the top ...
- 33
-2
votes
1
answer
801
views
How can I make a cube with faces of different colors? Webgl
I have to draw cubes with faces of different colors (each per face), but I don't know how to accomplish this task: I draw cubes using CPU and GPU meshes (no vertexBuffer or three.js "style") and I don'...
- 101
1
vote
1
answer
450
views
Flood-Fill and scanLine algorithms are line-based floods but I want square based floods
I have a flood-fill algorithm (Flood-fill) to fill a 24x24 matrix as follows (matrix is 24x24 here but will be much bigger in production):
...
- 113
2
votes
0
answers
63
views
Binary representation of Pascal's triangle [closed]
I recently learnt about the binary representation of Pascal's triangle. Here is what it looks like
I am a java learner. Is there a way for me to find the java source code to graph this binary ...
- 121
1
vote
0
answers
276
views
How can I convert a shape made out of pixels to vertices
I'm trying to implement the solution to get the minimum dissection into rectangles of a rectilinear polygon.
My shape is made out of pseudo-pixels (different width/height) but for the moment let's ...
- 173
1
vote
1
answer
2k
views
How can I draw a filled circle on a grid with the less rectangle as possible?
I have a grid with a variable width/height spacing. Let's say 100 horizontal lines separated by 80 pixels and 100 hundred vertical lines separated by 50 pixels.
Each cell of the grid in my logic have ...
- 173
1
vote
0
answers
532
views
3D model outline using stencil buffer
I'm trying to outline a 3D model in WebGL. I've tried using a stencil buffer techique with glLineWidth and glPolygonMode. However, Mozilla's WebGL reference says that the minimum and maximum widths of ...
- 163
0
votes
2
answers
277
views
The distance from the cube sides to the parallel projection plane
I have asked this question on ru.stackoverflow.com and have no valid answers.
Specification:
Coordinate system
Cube spins around its center on all three axes.
Turn angle is not known previously.
...
user7220
5
votes
1
answer
1k
views
How can I verify if a selection area is over a shape in SVG?
I'm creating an SVG editor.
I have a simple selection tool that appears when I click and move my mouse from a blank area in my SVG.
My SVG is populated with rectangles that can have a rotation ...
- 173
3
votes
1
answer
96
views
Need help reasoning about video oscillation >60hz
I want to make a basic video oscillator for the web. What I want to do is basically illustrated in a tutorial for Lumen: essentially, I want to define an oscillator to turn on and off a color signal ...
- 31
3
votes
1
answer
149
views
Image regeneration with nearest neighbor search
So what I would like to achieve is this:
User submits Image 1 - this image is then broken down into X by X sized blocks
User submits Image 2 - then the program/algorithm takes all the blocks ...
- 131
3
votes
1
answer
3k
views
WebGL: Why are my textures black?
I am trying to write a simple WebGL script to display a pyramid with a brick texture and Phong lighting. The lighting works fine but when I incorporate the texture, the pyramid turns black. I've ...
- 71
3
votes
1
answer
455
views
Russian Roulette - Maximum call stack size exceeded
I am trying to write my own path tracer in JavaScript, but I have a problem with the implementation of russian roulette. First, let me describe how my path tracer works.
I have a function called ...
- 33
2
votes
1
answer
375
views
Easing curves on the GPU?
I was thinking that I could pass a timestamp in (from requestAnimationFrame) to the vert shader, and just have my easing curves in the GPU instead of using (for example) Tween.js from the outside.
Is ...
- 255
1
vote
0
answers
227
views
How To Generate High Quality Bitmap From Canvas For WebGL Texture
I would like to generate a bitmap for use with a webgl texture generated from a 2d canvas, but I don't think I am doing it correctly. I know how to display the contents of one canvas into another by ...
- 31
2
votes
1
answer
730
views
Inverse Kinematics with more than 2 segments
I'm building a 2D inverse kinematics system and can't figure out how to find all the joint positions. I have the math to make a typical IK set up with a single bend (e.g. arm, leg), but I get stuck ...
- 93
4
votes
2
answers
601
views
Can a scene graph be stored in the GPU?
I am starting to learn WebGL. Can a scene graph be stored in the GPU? Or is that type of thing more for the main thread (or webworker)?
For example, I want to calculate some layout, and apply it as a ...
- 255
2
votes
0
answers
560
views
Creating Signed Distance Fields Images On The Fly For WebGL Application
I am working on a "CAD" like program in HTML5 that requires drawing many thousands (700,000+) of images on the screen. I think, "fortunately" the many images are replicated uses of a unique set of ...
- 31
1
vote
0
answers
44
views
View / print index values?
So i'm currently trying to draw a 3D cube, and from what I understand everything should be working right, but It's coming out weird and I believe it's because the ordering of my indexes is wrong. Is ...
- 19
2
votes
1
answer
53
views
Successive lineTo(x, y) in JavaScript
When I was doing some graphic designing with JavaScript, I saw this strange behaviour.
When I ran the following code (with proper HTML and JavaScript of course),
...
- 121
5
votes
1
answer
1k
views
Can we use PhysX in WebGL?
I'm new to GL stuff (coming in via WebGL, with no direct OpenGL experience). Can we use PhysX with WebGL?
- 255
4
votes
1
answer
1k
views
draw a chord in three.js as in d3.js
I'm starting to learn three.js and want to create a chord diagram as possible in d3.js, but from ground up. I've created a scene and have circle segments on xz axes. But I got stuck on the chords. I ...
- 51
2
votes
0
answers
47
views
Trouble using java connectivity and data transmition on libgdx [closed]
Hello everybody i have a trouble making datatransmition with mine program just to give the idea im trying to move this blocks when i move mine cars
Here I leave the encoding of mine server/client ...
- 21
2
votes
1
answer
86
views
Get data from javascript
There is an web-interface that load geometric models and show it inside the bounding volume. WebGL is used to generate it. So far no scene graph technique is used to organize the elements in the scene....
- 1,229
4
votes
1
answer
196
views
Javascript color extraction library
I have a small project that needs to extract the perceptually-salient colors of an image, in javascript. There are a few libraries out there (color-thief.js, vibrant.js). The trouble is, I'm finding ...
- 423
10
votes
1
answer
344
views
Can I determine the pixel geometry programmatically?
Different screens can have different pixel geometry, so that the red, green and blue components are arranged in different patterns. Using sub-pixel rendering to give a higher apparent resolution is ...
