[KOKUYO Vol.5] What we pursued was the quality and optimization of WebGL: KOKUYO’s “big picture” and “curiosity” packed into a pop-up notebook

Every time you turn a page of the notebook, KOKUYO’s “things” and “happenings” pop up one after another.
An exciting world unfolds. This Special Content was planned not merely as a flashy promotion to commemorate the 120th anniversary, but to express the very philosophy that connects KOKUYO’s past, present, and future itself.

CD/AD Yonemichi puts it this way:

“There were clearly two things we wanted to express in the Special Content:
the big picture of the conceptual diagram, and the message ‘Curiosity is Life.’” The “conceptual diagram” is the figure, defined in the early strategy stage, that gives a bird’s-eye view of “What is KOKUYO?”, shown below.

In the corporate, product, and magazine areas, we had been able to express each individual spot, but the one thing we had not been able to express was the whole feel of the conceptual diagram.
There was no place that could show KOKUYO’s big picture as an experience.
And then there was “Curiosity is Life,” which is also KOKUYO’s corporate message. How to translate these into the content was the crux at the planning stage.

More than 20 ideas were considered at the concept-planning and design stage. Among them, the motif we ultimately chose was the “Campus notebook,” and the prototype of the concept was a “pop-up picture book.”

Ideas written in a notebook become three-dimensional, pop out, and blend into people and society —.

This was a metaphor for what KOKUYO has done for 120 years — “thinking of people, giving form to ideas, and delivering them to society as things and happenings; these bring curiosity to people and form a rich society” — a concept that could hold true only for KOKUYO.

Once the “pop-up picture book” concept was set, the question was how to translate the theme of “curiosity” into an experience within the content.
What emerged in that discussion was the idea that “if you put on something like AI glasses, what is drawn in the notebook appears to pop out in three dimensions.”
The notion of a “filter” connecting the real world and the world where excitement takes shape developed into the concept of switching worlds via the 594-degree “diagonal line” of KOKUYO’s new visual identity.

The copywriting was handled by Gen Kogusuri.
Based on an enormous amount of input — KOKUYO’s 120-year history, its vision for the future, employee interviews, and more — he wove the narrative.
The story is structured to trace “past, present, future.” Seven sections — ledgers, stationery, furniture, space, mail-order, THE CAMPUS, and KOKUYO’s future — lead into a greeting for the 121st year.

The illustration was handled by Ayumi Takahashi. She drew hundreds of objects with a KOKUYO-like “sense of excitement” and “vividness of color.”

The CG animation was handled by everyone at MORIE Inc. Conveying the image of the motion, centered on Yonemichi and Ide, they added movement to the illustrations. Through close collaboration during implementation as well, we were able to build the world just as we had imagined it.

The music was handled by Ryo Arimura.
Adopting the idea of changing the track for each of the seven sections, he produced eight pieces in total. Rather than a single background track, sounds are added and the atmosphere shifts as the story progresses, expressing how the experience grows richer.

At first, pursuing physical accuracy, TD Umetsu implemented it with physics simulation using many (100–200) calculation points. But because this method involved an enormous amount of computation, performance issues remained. So he rethought the approach and generated a “Bézier surface” producing a smooth curved surface from 16 control points. This achieved a lightweight, natural page turn.

What TD Umetsu calls the most technically difficult was “linking the 3D models with the page” — making the animated 3D models placed on top of the page follow it in real time, in step with the page-turning motion. Verifying whether it was even technically feasible alone took about two weeks.

The 3D models placed on the notebook (birds, figures, and so on) are made up of many small triangles and are constantly animating. In step with the page-turning motion, we needed to obtain all the vertex coordinates of these moving 3D models and make them follow the page’s deformation.

After various verifications, we finally succeeded in making them follow. This realized the most impressive experience in this content — products and people continuing to move vividly even while a page is being turned.

We built a system in which the music switches smoothly, without interruption, in step with page transitions. Overcoming both a high-load method aiming for perfect synchronization and the latency issues of simple playback, we discovered and implemented an intermediate method that reconciles performance and quality.
Specifically, we tested the following three approaches and adopted the third, which had the lowest load.

1. Perfect synchronization

A method that fully syncs at the MP3 frame level (on the order of 0.001 sec). Extremely accurate, but its load on performance was very high and caused crashes on older smartphones, so it was abandoned.

2. Simple playback

A method that simply plays the next track. Easy, but a gap arose at the switch between tracks and harmed the experience, so it was not adopted.

3. An intermediate of 1 and 2.

Preload the next background track data and keep it on standby, “ready to play at any time.” When a page is turned, obtain the elapsed time of the previous track (for example, 10:00) and start the next track from that time.

For method 3, because there is no time spent searching for the playback position, the latency is small. Strictly speaking, a gap of a fraction of a second may occur, but it is at a level humans cannot perceive — an optimal solution that reconciles performance and quality.