演算子の意味が分かりません。

実現したいこと

r << 16 | g < 8 | b
上記の箇所の内容を理解したいです。

(1) 「r << 16」は、変数rの値をを16ビット左シフトしている。
(2) 「| g」は(1)で演算した値を変数gの値でビットごとの論理和を施している、という意味なのでしょうか。
(3) 「< 8」の部分は全く分かりません。「<」は関係演算子でしょうか。

解説をお願い致します。

前提

「WebGL_three.jsではじめる3D-CGプログラミング」で勉強しています。

javascript
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5</head>
6<body>
7<div id="webgl_view" style="border: 1px solid; width: 400px; height: 400px;"></div>
8<script src="three.js"></script>
9<script>
10// ページを読み込んだら、init()を実行
11window.onload = init;
12var field;
13var camera;
14var light;
15var scene;
16var renderer;
17
18function init() {
19	// 3D世界作成
20	initWorld();
21	// レンダリング
22	render();
23}
24
25function initWorld() {
26	// 地面作成
27	field = createField();
28	// 白いライトを作成
29	light = new THREE.DirectionalLight(0xffffff);
30	// ライトの方向を設定
31	light.position.x = 1;
32	light.position.y = 10;
33	light.position.z = -7;
34	// sceneを作成
35	scene = new THREE.Scene();
36	// sceneに平面とライトを追加
37	scene.add(field);
38	scene.add(light);
39	// 地面に物体を追加
40	addObjects();
41	// カメラを作成
42	camera = new THREE.PerspectiveCamera(60, 1.0, 0.1, 1000);
43	camera.position.x = 0;
44	camera.position.y = 50.0;
45	camera.position.z = 6000;
46	// WebGLRendererを作成
47	renderer = new THREE.WebGLRenderer({clearColor: 0x0020ff, clearAlpha:1.0 });
48	// レンダリングを行う大きさを400*400ピクセルに設定
49	renderer.setSize(400, 400);
50	// WebGLRendererの要素をWebページ上のdiv要素内に配置
51	document.getElementById('webgl_view').appendChild(renderer.domElement);
52}
53
54function render() {
55	camera.position.z -= 0.5;
56	camera.lookAt({x: camera.position.x, y:0, z:camera.position.z - 100});
57	// レンダリングを実行
58	renderer.render(scene, camera);
59	// 連続して呼び出す
60	requestAnimationFrame(render);
61}
62
63// 地面（平面mesh）作成
64function createField() {
65	// テクスチャ画像作成用canvas作成
66	var cv = document.createElement("canvas");
67	// テクスチャ画像サイズ設定
68	cv.width = 1024;
69	cv.height = 1024;
70	var context = cv.getContext("2d");
71	// テクスチャ画像の各ピクセル設定
72	for (var i = 0;i < cv.height;i++) {
73		for (var j = 0;j < cv.width;j++) {
74			var r = 192 + Math.floor(Math.random() * 48);
75			var g = 192 + Math.floor(Math.random() * 48);
76			var b = 128 + Math.floor(Math.random() * 32);
77			context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
78			context.fillRect(j, i, 1, 1);
79		}
80	}
81
82	var texture = new THREE.Texture(cv);
83	texture.needsUpdate = true;
84	// 地面用に平面を作成
85	var obj = new THREE.Mesh(new THREE.PlaneGeometry(4000, 12000), new THREE.MeshPhongMaterial({ map:texture }));
86	// 回転させてXZ平面上に配置
87	obj.rotation.x = -Math.PI / 2;
88	// 作成した地面用Planeを返す
89	return obj;
90}
91
92function addObjects() {
93	// 立方体を2000個配置
94	for (var i = 0;i < 2000;i++) {
95		// 乱数で位置を決定
96		var x = Math.random() * 4000 - 2000;
97		var z = Math.random() * 12000 - 6000;
98		// 乱数で色を決定
99		var r = Math.floor(Math.random() * 256);
100		var g = Math.floor(Math.random() * 256);
101		var b = Math.floor(Math.random() * 256);
102		// オブジェクトを作る
103		var obj = new THREE.Mesh(
104		  new THREE.CubeGeometry(2, 2, 2),
105		  new THREE.MeshPhongMaterial({ color: r << 16 | g < 8 | b }) // 疑問の箇所 @@@@@@@@@@@@@@
106		);
107		// 位置を設定
108		obj.position.x = x;
109		obj.position.y = 1.0;
110		obj.position.z = z;
111		// sceneに追加
112		scene.add(obj);
113	}
114}
115</script>
116</body>
117</html>

試したこと

専門書で調べました。

行動規範の内容に同意します

回答2件

おそらくそこは、
r << 16 | g << 8 | b
でしょうね
これなら意味はわかるでしょうか

投稿2024/04/12 14:09

y_waiwai

総合スコア87784

taka_oct092018

2024/04/15 14:11

y_waiwai様返信ありがとうございます。例に上げて頂いたコードも分かりません。

y_waiwai

2024/04/15 23:05

もうちょっとわかりやすく書き直しましょう (r<<16)|(g<<8)|(b) では理解できるでしょうか javascript 優先順位、でぐぐってみよう

taka_oct092018

2024/04/18 10:24

y_waiwai様アドバイスありがとうございます。以下のような解釈で合ってますでしょうか。 (1) まず最初に「r<<16」で変数rのデータを16ビット左シフトする。 (2) (1)と同様にgを８ビット左シフトする。 (3) bはそのまま。 (4) 「r << 16 | g << 8」の箇所で、(1)と(2)のそれぞれの演算結果同士の値をビット演算する。 (5) 同様に(4)とbの値をビット演算する。よろしくお願い致します。

y_waiwai

2024/04/18 22:54 編集

その式の動作としてはそれでいいかと思います。さて、あなたのそのコードの中では、この式がどういう意味を持ってるのか、なにをやっているのか、ってのはわかってるでしょうか。 r、g、b のそれぞれなにを表す変数なのか、ってのはわかるでしょうか。まだまだ、演算子の意味に対しての理解も浅いようなので、学習を進めていく必要がありますねー

taka_oct092018

2024/04/19 13:51

y_waiwai様返信ありがとうございます。赤・緑・青を表す変数です。 colorプロパティの設定を行っている演算です。具体的な深い意味までは分かりません。

y_waiwai

2024/04/20 00:28

と、いうことであれば、 r << 16 | g < 8 | b ってのは明らかに間違い、ってのは理解できたでしょうか。

taka_oct092018

2024/04/25 05:46

y_waiwai様アドバイスありがとうございます。すぐに返信したつもりでしたが、投稿されていませんでした。以下のような解釈で合ってますでしょうか。 (1) まず最初に「r<<16」で変数rのデータを16ビット左シフトする。 (2) (1)と同様にgを８ビット左シフトする。 (3) bはそのまま。 (4) 「r << 16 | g << 8」の箇所で、(1)と(2)のそれぞれの演算結果同士の値をビット演算する。 (5) 同様に(4)とbの値をビット演算する。よろしくお願い致します。

行動規範の内容に同意します