/r/q?req.query.q -- Subreddit Search

8,276 Subscribers

Adding buildings system for my reDEAD game [in house webGL engine].

1 Comment

2024/04/09
14:04 UTC

Babylon.js 7.0 Has Officially Been Released!!!

0 Comments

2024/03/28
20:56 UTC

zephyr3d - WebGL and WebGPU rendering engine

Zephyr3d is a 3D rendering engine for browsers, developed in TypeScript. It is easy to use and highly extensible, with seamless support for both WebGL and WebGPU.

source code: https://github.com/gavinyork/zephyr3d

demos: https://gavinyork.github.io/zephyr3d/demo.html

2 Comments

2024/03/21
10:51 UTC

WebGL onFrameFinished()?

I've made a raycaster in WebGL and I want to scale the WebGL canvas when the shader takes too long to render. I've tried using gl.finish() with Date.now() and performance.now() but it didn't work.

let renderStart = performance.now();
canvasgl.width = Math.ceil(window.innerWidth/scale);
canvasgl.height = Math.ceil(window.innerHeight/scale);
//update uniforms
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.finish();
console.log(performance.now()-renderStart); //keeps returning times of 0.2 ms when its clearly taking many frames on 60fps.

Is there a proven function or way to see frametimes? thank you!

4 Comments

2024/03/13
15:37 UTC

webgl2 with premultipliedAlpha and unwanted edges

I am trying to craft a very simple webgl demo with premultipliedAlpha:false. However I am having hard times getting rid of the unwanted dark pixels around the drawn triangles edges. I need this webgl to be premultipliedAlpha:false and alpha:true but can not figure out what is the missing piece:

I have tried with:

outColor.rgb /= outColor.a in fragment shader
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
different combinations of gl.clearColor(), gl.colorMask(), gl.clear()
gl.blendFunc()

but so far no luck.

Here is my code:

<body>
<canvas id="canvasWebgl" width="256" height="256" style="background-color: red;"></canvas>
<script>

const canvasWebgl = document.getElementById("canvasWebgl");

var vertexShaderSource = `#version 300 es
in vec2 a_position;
out vec2 v_texCoord;
void main() {
    vec2 clipSpace = (a_position * 2.0) - 1.0;
    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    v_texCoord = a_position;
}`;

var fragmentShaderSource = `#version 300 es
precision highp float;
uniform sampler2D u_image;
in vec2 v_texCoord;
out vec4 outColor;
void main() {
    outColor = texture(u_image, v_texCoord);
}`;

function createShader(source, type) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
}

function drawPoints(points, color) {
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(color));
    gl.drawArrays(gl.TRIANGLES, 0, points.length/2);
}

const gl = canvasWebgl.getContext("webgl2", {premultipliedAlpha:false});

gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

const program = gl.createProgram();
gl.attachShader(program, createShader(vertexShaderSource, gl.VERTEX_SHADER));
gl.attachShader(program, createShader(fragmentShaderSource, gl.FRAGMENT_SHADER));
gl.linkProgram(program);
gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);

drawPoints([0, 0, 1, 0, 0, 1], [0, 255, 0, 0]);
drawPoints([.3, .3, 1, .4, .4, 1], [255, 0, 0, 255]);
</script>
</body>

and the rendered output:

https://preview.redd.it/rwxm87c6jrnc1.png?width=265&format=png&auto=webp&s=df433bf3bb2712be9dcc3280e675f33c7415d4dc

Any ideas?

3 Comments

2024/03/11
20:15 UTC

Plants vs Zombies but with spaceships!

Hello, I am a student at the University of Washington and we need playtesters to play our game capstones project to gather play data, if anyone is interested, here is the link to our itch.io: https://futurist3.itch.io/project-battleship

Project Battleship is a 2D Strategic Tower Defense game with spaceships. You must defend your mothership by sending out battleships to attack incoming enemy ships from an invading mothership! You will draw paths for your ships to travel in and your goal is to destroy the enemy mothership while defending your own.

Again, if anyone is interested, here is the link to our itch.io: https://futurist3.itch.io/project-battleship

