toly19

Возможно, есть метод и получше, но я придумал вот это:

.image-products>div {
	border: 1px solid red;
	margin-top: 10px;
}

<div class="image-products">
	<img src="http://www.cscl.ru/images/articles/logo-cs-1-6.jpg">
	<img src="http://www.cscl.ru/images/articles/logo-cs-1-6.jpg">
</div>

let div_first_image = document.createElement('div');
let div_last_image = document.createElement('div');
div_first_image.className = 'product-thumb-primary';
div_last_image.className = 'product-thumb-secondary';

let first_img = document.querySelectorAll('.image-products img:first-child')[0];
let second_img = document.querySelectorAll('.image-products img:last-child')[0];

let parentDiv = document.querySelector(".image-products");//лучше через ID

parentDiv.removeChild(first_img);
parentDiv.removeChild(second_img);

div_first_image.appendChild(first_img);
div_last_image.appendChild(second_img);

parentDiv.appendChild(div_first_image)
parentDiv.appendChild(div_last_image)

Чего-то ты напутал с кодом.

let persons = [];
	/*var person = {
		name: '',
		sname: '',
		age: ''
	};*/
	function ask() {
		let person = {};
		person.name = prompt("Введите свое имя:");
		person.sname = prompt("Введите свою фамилию:");
		person.age = prompt("Введите свой возраст:");
		persons.push(person);
		ask1();
	}
	function ask1() {
		let a = prompt("Ввести еще одного пользователя?", "");
		if (a != null) {
			ask();
		}
		else {
			test();
			//либо persons.forEach(say);
		};
	}
	let res;
	function test() {
		res = persons.map((persona, n) => `persona №${n}- name: ${persona.name}; sname: ${persona.sname}; age: ${persona.age}`).join("<br />");
		document.write("<p>" + res+"</p>");
	}

	function say(person, personNum) {
		document.write("Номер: " + personNum + "<br/>");
		document.write("Имя: " + person.name + "<br/>");
		document.write("Фамилия: " + person.sname + "<br/>");
		document.write("Возраст: " + person.age + "<br/>");
		document.write("\n");
	}
	ask();
	//say();

На сайте отдельно видео без эффектов+4 картинки.
Там отдельно изменяются прозрачности всех четырех картинок сразу.
По поводу прозрачности в зависимости от положения курсора( как я думаю):
Для каждой картинки есть условный центр действия- чем ближе курсор к нему, тем меньше прозрачность картинки.
Двигая курсор, рассчитываешь расстояние между двумя точками- курсором и условным центром,
и считаешь прозрачность( интерполяция тебе в помощь).

Первый код- код фрагментного шейдера. Его суть- вернуть цвет пикселя (gl_FragColor).
Этот цвет ты берешь из юниформа u_Color, тоесть, все, что отрисует OpenGL будет цвета u_Color.

uColor = glGetUniformLocation(programId, "u_Color"); //просто ссылка на сам юниформ в шейдере( чтобы знать, куда отправлять цвет)

glVertexAttribPointer(aColorLocation, 3, GL_FLOAT, false, 20, vertexData);//тут подключаешь данные из буфера к атрибуту шейдера- указываешь, где брать данные
glEnableVertexAttribArray(aColorLocation); // включаешь атрибут
vertexDate.position(2); //непонятно что :)

Короче, ты подключаешь буффер vertexData к aColorLocation, но на цвет пикселя эти данные никак не влияют

denwer для ноды не подойдет.
установи сам node.js
denwer - только php

в js: decodeURIComponent
decodeURIComponent("brand_id%5B%5D")//"brand_id[]"
в php юзай urldecode

Накидал код за пару минут :)

function resString(str, num) {
	return str.split(" ").map(function (a) {
		if (a.length >= num) {
			var q = [];
			a.split("").forEach(function (z, n) {
				if ((n + 1) % num === 0) {
					q.push(z, "\n");
				} else {
					q.push(z);
				};
			});
			return q.join("");
		};
		return a;
	}).join(" ");
};
console.log(resString("kekekekekekekekekekeke",5))

Код не претендует на адекватность

Про литературу нечего не подскажу, но на вопросы отвечу:
1- в webgl есть функция gl.readPixels, которая позволяет считать определенную область буфера кадра( чтение из текстуры) в определенный буфер. Если знать ширину и высоту области считывания, можно легко превратить одномерный массив в 2-х мерный.
2- диапазон значений в float point текстуре [- бесконечность, + бесконечность] с точностью в 32 бита на все 4 канала( 8 бит на канал- 256 цветов)
3- массив( буфер цветов) под полным контролем программиста
4- смотри 1- для чтения. gl.texImage2D может принимать в качестве последнего параметра буфер цветов( типизированный массив), которые необходимо записать в текстуру
5- хз

Изучать webgl по книга Opengl- бред.
Лично я основы webgl учил вот по этой книге( правда она на английском):
WebGL Beginner's Guide