Creating a circular sun in Opengl and three.js: a step-by-step guide

Currently, I am working on enhancing an atmospheric shader based on the glsl-atmosphere library while using three.js.

Initially, I applied these shaders to a sphere and achieved excellent results :)

The original shaders lacked sun drawing elements, so I improvised by incorporating:

float spot = smoothstep(0.0, 1000.0, pMie)*10.0;

Following that, I included this code snippet in the return statement:

return iSun * (spot*totalMie+pRlh * kRlh * totalRlh + pMie * kMie * totalMie);

https://i.sstatic.net/0xtHZ.png

While it appears satisfactory from one perspective, when closer to the screen's edge: https://i.sstatic.net/mqMe7.jpg

It begins to resemble an ellipsoid...

How can I rectify this issue?

javascriptthree.jsglslwebglshader

Answer №1

It appears to be a case of perspective distortion. Simply adjusting the field of view on your camera should correct it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

After developing some basic jQuery code using if-statements to toggle the visibility of Divs based on a select list in HTML, I am seeking ways to enhance this code: 1) How can I achieve the same functionality with fewer lines of code? 2) Rather than manu ...

javascriptjqueryhtmlif-statementoptimization

Creating a Validation Form using either PHP or JavaScript

I need to create a form with the following columns: fullname, email, mobile, and address. If the visitor fills out the mobile field, they should only be allowed to enter numbers. And if the visitor fills out the email field, they should only be allowed to ...

javascriptphphtmlajax

Update two distinct object properties using a singular reference in Vue's set method

I'm facing an issue while trying to insert an object into an array using the Vue.set function. The problem is that it adds the item to a different object with the same array property. Here's a snippet of my code: data() { return { ... ...

javascriptvue.js

What causes the issue of divs not stacking properly when using Bootstrap 4?

I'm currently working on integrating VueJs and bootstrap4 to create two basic components. However, I am facing an issue where I have assigned the class .col-md-4 to a div in order to add 3 elements per row, but only one element is being added per row ...

javascriptvue.jsbootstrap-4

Create a JavaScript code snippet that replaces the innerHTML of the function document.getElementById with

In my limited knowledge of JavaScript, I have come across an issue with the following code: function example() { document.getElementById("example").innerHTML = "<script>document.write(example)</script>"; } Unfortunately, this code doesn&ap ...

javascripthtmlinnerhtml

Creating a Javascript countdown timer that does not involve displaying the

I stumbled upon this code on a website, but there's one tweak I'd like to make. Unfortunately, I can't seem to figure it out myself, so I'm reaching out for some help. What I want to achieve is removing the year from the date so that th ...

javascripthtmldate

Press the button to switch between displaying one component and hiding another component within reactjs

I am working on a project with two distinct buttons: one for grid view and another for list view. <button onClick={() => setClassName('jsGridView')} title="Grid View" > <IoGrid className="active" s ...

javascriptreactjslistviewgridview

Deactivate a feature by clicking on it

HERE IS WHERE YOU CAN VIEW MY JSFIDDLE On my website, I have a main home page with a smooth scroll wheel script implemented. Additionally, I have a 'about' div that becomes visible when a button is clicked. The issue I am facing is that I want t ...

javascriptjqueryhtmlcss

Using jQuery to Populate (Inject Data into) a Nested SheepIt Form

I am working with a SheepIt form that deals with Vehicles, each of which can have any number of Stops (ranging from 0 to infinite). A vehicle is characterized by its type, notes, and an unspecified amount of stops. Each stop consists of a date, time, and l ...

javascriptjqueryjsonsheepit

Step by step guide to creating individual counter sections

I have set up a counter section where the numbers go from 0 to a specific value. However, currently all three counters start counting simultaneously. Is there a way for the first counter to count up first, then once it's done, move on to the second c ...

javascripthtmlcssbootstrap-4bootstrap-5

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

I am experiencing an issue with my card decks and expand/collapse functionality. Currently, when I expand one card in the deck, all the other cards in the row also expand, leaving a large blank area. This becomes problematic especially when the content is ...

javascripthtmlbootstrap-4

Creating a hover effect for displaying image masks

My website features a profile page displaying the user's photo. I am attempting to create a functionality where when the user hovers over their photo, a transparent mask with text appears allowing them to update their profile picture via a modal. How ...

javascriptjquerycss

Looking for tags similar to stackoverflow?

Is there a way to create a search box similar to the one in Tags where tag names are displayed immediately upon entering without pressing enter key? Could anyone provide me with a script or tutorial on how to achieve this? Is it done using JavaScript or j ...

phpjavascriptjquerymysqlajax

What are some methods to improve the performance of this jQuery-powered webpage?

I've developed a contact script that leverages jQuery for ajax requests and animations. However, the sluggish aspect arises when using a hashchange plugin to improve the functionality of the back button. Upon completing the animation for the 'f ...

javascriptjqueryoptimization

Why does Res.send return an empty object when console.log indicates it is not empty?

I am currently facing a challenge while using the Google Sheets API with Express, as I have limited experience with JavaScript. My goal is to pass a JSON object from Express to React, but for some reason, when I send the object, it appears empty on the fro ...

javascriptexpress

Which one should you begin with: AngularJS or Angular 2?

Interested in learning Angular and curious about the differences between Angular, AngularJS, and Angular 2. Should I focus on educating myself on Angular or go straight to Angular 2, considering it's now in beta version? Is there a significant differ ...

javascriptangularjsangular

Challenges with Material UI and Styled Components Overriding

When utilizing Material UI's Typography, everything was functioning perfectly: <Typography component="h1" variant="h5"> Sign in </Typography> However, I decided to transition to styled-components and attempted the foll ...

javascriptreactjstypescriptmaterial-uistyled-components

Uploading files using Angular can result in a null HttpPostedFileBase

When working with Angular in conjunction with MVC, I am facing an issue where the HttpPostedFileBase is coming up as null when attempting to upload a file. This is how the HTML looks: <input type="file" data-ng-model="fileName" onchange="angular.eleme ...

c#javascriptasp.net-mvcangularjs

The height map method for plane displacement is experiencing issues

The heightmap I have selected: Scene without grass.jpg map : Scene with grass.jpg map: https://i.sstatic.net/q6ScO.png import * as THREE from 'three'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'; import ...

javascriptthree.jsheightmap

Combining arrays using the jQuery .each() function

I'm attempting to generate an array from several div id's. Check out my code below: $(function(){ $('#content > div[id^=post]').each(function(){ var ele = Number($(this).attr('id').substr(5,4)); var arr ...

javascriptjquerydom