Thank you!

0 Comments

2024/03/10
16:37 UTC

Does raymarching have any significance in your career?

I am asking this for webgl specifically because I am learning it out of curiosity. I have used shaders in my projects in past but it was mainly for transition effects or for post processing. As I am learning Raymarching, I don't see myself using it extensively in my work and raymarching examples I see on shadertoy also seem like they can only be for hobby.

Please correct me if my perspective is wrong, and if Raymarching has significant applications in your professional webgl projects.

4 Comments

2024/03/07
12:01 UTC

Eonfall | Official Gameplay Trailer

3 Comments

2024/02/26
09:45 UTC

Blazing fast and lightweight WebGL renderer, rendering 10k sprites at 60fps !

I just created a quick WebGL renderer. Is anyone interested in being an early user? ; )

Nightre/Rapid.js: 🚀 Blazing fast and lightweight WebGL renderer, rendering 10k sprites at 60fps ! (github.com)

Oh by the way, does anyone want to collaborate with me to create a webgl game engine!

6 Comments

2024/02/20
14:29 UTC

Unreal Engine 5 ported to WebGPU

0 Comments

2024/02/15
22:23 UTC

Pixel animation

Hi guys... new to WebGL. I was roaming on Clerk.com where I accidentally found this neat animation. Do you guys have any ideas on how to recreate this? Even in their footer it stays without having to hover over it to animate. I want to achieve this cool looking pixel just animating in the background

1 Comment

2024/02/14
03:28 UTC

WebGL Parallax/Circles Image Effect

Hello, I am trying to recreate the Image Effect, Circles from squarespace on another website. I use it on my squarespace page for my business but am making my own personal page and wanted to recreate it. However I cannot find any sort of webgl code anywhere for how to recreate it. I was wondering if anyone had a "coded" solution for this? The example is the "circles" effect seen here: https://www.will-myers.com/squarespace-background-image-effects

1 Comment

2024/02/13
19:45 UTC

Call for Presentations - C3 Dev Festival

It is the contemporary software engineering and design festival. Our 2-days event will take place in Amsterdam. We will have one-day with two tracks featuring the latest and greatest news and insights from the global network!

Your talk topic should be relevant to the coding, career & creativity and topics around it, including (but not limited to):

* Career
* Culture
* Psychology
* Productivity
* Code
* Architecture
* Infrastructure
* Deep learning
* AI
* Data
* Graphics
* Creativity
* UX

Full talk length: 20 min.
Lightning talk length: 5-7 minutes.

Feel free to submit multiple talk proposals if you have a few ideas to share!

⚠️ Submission Deadline → February 28

Submit your talk → https://docs.google.com/forms/d/e/1FAIpQLSfD-K3eyLhLglvqpsCEzq1-m_K5NE2ih5YMtujxyIRcjiJw_g/viewform
Learn more → https://c3fest.com/
Follow on Twitter → https://twitter.com/c3devfest

0 Comments

2024/02/12
16:56 UTC

Wrong colors when converting between different texture formats

I'm using WebGL to add up and compute the motion blur of 32+ provided samples (as in, the samples are external to the program, I don't control how they get generated).

The program starts by running the add_shader in a loop, accumulating the input samples to a high-bitdepth framebuffer:

//Add shader
uniform highp isampler2D accTex;
uniform sampler2D newTex;

out ivec4 outColor;

void main(){
	ivec2 texelCoord = ivec2(gl_FragCoord);
	ivec4 prevVal = texelFetch(accTex, texelCoord, 0);
	vec4 newVal = texelFetch(newTex, texelCoord, 0);
	outColor = ivec4(prevVal + ivec4(newVal));
}

and then the divide program divides that by the # of samples

uniform highp isampler2D srcTex; //this will be set to the texture of the last framebuffer that was rendered to
uniform int samples;

out vec4 outColor;

void main(){
	ivec2 texelCoord = ivec2(gl_FragCoord);
	vec4 prevVal = vec4(texelFetch(srcTex, texelCoord, 0));
	outColor = prevVal / samples;
}

