I am seeking to perform these operations solely using pure WebGL, without relying on the Three.js library

Question

I am seeking to perform these operations solely using pure WebGL, without relying on the Three.js library

if( keyboard.pressed("up"))
            pobjects[movementControls.translate].translateX(1);
        if( keyboard.pressed("down"))
            pobjects[movementControls.translate].translateX(-1);
        if( keyboard.pressed("left"))
            pobjects[movementControls.translate].translateZ(-1);
        if( keyboard.pressed("right"))
            pobjects[movementControls.translate].translateZ(1);
        if( keyboard.pressed("w"))
            pobjects[movementControls.translate].translateY(1);
        if( keyboard.pressed("s"))
            pobjects[movementControls.translate].translateY(-1);
        if( keyboard.pressed("x"))
            cobjects[movementControls.rotate].rotation.x+=0.1;
        if( keyboard.pressed("y"))
            cobjects[movementControls.rotate].rotation.y+=0.1;
        if( keyboard.pressed("z"))
            cobjects[movementControls.rotate].rotation.z+=0.1;

In this context, the goal is to manipulate object rotation, scaling, and translation without using three.js functions but relying solely on pure webGL techniques.

javascript three.js webgl

Answer 1

Answer №1

If you're looking to enhance your skills, I suggest checking out this informative tutorial on learningwebgl.com.

To capture key events effectively, it's essential to add event listeners for both 'keydown' and 'keyup' events and create corresponding functions that respond when these events occur. For instance, you can store pressed keys as attributes in a function object like so:

var currentlyPressedKeys = { };

function onKeyDown (e) {

  currentlyPressedKeys[e.keyCode] = true;

}

function onKeyUp (e) {

  currentlyPressedKeys[e.keyCode] = false;

}

You'll also need another function to define the actions to be taken when specific keys are pressed, such as

if ( currentlyPressedKeys[38] ) { //...

for example. (Refer to this list for key code references.)

This is where you manipulate variables like rotationY, translationZ, etc., which are passed as parameters to functions responsible for rotating, scaling, and translating the matrices representing your objects. These modified matrices are later combined with the original vertex position data in the vertex shader.

If you're unsure about these processes, I recommend revisiting the beginning of the linked tutorial or exploring the detailed explanation available on webglfundamentals.org.

I hope this information proves beneficial to you.

Answer 2

If you're looking to enhance your skills, I suggest checking out this informative tutorial on learningwebgl.com.

To capture key events effectively, it's essential to add event listeners for both 'keydown' and 'keyup' events and create corresponding functions that respond when these events occur. For instance, you can store pressed keys as attributes in a function object like so:

var currentlyPressedKeys = { };

function onKeyDown (e) {

  currentlyPressedKeys[e.keyCode] = true;

}

function onKeyUp (e) {

  currentlyPressedKeys[e.keyCode] = false;

}

You'll also need another function to define the actions to be taken when specific keys are pressed, such as

if ( currentlyPressedKeys[38] ) { //...

for example. (Refer to this list for key code references.)

This is where you manipulate variables like rotationY, translationZ, etc., which are passed as parameters to functions responsible for rotating, scaling, and translating the matrices representing your objects. These modified matrices are later combined with the original vertex position data in the vertex shader.

If you're unsure about these processes, I recommend revisiting the beginning of the linked tutorial or exploring the detailed explanation available on webglfundamentals.org.

I hope this information proves beneficial to you.

Answer 3

Answer №2

It's important to understand one key point.

When it comes to rotating, scaling, and translating objects in WebGL, there isn't a direct method like in "pure WebGL". The closest option is through matrix multiplication using shaders. Typically, rotation and other transformations are handled by JavaScript libraries like GLMatrix.

Answer 4

It's important to understand one key point.

When it comes to rotating, scaling, and translating objects in WebGL, there isn't a direct method like in "pure WebGL". The closest option is through matrix multiplication using shaders. Typically, rotation and other transformations are handled by JavaScript libraries like GLMatrix.

I am seeking to perform these operations solely using pure WebGL, without relying on the Three.js library

Answer №1

Answer №2

Similar questions

Issue with showing Angular directive

Toggle a Vue.js method to display responses for a particular question

Steps for adding an onclick function to a collection of div elements

The Child/Parent arguments in Typescript methods cannot be assigned

React's connect method is causing issues with my test case

Adding a dynamic style programmatically to an element created using createElement in Vue: A guide

Switch up a JSON string using JavaScript

Disable onclick action for programmatically created buttons

Achieving asynchronous results in the parent function with TypeScript: a guide

Activating Unsplash API to initiate download

What's the issue with my jQuery AJAX script?

How can I incorporate fetch into my code using VSCode?

Can someone explain the significance of this in an HTML form?

Can an onload function be triggered within the location.href command?

Transferring data securely via URLs

Transforming API data into a particular type using Typescript

Concealing/Revealing Elements with jquery

ng-model causing simultaneous changes to all selects

Is there a datatable available for live data with pagination and search functionality?

Issues with AngularJS UI Router functionality are being experienced specifically on localhost