The textures definitions are as follows:

framebufferTex 1 & 2 (accTex): texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32I, canvas.width, canvas.height, 0, gl.RGBA_INTEGER, gl.INT, emptyData);
newTex: texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, sampleData);

As a test image, I am using a pale yellow circle on a dark cyan background, but the problem I'm having is that the final image that is being output has the blurred, yellow circle is rendered perfectly, but the background is almost black. I have a feeling this is something to do with converting between the different texture formats, but I'm new enough to webGL that I have no idea how to fix such an issue.

Here's a JSFiddle with the current "working," prototype: https://jsfiddle.net/LegendarySunDown/x83pzmq4/5/

EDIT: Fixed it! Turns out the ivec4() function was rounding the colors too early, causing everything to either be a 0 or 1. I fixed it by changing the following code:

Vertex Shader:
outColor = prevVal + ivec4(newVal * 255.0);

Fragment Shader:
vec4 prevVal = vec4(texelFetch(srcTex, texelCoord, 0)) / 255.0;

Here's the updated JSFiddle: https://jsfiddle.net/LegendarySunDown/x83pzmq4/7/

3 Comments

2024/02/10
00:27 UTC

Zombie Destroyer: my indie game

Hi, folks! I want to show my WebGL game demo

https://neuromodern.github.io/Zombie_Destroyer/

https://preview.redd.it/579qt9jifehc1.png?width=1193&format=png&auto=webp&s=d34d9a193e9128a5aec47461199cfad2114fd3b7

https://i.redd.it/7m80mt21fehc1.gif

5 Comments

2024/02/08
17:43 UTC

WebGL + WebGPU Meetup - 20 March 2024

We are excited to announce the next in-person WebGL + WebGPU meetup in San Francisco during GDC on March 20. Watch this space for more information and registration coming soon! If you have a WebGL or WebGPU project you would like to share, let us know! https://www.khronos.org/events/webgl-webgpu-meetup-GDC-2024

0 Comments

2024/02/08
00:42 UTC

WebGL Rendering in Chrome But Not Firefox

Let's say I'm drawing a simple triangle. I pass the following coordinates to my vertex shader:

	points.push(vec4(0.0, 0.5, 0.0, 1.0));
	points.push(vec4(-0.5, 0.0, 0.0, 1.0));
	points.push(vec4(0.5, 0.0, 0.0, 1.0));

I then pass in the corresponding colors:

	colors.push(vec4(1.0, 0.0, 0.0, 1.0));
	colors.push(vec4(0.0, 1.0, 0.0, 1.0));

On Chromium-based browsers, the triangle renders fine. The third vertex (with the missing color) is just colored white. However, on Firefox, I get the error

WebGL warning: drawArraysInstanced: Vertex fetch requires 3, but attribs only supply 2.

What's going on? Why will Chromium render the triangle but not Firefox?

3 Comments

2024/01/24
20:38 UTC

Uni project WebGl

I have a software project for uni and I have to use WebGl to do it I've never done it before. Anyone have any useful resources I could use to learn from please let me know

7 Comments

2024/01/24
11:26 UTC

Babylon.js minigame. Our iconic car - Yugo in the outer space

We were testing possibilities of WebGL engine to make interactive web experiences and here is what we made in past couple of months. Babylon.js minigame where you can drive our most iconic car around the space. Feel free to check it out and let us know what you think in the comments.

Click here to play: https://yugo.quince.cc

3 Comments

2024/01/22
19:35 UTC

Webgl threejs expert needed

We have cad file from our industrial design firm of our product in .DWG format from solidworks. We need to convert this to gltf and create certain animated scenes for use with three.js / webgl on our website which will transition the model showing different views and features as you scroll ending in a fully interactive 3d model. We have full stack developers working on our react/straoi/tailwind/magento/aws platform but need a 3d expert for web presentation. I run a agency and have lots of work

4 Comments

2024/01/21
03:16 UTC

What is the best way to debug a webgl program?

This has probably been the hardest part of my experience with webgl.

How do you guys debug?

5 Comments

2024/01/20
15:48 UTC